HTML5 audio player with sub-menus |
HTML5 audio player with sub-menus |
wise_mike |
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):
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: 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(); } }) }); |
Lo-Fi Version | Time is now: 25th April 2024 - 10:36 PM |