如何解决用于播放列表的复杂 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"> 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 举报,一经查实,本站将立刻删除。