The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML5 audio player with sub-menus
wise_mike
post Feb 6 2019, 09:16 PM
Post #1





Group: Members
Posts: 1
Joined: 6-February 19
Member No.: 26,816



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();
        }
      })
    
    });
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 6th December 2019 - 07:59 AM