用于播放列表的复杂 HTML5 音频播放器

问题描述

我需要扩展我的音频播放器，以播放从列表 A 到列表 B 的文件。目前它仅从列表 A 中打开。

列表是相互关联的，比如圣经书，然后是章节，所以最后的想法是从创世记 1 到露丝 12。这是我到目前为止所达到的，但我不知道如何制作第二个列表，以便从/向该列表播放。

• jsfillde 目前：https://jsfiddle.net/d5g8w4cn/2/

输出应该是这样的：

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="https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/0.mp3" type="audio/mp3" />
</audio>

JS：

$(document).ready(function() {

    var audioUrls = [
    "https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/0.mp3","https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/1.mp3","https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/2.mp3","https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/3.mp3","https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/4.mp3","https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/5.mp3","https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/6.mp3","https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/7.mp3","https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/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);
    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();
    }
  })

});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）