html5 音频播放器：从/到曲目播放

Question

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

我在主列表之外添加了另一个列表，但我不确定如何让它从/到选择播放文件。这是当前使用的需要编辑的代码：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();
    }
  })

});

网址

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