HTML 5 Audio Tag Multiple Files

Adding multiple sources to tag doesn't work this way. You can use it to providing the source in multiple formats.(some browsers don't support mp3 - i.e. Firefox doesn't support mp3 and you should provide ogg file)

Sample:

<audio>
   <source src="" id="oggSource" type="audio/ogg" />
   <source src="" id="mp3Source" type="audio/mpeg" />
   Your browser does not support the audio element.
</audio>

Your case is different. You are trying to make a playlist. You can make a playlist by yourself or simply use third party plugins like:

http://www.jplayer.org/latest/demo-02-jPlayerPlaylist/

Using jPlayer would solve the browser compatibility issue too. For instance if you just provide .mp3 format, it will switch to flash version when user is browsing with Firefox.

With some javascript you can do a trick

Here is an sample, another one

jQuery(function($) {
  var supportsAudio = !!document.createElement('audio').canPlayType;
  if(supportsAudio) {
    var index = 0,
    playing = false;
    mediaPath = 'http://jonhall.info/how_to/assets/media/audio/',
    extension = '',
    tracks = [
      {"track":1,"name":"Happy Birthday Variation: In the style of Beethoven","length":"00:55","file":"01_Happy_Birthday_Variation_In_The"},
      {"track":2,"name":"Wedding March Variation 1","length":"00:37","file":"02_Wedding_March_1"},
      {"track":3,"name":"Happy Birthday Variation: In the style of Tango","length":"01:05","file":"03_Happy_Birthday_Variation_In_The"},
      {"track":4,"name":"Wedding March Variation 2","length":"00:40","file":"04_Wedding_March_2"},
      {"track":5,"name":"Random Classical","length":"00:59","file":"05_AFI_com"}
    ],
    trackCount = tracks.length,
    npAction = $('#npAction'),
    npTitle = $('#npTitle'),
    audio = $('#audio1').bind('play', function() {
      playing = true;
      npAction.text('Now Playing:');
    }).bind('pause', function() {
      playing = false;
      npAction.text('Paused:');
    }).bind('ended', function() {
      npAction.text('Paused:');
      if((index + 1) < trackCount) {
        index++;
        loadTrack(index);
        audio.play();
      } else {
        audio.pause();
        index = 0;
        loadTrack(index);
      }
    }).get(0),
    btnPrev = $('#btnPrev').click(function() {
      if((index - 1) > -1) {
        index--;
        loadTrack(index);
        if(playing) {
          audio.play();
        }
      } else {
        audio.pause();
        index = 0;
        loadTrack(index);
      }
    }),
    btnNext = $('#btnNext').click(function() {
      if((index + 1) < trackCount) {
        index++;
        loadTrack(index);
        if(playing) {
          audio.play();
        }
      } else {
        audio.pause();
        index = 0;
        loadTrack(index);
      }
    }),
    li = $('#plUL li').click(function() {
      var id = parseInt($(this).index());
      if(id !== index) {
        playTrack(id);
      }
    }),
    loadTrack = function(id) {
      $('.plSel').removeClass('plSel');
      $('#plUL li:eq(' + id + ')').addClass('plSel');
      npTitle.text(tracks[id].name);
      index = id;
      audio.src = mediaPath + tracks[id].file + extension;
    },
    playTrack = function(id) {
      loadTrack(id);
      audio.play();
    };

    extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';

    loadTrack(index);
  }

  $('#useLegend').click(function(e) {
    e.preventDefault();
    $('#use').slideToggle(300, function() {
      $('#useSpanSpan').text(($('#use').css('display') == 'none' ? 'show' : 'hide'));
    });
  });
});

<link href="http://jonhall.info/examples/html5_audio_playlist_example.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="content" role="main">
  <div id="cwrap">
    <div id="nowPlay" class="is-audio">
      <h3 id="npAction">Paused:</h3>
      <div id="npTitle"></div>
    </div>
    <div id="audiowrap">
      <div id="audio0">
        <audio id="audio1" controls="controls">
          Your browser does not support the HTML5 Audio Tag.
        </audio>
      </div>
      <noscript>Your browser does not support JavaScript or JavaScript has been disabled. You will need to enable JavaScript for this page.</noscript>
      <div id="extraControls" class="is-audio">
        <button id="btnPrev" class="ctrlbtn">|&lt;&lt; Prev Track</button> <button id="btnNext" class="ctrlbtn">Next Track &gt;&gt;|</button>
      </div>
    </div>
    <div id="plwrap" class="is-audio">
      <div class="plHead">
        <div class="plHeadNum">#</div>
        <div class="plHeadTitle">Title</div>
        <div class="plHeadLength">Length</div>
      </div>
      <div class="clear"></div>
      <ul id="plUL">
        <li class="plItem">
          <div class="plNum">1</div>
          <div class="plTitle">Happy Birthday Variation: In the style of Beethoven</div>
          <div class="plLength">0:55</div>
        </li>
        <li class="plItem">
          <div class="plNum">2</div>
          <div class="plTitle">Wedding March Variation 1</div>
          <div class="plLength">0:37</div>
        </li>
        <li class="plItem">
          <div class="plNum">3</div>
          <div class="plTitle">Happy Birthday Variation: In the style of Tango</div>
          <div class="plLength">1:05</div>
        </li>
        <li class="plItem">
          <div class="plNum">4</div>
          <div class="plTitle">Wedding March Variation 2</div>
          <div class="plLength">0:40</div>
        </li>
        <li class="plItem">
          <div class="plNum">5</div>
          <div class="plTitle">Random Classical</div>
          <div class="plLength">0:59</div>
        </li>
      </ul>
    </div>
  </div>
