In my project, I need to embed audio (ex: mp3, etc) into a web page. When user visits the page, the audio will begin playing. When the audio ends, the questionnaire (form fields) will appear for the user to answer.
Is there is way to check if the audio has finished playing using jquery, so that the questionnaire can appear after the user has listened to the entire audio?
I know one way to check is to determine the audio length, then I can set a timer to display the questionnaire, but I'm hoping jquery has some sort of event handler that allows me to accomplish this.
I see that jquery has many audio plugins, and I can't be sure which will do what I want here: http://plugins.jquery.com/plugin-tags/audio
Any ideas are greatly appreciated.
Thanks.
If you are using the html5 audio tag, there is the "onended" event handler. I don´t know if the browsers support it yet.
Something like:
<audio src="xpto.mp3" onended="DoSomething();"></audio>
In the last case you can use a swf that can play the sound, and alert your javascript when it reaches the end.
You can also add a jQuery event listener like so:
$("audio").on("ended", function() {
console.log("All Done!");
});
Using JavaScript event listener.
var myAudio = document.getElementById("myAudioId");
myAudio.addEventListener("ended", function() {
alert("The audio has ended.");
};
Related
I am very new to javascript. I have a function that activates only when some media (audio or video) is played. I use .bind("ended") to activate the function. The only problem is, after I activate the function, I would like to reset the players so that it seems as if they haven't been played before.
It is part of an experiment with a series of trials, and in each trial the answers should only be presented to participants after they have played the media. The only problem is sometimes the same media appears multiple times in different trials, so if they have played the media on a previous trial, they will see the answers immediately. I want to be able to reset the players at the end of each trial so that they are not "ended", so I don't have this problem.
$('#realplayer-'+trialOrder[curTrial]).bind("ended", function(){
$('#foilplayer-'+trialOrder[curTrial]).bind("ended",showanswers)
});
$('#foilplayer-'+trialOrder[curTrial]).bind("ended", function(){
$('#realplayer-'+trialOrder[curTrial]).bind("ended",showanswers)
});
Let me know if you can help!
Hi i am calling two different web services from my angular script. First service is returning text which i am using as an input to second text to audio service. Since in some case text is long string and it takes time to load the audio file, but meanwhile text output prints on screen. My requirement is to print the text output on screen when audio playback is available. I am using html 5 tag for audio playback. Please let me know if there is any other way to do the same.
You need to add an event listener to the 'canplaythrough' event on the audio element. Register a callback which displays the current text and plays the audio once this is the case.
There isn't actually an event available which fires when media has loaded completely; canplaythrough is just an estimate by the browser that it will play without interruptions bases on the amount that is buffered and the current download speed. This isn't exactly foolproof but it's the best option available.
I'm currently using Wordpress 4.0 and all my audios on posts/pages are embedded using the default Wordpress audio player - through a shortcode like:
[audio http://en.support.files.wordpress.com/2012/05/mattmullenweg-interview.m4a]
Now, I want to track how many times the play button is pressed. So, my question is: how can I capture this player events?
PS: I tried the following (and it didn't work):
$('.mejs-playpause-button button').click(function(){
console.log('TESTING');
});
It's possible that the event propogation for that button is being prevented by the MediaElementJS library that manages the audio element.
As an alternative I would suggest listening for 'play' events on either the MediaElementJS element or directly selecting the native HTML audio element and listening for the 'play' event on this object.
I briefly attempted to get the MediaElementJS instance for a player but it is hard to get hold off because of the way that Wordpress makes these instances.
However you can add an event listener to an audio element and record the amount of times this element is fired:
$('audio').on('play', function(){
console.log("play");
});
This might not be the best solution if you have multiple elements on a page though.
I have an HTML page with multiple audio elements that I need to play in a continuous was, meaning I need each one to start playing after the previous one finished playing.
How can I assign multiple listeners to do this?
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events - here are all events related to audio files. I think you need to use ended event.
Also here is a small example https://stackoverflow.com/a/9376544/1353837
I`m using SWFObject for flash player on my webpage.
Player as usual has buttons like Play, Stop, Pause etc.
I need to catch moment, when my user click on any button and i need to execute some JS-function in this time.
Sorry for my english and thanks a lot in advance.
P.S. I dont have sources of my swf file.
AFAIK, this is done via the getURL() function. You need to define the following in the action script of the flash file:
this.onClick = function(){
getURL("javascript:yourFunctionName();");
};
This means you can't just take any flash file and make it call JS functions, it must be defined within the flash file itself.
If I am wrong, I'd love to hear how this can be done more generically without editing the flash itself.
Calling a javascript function from flash can also be achieved using ExternalInterface.
You can use the method onPress.
Example
[button_name].onPress = function(){
//right here the stuff you wanna do
}
Hmm...
At the risk of going out on a limb, I actually don't think there's any way, within the confines of cross-browser Javascript proper, to hook into specific Flash player activity like that. In fact I'd be very surprised indeed if there were -- although I'd love to hear otherwise from someone more knowledgeable than me. :)
Assuming that's true, other than by some combination of listening (in the Javascript running in the context of your page) for focus and click events raised by the ActiveX/plug-in object itself (which probably wouldn't be very specific or dependable -- I don't even think click events get raised ), I doubt you'd have much luck.
From what brief testing I've done so far:
window.onload = function()
{
document.onclick = function()
{
alert("Clicked the page!");
}
document.getElementById("mySWFObjectID").onfocus = function()
{
alert("Focused the player!");
}
document.getElementById("mySWFObjectID").onclick = function()
{
alert("Clicked the player!");
}
}
... the player doesn't seem to be bubbling click events up to the page; in IE, the focus event fires, but not in Firefox, and only once, when the control gains focus. So aside from writing, maybe, a browser plug-in of some kind, to get you some lower-level access than what's exposed at the Javascript level, you might be out of luck on this one.
But again, if there's anyone out there who knows otherwise...