CODEWITHSUNDEEP
htmlhtml5-audio
Alex
Alex

Reputation: 540

HTML 5 Audio Tag Multiple Files

I am trying to have two files in one HTML 5 Audio Tag that play one after the other. The code I have so far is:

<audio id="ListenLive" controls autoplay>
<source src="advert.mp3" type="audio/mpeg">
<source src="stream.mp3" type="audio/mpeg">

</audio>

The issue I am having at the moment is that only the first file will play and end, it is like there is no second file. As soon as the first song ends it does nothing else.

Is there a way to get the second track to play automatically when the first one ends? I need it to be in HTML as it is for a mobile site so some code may not work on some devices

Upvotes: 19

Views: 94401

Answers (5)

Code.Town
Code.Town

Reputation: 1226

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.

Upvotes: 21

iam_anirban
iam_anirban

Reputation: 156


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<div>
    <h2>Set up multiple media resources for audios:</h2>
        <audio controls id="listenLive1">
            <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3" type="audio/mpeg">
        </audio>
          <br><br>
        <audio controls id="listenLive2">
            <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-15.mp3" type="audio/mpeg">
        </audio>
  </div>
</body>
</html>

By adding more "<audio>" tags you can add more audio players in the browser using HTML5...

Upvotes: 1

Camille
Camille

Reputation: 2541

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>

Upvotes: 2

Thirumalai murugan
Thirumalai murugan

Reputation: 5914

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>

Upvotes: 3

Kimtho6
Kimtho6

Reputation: 6184

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");

Upvotes: 21

Related Questions