16

我试图在一个 HTML 5 音频标签中包含两个文件，这些文件一个接一个地播放。我到目前为止的代码是：

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

</audio>

我目前遇到的问题是只有第一个文件会播放并结束，就像没有第二个文件一样。一旦第一首歌结束，它就什么也不做。

有没有办法让第二首曲目在第一首曲目结束时自动播放？我需要它在 HTML 中，因为它适用于移动网站，因此某些代码可能无法在某些设备上运行

4

5 回答 5

17

将多个来源添加到标签中不起作用。您可以使用它来提供多种格式的源代码。（某些浏览器不支持 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 浏览时，它将切换到 flash 版本。

于 2013-08-16T21:34:41.737 回答
17

在javascript中你可以这样做（这只是为了让你开始）： 

audio = new Audio("start url");

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

如果你愿意，你也可以使用相同的播放器（jquery）：

var audio = $("#player");
于 2013-08-16T13:18:13.923 回答
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>
于 2013-08-16T13:13:16.773 回答
2

HTML5 音频播放器，事件驱动和多轨。

感谢 jonhall.info 和 Thirumalai murugan 提供示例。

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>

于 2017-03-01T10:48:13.780 回答
0 

<!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>

通过添加更多“<audio>”标签，您可以使用 HTML5 在浏览器中添加更多音频播放器...

于 2021-03-09T16:02:17.723 回答