Question

66

How can I add multiple sources to an HTML5 audio tag, programmatically?

rated 0 times [ 73] [ 7] / answers: 1 / hits: 28579 / 14 Years ago, fri, october 29, 2010, 12:00:00

A lot of examples demonstrate multiple source tags nested in the audio tag, as a method to overcome codec compatibility across different browsers. Something like this -

<audio controls=controls>

  <source src=song.ogg type=audio/ogg />

  <source src=song.mp3 type=audio/mpeg />

  Your browser does not support the audio element.

</audio>

While with JavaScript, I'm also allowed to create an audio element like this -

var new_audio = document.createElement(audio);

Where I can set its source by the .src property - new_audio.src=....;

I failed to find how to add multiple sources in an audio element through JavaScript, something similar to source tags shown in the HTML snippet.

Do I manipulate the new_audio and add the <source... tags inside it, just like one would manipulate any other DOM element? I'm doing this right now and it works, which is -

new_audio.innerHTML = <source src='audio/song.ogg' type='audio/ogg' />;

new_audio.play();

I wonder if there is a more appropriate way to do it?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

christianu

Add To Favorites

Follow

Total Points: 481

Total Questions: 124

Total Answers: 99

Location: Trinidad and Tobago

Member since Thu, Dec 1, 2022

2 Years ago

answered 14 Years ago analiseb · Accepted Answer

Why add multiple files with JavaScript when you can just detect the types supported? I would suggest instead detecting the best type then just setting the src.

var source= document.createElement('source');

if (audio.canPlayType('audio/mpeg;')) {

    source.type= 'audio/mpeg';

    source.src= 'audio/song.mp3';

} else {

    source.type= 'audio/ogg';

    source.src= 'audio/song.ogg';

}

audio.appendChild(source);

Add as many checks as you have file types.