Correct way to play <audio> + <video> from Javascript

Question

I'm getting different results i Firefox and Chrome when using <audio> and <video> with preload="none" and then trying to play from Javascript.

Let's say i was using preload="auto" or preload="metadata" :

audio.src = "filename";
audio.play();

That seems to work fine in both Firefox and Chrome but i want to use preload="none" and then Chrome dossent play.

So i'm trying this code with preload="none" :

audio.src = url;

audio.load();

audio.addEventListener('canplay', function(e) {
   audio.play(); // For some reason this dossent work in Firefox
}, false);

audio.play(); // Added this so Firefox would play

I don't know if that's the correct way to do it.

I'm using : Firefox 20.0.1 Chrome 25.0.1364.172 m

I made a demo : http://netkoder.dk/test/test0217.html

Edit :

In the 2nd audio player (on the demo page) it seems that when using preload="none" you have to use load(). But is it correct to just use play() right after load() or is the correct way to use an event to wait for the file to load before playing it ?

In the 3rd audio player it seems Firefox 20.0.1 dossent support the canplay event correctly when used with addEventListener() because it dossent trigger after load(), it triggers after play() and also triggers when scrubbing though the sound which dossent seem to be the way the canplay should work. Using .oncanplay does work.

So the following code seems to work :

  function afspil2(url) {

     afspiller2.src = url;
     afspiller2.load(); // use load() when <audio> has preload="none"
     afspiller2.play();

  }

  function afspil3(url) {

     afspiller3.src = url;
     afspiller3.load(); // use load() when <audio> has preload="none"

     //afspiller3.addEventListener('canplay', function() { // For some reason this dossent work correctly in Firefox 20.0.1, its triggers after load() and when scrubbing
     //   afspiller3.play();
     //}, false);

     afspiller3.oncanplay = afspiller3.play(); // Works in Firefox 20.0.1

  }

I updated the demo to include the changes : http://netkoder.dk/test/test0217.html

My way of adding addEventListener inside the afspil3() function dossent seem good because the first time the function is called the code inside addEventListener is called 1 time. The second time the function is called the code inside addEventListener is called 2 time and then 3 times and so on.

Answer 1

The correct way in my opinion would mean using an existing solution, like http://mediaelementjs.com/

If your really interested in the details on the best way to play audio and video with js then look at the source: https://github.com/johndyer/mediaelement/tree/master/src/js

https://github.com/johndyer/mediaelement/blob/master/src/js/me-mediaelements.js

Answer 2

It's because your audio tags are missing the required src attribute, or <source> tags. When I added them in your demo, all 3 players immediately began working in both Chrome and FF.

Also, I recently discovered that src cannot be an empty string and subsequently changed with JS. If there's a reason you can't set the src in the HTML, your best alternative, IMO, is to create the audio elements with Javascript:

var audio = new Audio();
audio.src = url;
audio.controls = true;
audio.preload = false;
// and so on

Edit: Ok. It seems that in Chrome, when the HTML is preload="none" it is necessary to call load() before playing when the src is changed. Your second audio doesn't preload, so your function needs to be this:

  function afspil2(url) {
     afspiller2.src = url;
     afspiller2.load(); // add load call
     afspiller2.play();
  }

Then, it seems that in Firefox, it is necessary to set preload="auto"; when attaching an event to the canplay event, like in the 3rd function.

  function afspil3(url) {
     afspiller3.src = url;
     afspiller3.preload = "auto";
     afspiller3.load();
     afspiller3.addEventListener('canplay', function(e) {
        this.play(); // For some reason this dossent work in Firefox
     }, false);
  }

That just seems very strange, but I tested it multiple times, and each time it would play if preload="auto" is called, but would not play if it isn't called. Note that it wasn't necessary for the 2nd player, which was also preload="none" in the HTML tag.

Finally, Chrome has some odd behaviors if there are multiple <audio> elements on the page. For all three players, reloading the page and clicking "the big electron" link would play correctly.

Reloading and then clicking "Yoda" on the 2nd or 3rd player won't do anything, but it WILL play for the first player. But, if the top player is played first by any means - play button or either link - then the other two "Yoda" links will suddenly work.

Also, if you click a 2nd or 3rd "Yoda" link first after reload, and then click the top player, the previously clicked "Yoda" (that didn't previously play) will begin to play on its own after the top player stops.

Suffice it to say they have some bugs to work out.