We Keep Coding

How to get HTML5 audio duration to show and avoid errors from play() and pause()

I am having an issue getting the audio of an html5 audio object to load properly. This is due to functions that are being run: play() and pause() and the duration is being returned before it is fully loaded.
Here is the code in the controller that calls a function to get the duration of the audio:
if (audioLoadButtonWasPressed) {
$timeout(function () {
scope.duration = audioFactory.retrieveDuration().toFixed(1);
}, 200);
}
Here is retrieveDuration:
function retrieveDuration() {
audio.play();
audio.pause();
if(audio.readyState != 0) {
audio.currentTime = 0;
}
return audio.duration;
}
I have two issues with this code that have one root cause. Because play() and pause() are running alongside each other, sometimes an error comes saying that pause() prevented play() from running then audio.duration is NaN. But everytime it runs, despite this, the function getDuration() always returns before it has a value causing scope.duration to always equal 0.0.
I have tried to add setTimeouts, promises, and other things to get the function to wait before returning, but it doesn't work and toFixed() is always undefined because there is no value returned from retrieveDuration(). I found this question on stackoverflow but I can't figure out how to get this event listener to work. Any advice would help a bunch. Thank you!

Call function when <audio> is at specific time

I am currently doing some fun website, which requires audio cues (I assume that's the name?). I want the site to do something, when the song has been played for exactly X amount of time.
I can easily get the current time using element.currentTime, but I have no clue how to say: when element.currentTime == 5.2, runFunction() - If you know what I mean. Is there some kind of way this could be done? My current test code:
<----AUDIO WILL START PLAYING---->
http://jsfiddle.net/jfL4mcnh/
$("<audio id='audioElement'>").appendTo("body");
$("#audioElement").attr("src", "http://mp3ornot.com/songs/1B.mp3").attr("autoplay", "autoplay");
setInterval(function() {
//for some reason, $("#audioElement").currentTime won't work, so we're going old fashion
time = document.getElementById("audioElement").currentTime;
console.log(time);
}, 1000);
Also, I forgot to say this, I cannot do a setTimeout() and hit at the exact moment I want in milliseconds, because the audio can take some extra time to load, while the actual code runs exactly when it has been "seen", if you know what I mean. So no countdown. I need to be exact here.

If you need greater resolution than ontimeupdate provides, you can use a setInterval instead.
Live Demo (sound and alert box only!):
$("<audio id='audioElement'>").appendTo("body");
$("#audioElement").attr("src", "http://mp3ornot.com/songs/1B.mp3").attr("autoplay", "autoplay");
var triggered = false;
var ael = document.getElementById("audioElement");
var interval = setInterval(function(){
console.log(ael.currentTime);
if (!triggered && ael.currentTime >= 5.2) {
triggered = true;
alert("5.2 seconds reached");
}
if (ael.ended) clearInterval(interval);
}, 50);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
JSFiddle Version: http://jsfiddle.net/jfL4mcnh/15/

Well, I have done it myself.. It seems.
http://jsfiddle.net/jfL4mcnh/13/
$("#audioElement").bind("timeupdate", function() {
var currentTime = parseInt(this.currentTime, 10);
if(currentTime == 2) {
console.log("2 seconds in");
$(this).unbind("timeupdate");
}
});
You can bind timeupdate to it, then unbind it (apparently it runs the code 4 times, so I have to unbind it).
EDIT: Nope, it doesn't update fast enough to make it perfect on point. It increments each ~300ms it seems.

See this jsfiddle here
I've added the following line to the JavaScript setInterval() function:
if (time > 5.2) {
myFunction();
}
myFunction() does a console.log, which you'll see in the console.
The reason I used > rather than === is that the time reported is never precise due to fluctuations in processing. A Boolean in the condition would solve this problem:
triggered = false;
if (time > 5.2 && !triggered) {
triggered = true;
myFunction();
}

How can I find when HTML5 audio actually starts playing (onplay event does not seem to work anywhere)

I need to catch the exact moment when HTML5 audio starts producing sound.
It turns out not so simple as it seems.
You might expect audio starts playing when onplay or onplaying event is fired? No way. At least in WebKit family, it seems to be no browser event that fires exactly at this point of time. In Chrome, Safari and Firefox onplay and onplaying events are just faking their behaviour by simply firing together with oncanplay!
I've prepared a simple test to prove that fact. It demonstrates that audio actually starts playing after some reasonable time (over 100ms - 400ms) when all the events had already been fired.
You can notice this by your ears and ears if you look at console log. In the log I output currentTime every 15ms. It seems to reflect the actual audio state correctly, and it starts changing 10-40 polls after any event has been fired. So the audio is still freezed after play is fired.
Test code looks like this:
var audioEl = new Audio('http://www.w3schools.com/tags/horse.ogg');
audioEl.oncanplay = function () {
console.log('oncanplay');
audioEl.currentTime = 1;
console.log('ready state is: ' + audioEl.readyState);
audioEl.play();
}
audioEl.oncanplay = function () {
console.log('oncanplay again');
}
audioEl.onplay = function() {
console.log('onplay -----------------');
}
audioEl.onplaying = function() {
console.log('onplaying ----------------');
}
setInterval(function () {
console.log(audioEl.currentTime);
}, 15);
JsFiddle
I critically need to know the exact moment when the audio starts playing for precise synchronisation with visual animations.
Of course, I can find this moment roughly using quick polling. This is very bad for performance in real-time app, especially on mobile.
I'm asking if anyone knows any better solution for this. HTML audio implementation looks to be still so poor in 2014 :(

As #justin says, you can listen for the playing event to get the (more or less) precise moment the media starts actually playing. But yeah I've been seeing some spotty support for media events and readyState in general, even in latest Chrome.
Whether those events work or not, I advise against using setInterval for animation (or just about anything else, for that matter). Instead, use requestAnimationFrame, which will fire more often and should synchronize with the browser and video card's repaint. And you can poll for the currentTime value on every frame to calculate where you should be in your animation. Performance shouldn't be a problem; your case is exactly what requestAnimationFrame was designed for.
function update() {
var currentTime = audioEl.currentTime;
// update your animation here
requestAnimationFrame(update);
}
update();
While you're at it, don't set currentTime to 5 until after readyState > 0 or the loadedmetadata event fires. If you try to set currentTime before the browser has loaded enough of the video file to know the duration, it will throw an error. But you can call play() whenever you want; it doesn't have to wait for canplay.

Try the canplaythrough instead. Might help and would be better to be sure your audio can be palyed all the way to the end anyway..
audioEl.oncanplay = function () {
console.log('ready state is: ' + audioEl.readyState);
audioEl.play();
}

Tell whether video is loaded or not in Javascript

So, I've been using a listener on
document.getElementById("video").buffered.length
to see if it's greater than 0 for when a video's loaded or not. This works for a very small video, and only in Google Chrome. It doesn't work in Firefox at all. Any ideas for how to get this to work?
I essentially want to wait till 3 seperate videos are loaded to take a specific action, how do I go about this?

Try this:
var video = document.getElementById("video-id-name");
if ( video.readyState === 4 ) {
// it's loaded
}
Read here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState

UPDATE:
As others have mentioned, my original solution below does work but it can lead to performance issues and some unpredictability in its behaviour.
Therefore I recommend listening to the loadeddata event.
Read more here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event
const videoElement = document.getElementById("my_video");
videoElement.addEventListener('loadeddata', (e) => {
//Video should now be loaded but we can add a second check
if(videoElement.readyState >= 3){
//your code goes here
}
});
==================================
INFERIOR SOLUTION:
I find using setInterval works for actively listening to when the readyState of the video changes by checking every half-second until it loads in.
checkforVideo();
function checkforVideo() {
//Every 500ms, check if the video element has loaded
var b = setInterval(()=>{
if(VideoElement.readyState >= 3){
//This block of code is triggered when the video is loaded
//your code goes here
//stop checking every half second
clearInterval(b);
}
},500);
}
If you're not using ES6 just replace () => with function()

To make this into a listener, under normal circumstances, you'll want to listen to the suspend event. It's triggered when download is paused or stopped for any reason, including it's finished.
You'll also want to listen to playing for the cases when the content is already loaded (like, from cache)
video.addEventListener("playing", function() {
console.log("[Playing] loading of video");
if ( video.readyState == 4 ) {
console.log("[Finished] loading of video");
}
});
video.addEventListener("suspend", function(e) {
console.log("[Suspended] loading of video");
if ( video.readyState == 4 ) {
console.log("[Finished] loading of video");
}
});
Source: https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events

Use onloadeddata event on the video element. It checks whether the video is loaded or not. See this reference for more information.
The loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame.
var video = document.getElementById("video");
video.onloadeddata = function() {
// video is loaded
}

I find other way
const video = document.querySelector('video');
video.addEventListener('canplaythrough', (event) => {
console.log('I think I can play through the entire ' +
'video without ever having to stop to buffer.');
});
source - https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event

GMail getElementById('canvas_frame') returning null in Firefox

I have written the following javascript function which hangs up because it never seems to be able to find the canvas_frame element on a loaded GMail page (the compose page). This is begin called via the XUL of a Firefox add-on. Any thoughts on what might be going on?
init : function () {
var frame, interval;
frame = document.getElementById('canvas_frame');
interval = setInterval(function() {
if (frame) {
if (frame.contentDocument) {
clearInterval(interval);
GLOBALS.doc = frame.contentDocument;
onContentReady();
}
}
}, 500);
}

You should prefer to wait for a load event on the frame, rather than polling. But my guess is that the canvas_frame element hasn't been created yet, so you need to fetch it each time inside the polling loop. Otherwise the frame variable is always null.