播放多個音頻，順序播放/設定間隔時間，有插件或者控制元件啥的嗎？
1、多個音頻，順序播放
2、頁面可以設定播放間隔，比如默認為5秒，改設定為8秒
3、程序中，可以“暫停”；點擊后再繼續
4、程序中，可以選串列中的某個；比如正在播放第5個音頻，點擊播放第2個（接著順序播放3、4、5）
請問有什么插件、控制元件、js庫之類的嗎？
或者類似的？
先行謝過～～～
uj5u.com熱心網友回復：
“設定時間間隔”1、JS可以原生實作嗎？暫停5秒再繼續播放。
2、如果JS不能原生實作的話，貌似可以準備一個5秒的靜音音頻，回圈插入正常音頻之中，實作“時間間隔”效果？
uj5u.com熱心網友回復：
chinaz那邊找到一個jquery基本符合條件
能順序播放，能暫停（后繼續播放），有串列
https://sc.chinaz.com/jiaobendemo.aspx?downloadid=232015114504846
現在還欠缺一個功能：正常播放的話，2段音頻間設定時間間隔。
想了一下，如果可以在音頻前插入1個5秒的空白音頻，就相當于間隔了。
（完整功能是分別準備5、6、7、8、9、10……秒的空白音頻，設定不同時間間隔時呼叫對應的空白音頻）
請經驗大神們指點一下，代碼應該怎么寫……？
uj5u.com熱心網友回復：
比較完美的辦法，就是在點擊播放按鈕時，“延遲5秒后再播放”這個“延遲5秒后再播放”怎么實作？
<script>
//音樂資源
var myMusics = new Array(
{src:"Tara&筷子兄弟 小蘋果.mp3",title:"Tara&筷子兄弟 小蘋果"},
{src:"悲愴第三章.mp3",title:"悲愴第三章"},
{src:"Sound of My Dream.mp3",title:"Sound of My Dream"}
);
//陣列下標
var index = 1;
//播放狀態 單曲回圈：0 串列回圈：1 隨機播放：2
var playState = 1;
//創建音樂串列
function createBox(){
var html="";
for(var i=0;i<myMusics.length;i++){
html+="<li>"+(i+1)+" <a href='javascript:clickName("+i+");'>"+myMusics[i].title+"</a></li>"
}
return html
}
//頁面加載
$(document).ready(function(){
$("#"+"box").append(createBox());
playMusic(1);
//按鈕"下一首"單擊事件
$("#nextMusic").click(function(){
playMusic(1,1);
});
//按鈕"上一首"單擊事件
$("#lastMusic").click(function(){
playMusic(2);
});
////按鈕"播放/暫停"單擊事件
$("#playMusic").click(function(){
if($(this).val()=="播放"){
$(this).val("暫停");
document.getElementById("media").play();
}else if($(this).val()=="暫停"){
$(this).val("播放");
document.getElementById("media").pause();
}
});
//播放狀態
$("#playState").change(function(){
playState = $(this).val();
});
$("li").mouseover(function(){
$(this).css("background-color","#F0F0F0");
});
$("li").mouseout(function(){
$(this).css("background-color","#FFFFFF");
$($("li")[index]).css("background-color","#F0F0F0");
});
});
//點擊名字播放音樂
function clickName(i){
index=i;
playMusic(0);
}
//音樂播放
function playMusic(s,n){
$("#playMusic").val("暫停");
if(s==0){//點擊名字播放音樂
}else if(s==1){//下一首
$("#playMusic").val("暫停");
if(playState==0){//單曲回圈
if(n==0){
}else if(n==1){
index++;
if(index>=myMusics.length){
index=0;
}
}
}else if(playState==1){//串列回圈
index++;
if(index>=myMusics.length){
index=0;
}
}else if(playState==2){//隨機播放
index = Math.floor(Math.random()*myMusics.length);
}
}else if(s==2){//上一首
index--;
if(index<0){
index=myMusics.length-1;
}
}
//修改audio資源路徑
$("#media").attr("src",myMusics[index].src);
//音樂播放
$("#media").play;
//顯示音樂名稱
$("#musicTitle").text(myMusics[index].title);
$("title").text(myMusics[index].title);
//重置li串列背景色
$("#box").children("li").css("background-color","#FFFFFF");
$("#box").children("li").css("font-weight","normal");
//修改播放音樂背景色
$($("#box").children("li")[index]).css("background-color","#F0F0F0");
$($("#box").children("li")[index]).css("font-weight","bold");
$("#sliding").offset({left:60});
}
</script>
<audio id="media" src="" autoplay="autoplay" onended="playMusic(1,0)"></audio>
<div style="float:left;margin-left:50px;width:450px;height:200px;">
<p id="musicTitle"></p>
<input id="lastMusic" type="button" value="https://bbs.csdn.net/topics/上一首" />
<input id="playMusic" type="button" value="https://bbs.csdn.net/topics/暫停" />
<input id="nextMusic" type="button" value="https://bbs.csdn.net/topics/下一首" />
<ul id="box" style="border:1px solid black;padding:0px;height:300px;width:300px;overflow-y:auto;"></ul>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/231393.html
標籤：JavaScript
上一篇：CSS3簡易切割輪播圖