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

大佬教程收集整理的这篇文章主要介绍了用于播放列表的复杂 HTML5 音频播放器，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决用于播放列表的复杂 HTML5 音频播放器？

开发过程中遇到用于播放列表的复杂 HTML5 音频播放器的问题如何解决？下面主要结合日常开发的经验，给出你关于用于播放列表的复杂 HTML5 音频播放器的解决方法建议，希望对你解决用于播放列表的复杂 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 (将#修改为@）

大佬总结

以上是大佬教程为你收集整理的用于播放列表的复杂 HTML5 音频播放器全部内容，希望文章能够帮你解决用于播放列表的复杂 HTML5 音频播放器所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。