Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Firefox loads and plays same .ogv file twice concurrently when with 'autoplay'

I have an ogg vorbis file set up with the HTML5 <audio> tag.
The file is requested twice by Firefox (3.6.13), but with the 'autoplay' option both of the requested files play.
When I pause, one of the tracks stops but other continues. When I press play again then both tracks play, albeit out of sync now.

All works great with webkit and opera.
In Firefox without 'autoplay' the ogg file is requested twice but only one plays and all appears normal. But I need the 'autoplay' functionality in this scenario.

My html:
<audio autoplay controls">
<source src="/media/BetterDays.ogv" type="audio/ogg; codec=vorbis"></source>
<source src="/media/BetterDays.mp3" type="audio/mpeg"></source>
</audio>

My jQuery:

if(!!document.createElement('audio').canPlayType) {
    audio = $('audio').get(0);
    $(audio).removeAttr("controls");
    $(audio).bind('play',function() {
      $("#playtoggle").addClass('playing');   
    }).bind('pause ended', function() {
      $("#playtoggle").removeClass('playing');    
    });   

    $("#playtoggle").click(function() {     
      if (audio.paused) { audio.play(); } 
      else { audio.pause(); }     
    });  

I really appreciate any help one could offer. Thanks.

like image 357
tomek Avatar asked Feb 10 '11 07:02

tomek


1 Answers

do it like this, html 5 tags are still a bit buggy, but GOOD ol' javascript will do the trick

<script>
give your audio tag an id, in my example it will be audiobox

function play() {
    document.getElementById('audiobox').play();
  }
  play();
 </script>
like image 191
Dnaso Avatar answered Sep 28 '22 12:09

Dnaso