html5 音频播放器：播放 from/to 首曲目

Question

我制作了一个播放下拉列表中文件的音频播放器，但是我需要让它播放从一个列表中选择的文件并继续播放直到它到达另一个列表中的另一个选定文件（例如用户点击First List2，Second List7，播放器依次播放文件 2、3、4、5、6、7）。

除了主列表之外，我还添加了另一个列表，但我不确定如何让它播放文件 from/to 选择。这是当前使用的需要编辑的代码：https://jsfiddle.net/m1Lpg570/

HTML:

<label for="selection">From:</label>
<select id="selection">
  <option value="">- First List -</option>
  <option value="http://marvelhotelbangkok.com/audio/1.mp3">1</option>
  <option value="http://marvelhotelbangkok.com/audio/2.mp3">2</option>
  <option value="http://marvelhotelbangkok.com/audio/3.mp3">3</option>
  <option value="http://marvelhotelbangkok.com/audio/4.mp3">4</option>
  <option value="http://marvelhotelbangkok.com/audio/5.mp3">5</option>
</select>

<label for="selection">&nbsp;&nbsp;&nbsp;&nbsp;To:</label>
<select id="selection">
  <option value="">- Second List -</option>
  <option value="http://marvelhotelbangkok.com/audio/6.mp3">6</option>
  <option value="http://marvelhotelbangkok.com/audio/7.mp3">7</option>
  <option value="http://marvelhotelbangkok.com/audio/8.mp3">8</option>
</select>

<br/><br/>

<audio id="player" controls="controls">
  <source id="mp3_src" src="http://marvelhotelbangkok.com/audio/0.mp3" type="audio/mp3" />
</audio>

JS:

$(document).ready(function() {

  $('#selection').on('change', function() {
    change($(this).val());
  });

});


function change(sourceUrl) {
  var audio = document.getElementById("player");
  var source = document.getElementById("mp3_src");

  audio.pause();

  if (sourceUrl) {
    source.src = sourceUrl;
    audio.load();
    audio.play();
  }
}

Answer 1

这是你想要的吗？

HTML 文件:

<label for="from">From:</label>
<select id="from">
  <option value="">- First List -</option>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<label for="to">&nbsp;&nbsp;&nbsp;&nbsp;To:</label>
<select id="to">
  <option value="">- Second List -</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
</select>

<br/><br/>

<audio id="player" controls="controls">
  <source id="mp3_src" src="http://marvelhotelbangkok.com/audio/0.mp3" type="audio/mp3" />
</audio>

JS文件

$(document).ready(function() {

    var audioUrls = [
    "http://marvelhotelbangkok.com/audio/0.mp3",
    "http://marvelhotelbangkok.com/audio/1.mp3",
    "http://marvelhotelbangkok.com/audio/2.mp3",
    "http://marvelhotelbangkok.com/audio/3.mp3",
    "http://marvelhotelbangkok.com/audio/4.mp3",
    "http://marvelhotelbangkok.com/audio/5.mp3",
    "http://marvelhotelbangkok.com/audio/6.mp3",
    "http://marvelhotelbangkok.com/audio/7.mp3",
    "http://marvelhotelbangkok.com/audio/8.mp3",
  ]

  $('select').on('change', function() {
    var from = $("#from").val();
    var to = $("#to").val();
    if (!from || !to) return;
    var audio = $("#player");
    audio[0].pause();
    $("#mp3_src").attr("src", audioUrls[from]);    
    audio.data("currentidx", from);
    audio[0].load();
    audio[0].play();
  });

  $("#player").on("ended", function() {
    var from = $("#from").val();
    var to = $("#to").val();
    if (!from || !to) return;
    var audio = $("#player");   
    var currentIdx = audio.data("currentidx") || 1;
    currentIdx++;
    var to = $("#to").val() || 8;
    if(currentIdx <= to){
        $("#mp3_src").attr("src", audioUrls[currentIdx]);
        audio.data("currentidx", currentIdx)
        audio[0].load();
        audio[0].play();
    }
  })

});

url

https://jsfiddle.net/0cpjw7rk/12/

html5 音频播放器：播放 from/to 首曲目

html5 audio player: play from/to tracks

javascript

playlist

html5-audio