Develop Reference

How to determine if colab ipd.audio player has stopped playing

I am trying to figure out how to tell if an ipd.Audio player on colab has finished playing so that code can execute afterwards. Is there some way to handle it through a javascript event? Thanks.

To do this, use the HTML Audio event directly and register an event handler on the ended event.
Here's the full example notebook:
https://colab.research.google.com/drive/15FbPqHyY1sgqtLBTJFK8ROgeUMa2syzf?usp=sharing

How to determine if onStateChange event was triggered by API or User interaction?

I'm using the Youtube iFrame API for a little app that lets you watch videos in sync with other people. The onStateChange event lets me know if a player has played or paused a video, but does it contain any information about whether that action was triggered via the user with a click on the play/pause button, or whether my application triggered a play via the player.playVideo() function?
I need to know the difference so I don't get into an infinite loop situation where a player hits pause, that pause event is sent to the other person and I pause the video on their end via player.pauseVideo(), which triggers another onStateChange pause event, etc etc.
So, does onStateChange tell me how the event was triggered, or do I have to come up with a way to keep track of an event's initiator myself?

onStateChange only returns an integer data that is related to the state of the player. such as the following:
-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued).
therefore you need to create a custom code that will help identify the source of the event. The implementation can't be as simple as creating a global variable though since you want to sync videos with other people. You would be needing some server interaction to accomplish this.

Setting Keyboard Focus to YouTube Embed

I’m trying to find a way to get the keyboard to focus on the YouTube player in my page. This could, for example, make it easy to use the space bar to play/pause the video.
Here’s an example: Testing Embed Keyboard Focus (CodePen)
As it is, I’m having to click on the player for it to be able to accept keyboard shortcuts. Because this is not ideal, I’m hoping for a workaround using Javascript or jQuery to set the focus on the video.
I’m aware that – as an alternative – I could use the spacebar key to call the player object's playVideo or pauseVideo methods, but that still wouldn’t get me access to the full list of the YouTube player’s keyboard controls.
And if this is simply impossible, I’ll understand. But it will be nice to know. Thanks!

You can do something like this to implement whatever hotkeys you want to enable for the player at any rate.
http://codepen.io/anon/pen/jbgeYo
Basically you create an input (can style it so that it blends in, you can't do display:none as that won't let you assign focus), and then attach a keypress event to that input. You then can call functions on the "player" API object which allows you to play/pause etc.
var dummy=document.getElementById("dummyFocus");
dummy.focus();
dummy.addEventListener("keypress",function(event){
if(event.keyCode== 32){
if(player.getPlayerState() == 1){
player.pauseVideo();
}
else{
player.playVideo();
}
}
});
Insert that after you create your player object, and add an input (I used type="button") to the page with id="dummyFocus"
Edit as needed, but that's a workaround anyway.

In order to achieve this you would have to focus() document embedded in the Youtube's iframe. This is restricted by Same-origin policy for security reasons.
Here's a piece of code for completeness
function onPlayerReady(event) {
document.querySelector('#player').contentDocument.body.focus();
}
And it would throw
Uncaught SecurityError: Failed to read the 'contentDocument' property
from 'HTMLIFrameElement':

how to add listeners to audio elements for continuous playback

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

How to detect an audio has finished playing in a web page?

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.");
};