HTML5 audio player with sub-menus

问题

I have the following script to play audio files sequence from the selection in menu 1 to the selection in menu 2. It looks like this (a list of Numbers, another for Letters):

What I need to do is add two other selection menus, before the action of playing the files, so the selection could be from any menu (even the same one), or other menus (to look like this):

So the menu beside the first Select I can choose numbers or letters, and when choosing one them the sub-categories menu beside it changes to show either the selection from 0-5 (if selected numbers), or from A-C (if the letters is selected).

An the same should work for the second two connected menus (they are the same as above).

I have both scripts, but I can't figure out how to merge them to reflect what is needed. Here the two scripts in Jsfiddle, along with a copy of the main from/to script here:

1- play (from/to): https://jsfiddle.net/d5g8w4cn/2/

2- the connected menus: http://jsfiddle.net/2pza5/

HTML:

<label for="from">From:</label>
<select id="from">
  <option value="">- Numbers -</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="">- Letters -</option>
  <option value="6">A</option>
  <option value="7">B</option>
  <option value="8">C</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/A.mp3",
    "http://marvelhotelbangkok.com/audio/B.mp3",
    "http://marvelhotelbangkok.com/audio/C.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);
    console.log(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 src = $("#mp3_src").attr("src", audioUrls[from]);    
    var currentIdx = audio.data("currentidx") || 1;
    currentIdx++;
    console.log(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://stackoverflow.com/questions/54509663/html5-audio-player-with-sub-menus

标签

javascript

drop-down-menu

html5-audio

playlist

audio-player