Аудио плеер 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();
    }
  })

});

url

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