HTML5的音频播放器：自/至曲目播放

Question

我提出，从下拉列表中播放文件的音频播放器，但我需要发挥它从一个列表中选择文件，并继续播放，直至到达在其他列表中的其他选定的文件（例如，用户点击2从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/