Home / Questions / 2287
Accepted
Ruslan López
Asked: 2020-01-09 19:14:18 +0800 CST 2020-01-09 19:14:18 +0800 CST

How do I add multiple sources to an audio element with Javascript?

  • 772

Having the following example to add a file AudioTest_(1).mp3to an audio element , I want to additionally add the file in case there is no codec to play the first one.AudioTest_(1).ogg

var audioel = document.getElementById('audioElem');
if (audioel !== null) {
  audioel.setAttribute('src', 'http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).mp3');
}
<audio id="audioElem" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>

Normally you would have multiple items sourceand the browser would automatically pick the first one that has the codecs to play it for, but I don't know if it's possible to do this using Javascript Only or if there is some other way to load the file than if it can be played from a list provided in execution time.

PS: Preferably not to use jQuery.

Thanks in advance.

javascript

3 Answers

  1. Best Answer

    Here are a couple of options made with JavaScript that change depending on who is in charge of the logic to decide which font to use:

    Delegating the choice to the browser

    As Leandro indicates in his answer, a quick option would be to add all the fonts inside the tag audioand let the browser take care of selecting the first one that works for it.

    So, if for example you have a list with the different audio sources you could do something like this:

    var sources = [
  {
    src: "http://www.w3schools.com/html/horse.ogg",
    type: "audio/ogg",
  },
  {
    src: "http://www.w3schools.com/html/horse.mp3",
    type: "audio/mp3",
  }
];

var miAudio = document.getElementById("miAudio");

for (var x = 0; x < sources.length; x++) {
  var src = document.createElement("source");
  src.src = sources[x].src;
  src.type = sources[x].type;
  miAudio.appendChild(src);
}
    <audio id="miAudio" controls></audio>

    Advantages of this method:

    • It's simple and fast.

    Disadvantages of this method:

    • You don't know which of the sources is being listened to.

    Logic in the code

    Another option would be to keep you in control of the code to know which of the fonts is actually being used. In this case, and assuming a list of sources with the previous example, the solution would be like this:

    1. Select the first source in the list
    2. Add the font assrc
    3. If there was an error loading the font:
      • Try the next source.
      • Go back to step 2.

    Then all you have to do is add a handler for the event errorthat takes care of selecting the next source in the list and replacing the current one.

    An example of this code would be:

    var sources = [
  {
    src: "http://www.w3schools.com/html/horse.ogg",
    type: "audio/ogg",
  },
  {
    src: "http://www.w3schools.com/html/horse.mp3",
    type: "audio/mp3",
  }
];
var actual = 0;

var miAudio = document.getElementById("miAudio");
miAudio.addEventListener('error', function(e) {
  console.log(sources[actual].src + " falló. Probando la siguiente fuente");
  actual++;
  miAudio.src = sources[actual].src;
});

miAudio.src = sources[actual].src;
    <audio id="miAudio" controls></audio>

    Advantages of this method:

    • Control over the source that is being listened to.

    Disadvantages of this method:

    • It's a bit more complex.
    • 4

  2. I imagine that instead of assigning the src as an attribute you should assign it as a new element "source"

    var audioel = document.getElementById('audioElem');
var source= document.createElement('source');
source.type= 'audio/mp3';
source.src= 'audio/archivo.mp3';
audioel.appendChild(source);

    Cheers

    • 0

  3. Check out this fiddle to see how to switch video (and preload them if you want). It works the same for an HTML5 audio element.

    • 0