jsaudio循環播放_js/jquery點擊按鈕循環播放聲音

A. jquery怎麼設置audio的loop

這個東西最好用原生js效果更好，速度更快，給你個全點的例子

<script>
varaudio;
window.onload=function(){
initAudio();
}
varinitAudio=function(){
//audio=document.createElement("audio")
//audio.src='NeverSayGoodBye.ogg'
audio=document.getElementById('audio');
//audio.loop="loop";//這里就可以直接設置loop了
}
functiongetCurrentTime(id){
alert(parseInt(audio.currentTime)+'：秒');
}

functionplayOrPaused(id,obj){
if(audio.paused){
audio.play();
obj.innerHTML='暫停';
return;
}
audio.pause();
obj.innerHTML='播放';
}

functionhideOrShowControls(id,obj){
if(audio.controls){
audio.removeAttribute('controls');
obj.innerHTML='顯示控制框'
return;
}
audio.controls='controls';
obj.innerHTML='隱藏控制框'
return;
}
functionvol(id,type,obj){
if(type=='up'){
varvolume=audio.volume+0.1;
if(volume>=1){
volume=1;

}
audio.volume=volume;
}elseif(type=='down'){
varvolume=audio.volume-0.1;
if(volume<=0){
volume=0;
}
audio.volume=volume;
}
document.getElementById('nowVol').innerHTML=returnFloat1(audio.volume);
}
functionmuted(id,obj){
if(audio.muted){
audio.muted=false;
obj.innerHTML='開啟靜音';
}else{
audio.muted=true;
obj.innerHTML='關閉靜音';
}
}
//保留一位小數點

functionreturnFloat1(value){
value=Math.round(parseFloat(value)*10)/10;
if(value.toString().indexOf(".")<0){
value=value.toString()+".0";
}
returnvalue;
}
</script>

<ahref="javascript:void(0);"onclick="getCurrentTime('firefox');">獲取播放時間</a>
<ahref="javascript:void(0);"onclick="playOrPaused('firefox',this);">播放</a>
<ahref="javascript:void(0);"onclick="hideOrShowControls('firefox',this);">隱藏控制框</a>
<ahref="javascript:void(0);"onclick="muted('firefox',this);">開啟靜音</a>
<inputtype="button"value="+"id="upVol"onclick="vol('firefox','up',this)"/>音量<inputtype="button"value="-"onclick="vol('firefox','down',this)"/>
<audiosrc="/images/audio/NeverSayGoodBye.ogg"id="audio"controls="controls"></audio>

當前音量：<spanid="nowVol">-</span>

B. 如何用js控制audio元素連續播放mp3文件

1、首先我們先來看一下音頻元素最基本的應用以及樣式，如下圖所示，運用audio元素即可,controls是用來控制是否顯示控制條。

C. html5多次用js播放audio之後就沒有聲音了. 重新刷新之後又好了

推薦你採用控制

既然看到送你一個demo吧，自行研究，應該都很詳細了

