Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ HTML5 audio player with sub-menus

Posted by: wise_mike Feb 6 2019, 09:16 PM

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):
IPB Image

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):
IPB Image

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:

CODE
    <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">    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:

CODE
    $(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();
        }
      })
    
    });

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)