Javascript HTML5 <audio> multiple source

Question

I am trying to insert the same song into 2 different sources on my audio player using javascripts 'getElementByID'.

HTML:

<audio id="audio">
   <source id="ogg" src="song1.ogg" type="audio/ogg">
   <source id="mp3" src="song2.mp3" type="audio/mp3">
   Your browser does not support the audio tag.
</audio>

JavaScript:

function songOne(){ 
    document.getElementById('ogg').src="../audio/pt/lllg/Panda's Thumb.ogg";
    document.getElementById('mp3').src="../audio/pt/lllg/Panda's Thumb.mp3";
    document.getElementById('songName').innerHTML="Panda's Thumb";
    audio.play();
}

As you can see, when the function runs, it places the .ogg file into the id="ogg" and the .mp3 into the id=".mp3". Though, when I inspect the element the source has changed but the song will not play.

I can get it to work with only one source:

<audio id="audio" src=""></audio>

But then it will only play on browsers that support mp3 or ogg and the others miss out. What am i doing wrong?

according to w3schools.com/html/html5_audio.asp your mp3 should have type="audio/mpeg" — xception
Thanks for the fix, I have changed this but it hasn't fixed it. — user1719526

chanjarster chanjarster · Accepted Answer · 2012-10-07T12:11:11

I don't know much about HTML5 Audio, but try this:

After you change the src attr, issue a audio.load(); command

Check this article: http://html5doctor.com/native-audio-in-the-browser/

Javascript HTML5 <audio> multiple source

1 Answers