<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1user-scalable=0"/>
<linkrel="shortcuticon"href="img/logo.png">
<title>html5audio音頻播放</title>
<style>
*{margin:0;padding:0;}
body{-webkit-tap-highlight-color:rgba(0,0,0,0);font-family:"微軟雅黑"}
h1{width:100%;font-size:1.5em;text-align:center;line-height:3em;color:#47c9af;}
#audio{width:100%;}
#control{width:150px;height:150px;line-height:150px;text-align:center;border-radius:200px;border:none;color:#fff;margin-top:-75px;margin-left:-75px;left:50%;top:50%;position:absolute;box-shadow:#888008px;}
.color_gray{background:#e4e4e4}
.hide{display:none;}
.show{display:block;}
.play{background:#f06060;}
.pause{background:skyblue}
/*進度條樣式*/
.progressBar{width:100%;height:10px;margin:30pxauto30pxauto;position:absolute;left:0;bottom:35px;}
.progressBardiv{position:absolute;}
.progressBar.progressBac{width:100%;height:10px;left:0;top:0;background:#e4e4e4;}
.progressBar.speed{width:100%;height:10px;left:-100%;background:#f06060;}
.progressBar.drag{width:30px;height:30px;left:0;top:-10px;background:skyblue;opacity:0.8;border-radius:50px;box-shadow:#fff005px;}
/*時間樣式*/
#time{width:100%;height:20px;position:absolute;left:0;bottom:30px;color:#888;}
.tiemDetail{position:absolute;right:10px;top:0;}
#songInfo{overflow:hidden;width:200px;height:50px;line-height:50px;text-align:center;color:#34495e;margin-top:-25px;margin-left:-100px;left:50%;top:70%;position:absolute;}
.shareImg{position:absolute;left:100000px;}
</style>
</head>

<body>
<script>
$(function(){
getSong();
})

//獲取歌曲鏈接並插入dom中
functiongetSong(){
varaudio=document.getElementById("audio");
audio.src="

audio.loop=true;//歌曲循環
playCotrol();//播放控制函數

}

//點擊播放/暫停
functionclicks(){
varaudio=document.getElementById("audio");
$("#control").click(function(){
if($("#control").hasClass("play")){
$("#control").addClass("pause").removeClass("play");
audio.play();//開始播放
dragMove();//並且滾動條開始滑動
$("#control").html("暫停播放");
}else{
$("#control").addClass("play").removeClass("pause");
$("#control").html("點擊播放");
audio.pause();
}
})
}

//播放時間
functiontimeChange(time,timePlace){
vartimePlace=document.getElementById(timePlace);
//分鍾
varminute=time/60;
varminutes=parseInt(minute);
if(minutes<10){
minutes="0"+minutes;
}
//秒
varsecond=time%60;
seconds=parseInt(second);
if(seconds<10){
seconds="0"+seconds;
}
varallTime=""+minutes+""+":"+""+seconds+""
timePlace.innerHTML=allTime;
}

//播放事件監聽

D. js/jquery點擊按鈕循環播放聲音

E. js中怎麼讓音頻重復播放

然後這個是主要的js方法：

function Orderprocessing1(){
var vid = document.getElementById("myVideo");//獲取音頻對象
var start = 0;//定義循環的變數
var times=3;//定於循環的次數
vid.addEventListener("ended",function() {
vid.play();//啟動音頻，也就是播放內
start++;//循環
start == times && vid.pause();//也就是當循環的變數等於次數的時候，就會終止循環並且關掉音頻
});
vid.play();//啟動音頻，用於第一次啟動
}

如果你想調用這個方法可以寫一個click事件，或者寫個js方法調用：

$(function(){
setInterval("Orderprocessing1()",60000);//每隔1分鍾自動調用一次啟動音頻的方容法
});

本人也是菜鳥一個，寫這些只為整理下來以後自己看

F. html js audio，一首歌播完自動下一首歌，要怎麼做

HTML5中的audio對象有個屬性為 ended，改屬性是返迴音頻是否播放結束，是boolean類型的。

例如我自己寫的一個判斷：
this.audioPlay=function(soundPath,callback){
$("#shapeAudio").attr("src",soundPath);
var shapeAudio=document.getElementById("shapeAudio");
shapeAudio.play();

/*判斷聲音是否播放完成，播放完成之後執行回調函數*/
if(callback != undefined){
var is_playFinish = setInterval(function(){
if(shapeAudio.ended){
callback();
window.clearInterval(is_playFinish);
}
}, 10);
}
}

改判斷為當聲音播放完成之後再執行回調函數callback

G. HTML5 <audio>標簽如何設置連續播放

<audiocontrols="controls"loop="loop">
<sourcesrc="song.ogg"type="audio/ogg"/>
<sourcesrc="song.mp3"type="audio/mpeg"/>
.
</audio>

loop 屬性規定當音頻結束後將重新開始播放。如果設置該屬性，則音頻將循環播放。

語法：<audio loop="loop" />

導航:首頁 > 編程語言 > jsaudio循環播放

jsaudio循環播放

與jsaudio循環播放相關的資料

友情鏈接