</div>

In javascript you can do it like this (this is just to get you started):

audio = new Audio("start url");

  audio.addEventListener('ended',function(){
        audio.src = "new url";
        audio.pause();
        audio.load();
        audio.play();
    });

if you want you can also use the same player(jquery):

var audio = $("#player");

HTML5 audio player, event driven and multiple track.

Thanks to jonhall.info and Thirumalai murugan to provide example.

jQuery(function($) {
  var supportsAudio = !!document.createElement('audio').canPlayType;
  if(supportsAudio) {
    var index = 0,
    playing = false,
    tracks = [
      {"track":1,"name":"SoundHelix Song 1","length":"06:12","file":"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"},
      {"track":2,"name":"SoundHelix Song 3","length":"05:44","file":"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"},
      {"track":3,"name":"SoundHelix Song 8","length":"05:25","file":"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3"}
    ],
    trackCount = tracks.length,
    npAction = $('#npAction'),
    npTitle = $('#npTitle'),
    audio = $('#audio1').bind('play', function() {
      playing = true;
      npAction.text('Now Playing:');
    }).bind('pause', function() {
      playing = false;
      npAction.text('Paused:');
    }).bind('ended', function() {
      npAction.text('Paused:');
      if((index + 1) < trackCount) {
        index++;
        loadTrack(index);
        audio.play();
      } else {
        audio.pause();
        index = 0;
        loadTrack(index);
      }
    }).get(0),
    btnPrev = $('#btnPrev').click(function() {
      if((index - 1) > -1) {
        index--;
        loadTrack(index);
        if(playing) {
          audio.play();
        }
      } else {
        audio.pause();
        index = 0;
        loadTrack(index);
      }
    }),
    btnNext = $('#btnNext').click(function() {
      if((index + 1) < trackCount) {
        index++;
        loadTrack(index);
        if(playing) {
          audio.play();
        }
      } else {
        audio.pause();
        index = 0;
        loadTrack(index);
      }
    }),
    loadTrack = function(id) {
      $('.plSel').removeClass('plSel');
      $('#plTrack>div:eq(' + id + ')').addClass('plSel');
      npTitle.text(tracks[id].name);
      index = id;
      audio.src = tracks[id].file;
    },
    displayTrack = function(){
      var parent = $('#plTrack');
      $.each(tracks, function(i, track) {
        $('<div></div>').addClass('row')
        .append($('<div></div>').addClass('col-sm').text(track.track))
        .append($('<div></div>').addClass('col-sm').text(track.name))
        .append($('<div></div>').addClass('col-sm').text(track.length))
        .appendTo(parent);
      });
    },
    playTrack = function(id) {
      loadTrack(id);
      audio.play();
    };

    displayTrack();
    loadTrack(index);
  }
});

#plTrack .plSel {
  font-weight: bold;
}
.header {
  color: #999;
  border-bottom: 1px solid #999;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div>
  <div>
    <div class="row">
      <div class="col-6"><h3 id="npAction">Paused:</h3></div>
      <div class="col-6" id="npTitle"></div>
    </div>
    <div class="row">
      <div class="col-6">
        <audio id="audio1" controls="controls">
          Your browser does not support the HTML5 Audio Tag.
        </audio>
      </div>
      <noscript>Your browser does not support JavaScript or JavaScript has been disabled. You will need to enable JavaScript for this page.</noscript>
      <div class="col-6">
        <button id="btnPrev" class="ctrlbtn">|&lt;&lt; Prev Track</button> <button id="btnNext" class="ctrlbtn">Next Track &gt;&gt;|</button>
      </div>
    </div>
    <div>
      <div class="row header">
        <div class="col-sm">#</div>
        <div class="col-sm">Title</div>
        <div class="col-sm">Length</div>
      </div>
      <div id="plTrack"></div>
    </div>
  </div>
</div>