HTML 5 音频标签多个文件

Posted 2023-02-25

【中文标题】HTML 5 音频标签多个文件

【英文标题】：HTML 5 Audio Tag Multiple Files

【发布时间】：2013-08-16 13:07:02

【问题描述】：

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

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

</audio>

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

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

【问题讨论】：

我认为你必须通过一些 javascript 来控制它

【参考方案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");

【讨论】：

这似乎适用于“常规”Chrome，但 android Chrome 不会播放第二个，可能是因为整个 mediaPlaybackRequiresUserGesture 的事情。有什么办法吗？

我假设如果我制作了一个“音频”数组，我可以将新剪辑添加到该数组中，然后使用监听器拉出并播放数组中的下一个？

【参考方案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 浏览时，它会切换到flash 版本。

【讨论】：

注意：自从写了这个答案，firefox 现在支持 mp3

【参考方案3】：

使用一些javascript你可以做一个技巧

这是一个sample，另一个是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>

【讨论】：

只是一个友好的建议：用代码而不是链接回答更有可能得到你的回答。

@StubbornShowaGuy 感谢您的建议，我已添加代码

【参考方案4】：

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>

【参考方案5】：

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

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