HTML 5 Audio Tag Несколько файлов

Я пытаюсь иметь два файла в одном теге HTML 5, который воспроизводится один за другим. Код, который у меня есть до сих пор:

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

</audio>

Проблема, с которой я сталкиваюсь в данный момент, состоит в том, что только первый файл будет воспроизводиться и заканчиваться, это похоже на отсутствие второго файла. Как только первая песня заканчивается, она ничего не делает.

Есть ли способ, чтобы второй трек автоматически воспроизводился, когда заканчивается первый? Мне нужно, чтобы он был в HTML, как и для мобильного сайта, поэтому какой-то код может не работать на некоторых устройствах

ОТВЕТЫ

Ответ 1

В javascript вы можете сделать это так (это только для начала):

audio = new Audio("start url");

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

если вы хотите, вы также можете использовать одного и того же игрока (jquery):

var audio = $("#player");

Ответ 2

Добавление нескольких тегов в тег не работает. Вы можете использовать его для предоставления источника в нескольких форматах (некоторые браузеры не поддерживают mp3 - то есть Firefox не поддерживает mp3, и вы должны предоставить файл ogg)

Пример:

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

Ваш случай отличается. Вы пытаетесь создать плейлист. Вы можете создать плейлист самостоятельно:

http://www.lastrose.com/html5-audio-video-playlist/

http://jonhall.info/how_to/create_a_playlist_for_html5_audio

ИЛИ просто используйте сторонние плагины, например:

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

Использование jPlayer также решит проблему совместимости с браузером. Например, если вы просто предоставляете формат .mp3, он переключится на флэш-версию, когда пользователь будет просматривать Firefox.

Ответ 3

С помощью некоторого javascript вы можете сделать трюк

Вот образец, другой один

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>

Ответ 4

Код получает от здесь. Благодаря jonhall.info и Thirumalai murugan, чтобы предоставить ссылку.

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="#" onclick="location.href='http://jonhall.info/examples/html5_audio_playlist_example.css'; return false;" 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>