js控制audio

㈠ 怎樣用javaScript代碼來控制audio的上一曲、下一曲、播放/暫停以及時間進度條

js audio對象可以實現

㈡ html js 如何控制音樂打開和關閉

實現控制網站背景音樂的播放暫停在html5中是非常容易和簡單的，僅僅幾行代碼即可實現。
首先在網頁中嵌入背景音樂，html5代碼為：

<a class="mscBtn" id="audioBtn" style="cursor:pointer;"></a>
<audio id="bgMusic" src="http://cctv3.qiniudn.com/zuixingfuderen.mp3" autoplay="autoplay" loop="loop"></audio>

通過audio的id即可控制音樂的播放（play()）和暫停（pause()），同時通過改變class改變按鈕的背景圖片，js代碼為（前提是要引入jq）：

var music = document.getElementById("bgMusic");
$("#audioBtn").click(function(){
if(music.paused){music.play();
$("#audioBtn").removeClass("pause").addClass("play");
}else{music.pause();
$("#audioBtn").removeClass("play").addClass("pause");}});

css樣式為：

.pause {background-position: 0 bottom;}
.mscBtn {height: 50px;
background: #fff url(http://cctv2.qiniudn.com/musicBtn.gif) no-repeat;
display: block;}

㈢ h5 audio代碼怎麼控制音量

<audio>標簽可以在HTML5瀏覽器中播放音頻文件。
<audio>默認提供一個控制面板，但是有些時候我們只需要播放聲音，控制面板由我們自己來定義其顯示的狀態。
這里我們可以使用JS來進行控制，代碼如下：
var audio ;
window.onload = function(){
initAudio();
}
var initAudio = function(){
//audio = document.createElement("audio")
//audio.src='Never Say Good Bye.ogg'
audio = document.getElementById('audio');
}
function getCurrentTime(id){
alert(parseInt(audio.currentTime) + '：秒');
}

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

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

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

function returnFloat1(value) {
value = Math.round(parseFloat(value) * 10) / 10;
if (value.toString().indexOf(".") < 0){
value = value.toString() + ".0";
}
return value;
}

調用方式如下：
<a href="javascript:void(0);" onclick="getCurrentTime('firefox');">獲取播放時間</a>
<a href="javascript:void(0);" onclick="playOrPaused('firefox',this);">播放</a>
<a href="javascript:void(0);" onclick="hideOrShowControls('firefox',this);">隱藏控制框</a>
<a href="javascript:void(0);" onclick="muted('firefox',this);">開啟靜音</a>
<input type="button" value="+" id="upVol" onclick="vol('firefox' , 'up' , this )"/>音量<input type="button" value="-" onclick="vol('firefox' , 'down' ,this )"/>
<audio src="/images/audio/Never Say Good Bye.ogg" id="audio" controls="controls" ></audio>

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

㈣ js調用new Audio在Safari瀏覽器中出現undefined

html5 audio標簽在ios safari瀏覽器中，js是無法控制播放的。因為ios safari瀏覽器內置的把.play() .load()都給禁用了。官方的說法是為了用戶著想，必須當用戶手動的去出發播放控制項的時候，拿到action，才可以播放。為什麼，我會遇到這個問題呢？因為頁面是用html5寫的，要嵌入到ios裡面。開始在安卓上面測試的時候，一點問題沒有，一到蘋果上面，直接掛了。查找原因發現ios使用的webview默認用safari瀏覽器渲染，為了整這個問題，查了很多資料，連蘋果官方的文檔都看了。下面看代碼:
<div class="voice"> <audio><source src="地址" type="audio/aac" /> </audio></div> <script>$(document).on('click','.voice', function() { $(this).find('audio').get(0).play();}</script>

當我們運行上面的代碼的時候，你會發現safari瀏覽器直接的報錯。意思就是.play()方法不存在。
TypeError: 'undefined' is not a function (evaluating '$(this).find('audio').get(0).play()')
之前的解決方案：
解決方式，只能ios那邊抓我的音頻路徑，自行的去播放了。如果有更好的方法，麻煩請告訴我，留言或郵件都可以。

㈤ 點擊一個按鈕播放音樂，應用於 HTML，可以用JS插件

functiona(){
varaudio=document.getElementById('music');
if(audio.paused){
audio.play();//audio.play();//播放
}
else{
audio();
}
}
<!--上面是加入專js部分的屬-->
<audiosrc="click.mp3"controls="controls"preloadid="music"hidden></audio>
<buttonid="a"onclick="a();">播放/暫停</button>

㈥ js怎麼去控制左右聲道的播放

GainNode

<inputtype="range"min="0"max="100"id="volume"/><scripttype="text/javascript">
vartank=newAudio("http://qianannotes.app.com/file/tankWar.mp3");
tank.loop=true;varmario=newAudio("http://qianannotes.app.com/file/SuperMario.mp3");
mario.loop=true;varAudioContext=AudioContext||webkitAudioContext;varcontext=newAudioContext();varsource1=context.createMediaElementSource(tank);varsource2=context.createMediaElementSource(mario);vargain1=context.createGain();vargain2=context.createGain();//連接：source→gain→destinationsource1.connect(gain1);
source2.connect(gain2);
gain1.connect(context.destination);
gain2.connect(context.destination);//音量控制
varvalue;
onload=volume.onchange=function(){
gain1.gain.value=volume.value/100;
gain2.gain.value=1-volume.value/100;
};

tank.onload=mario.onlond=function(){
console.log("var1,var2");
}
tank.play();
mario.play();</script>