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>