audio最简单原始的播放、暂停、停止、静音、音量大小控制的功能,注意某些浏览器会有权限无法自动播放噢(video也会如此)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>audio声音控制</title>
<script type="text/javascript">
//注意某些浏览器有权限无法自动播放
//声音控制
var my_audio={
obj:null,
is_auto_play:false,
is_loop:false,
set:function(a){
var self=this;
self.obj=new Audio(a.url);
if(a.auto){
self.is_auto_play=true;
self.play();
}
if(a.loop){
self.is_loop=true;
}
},
play:function(){
var self=this;
self.obj.play();
if(self.is_loop){
self.obj.onended = function() {
self.play();
};
}
},
pause:function(){
var self=this;
self.obj.pause();
},
stop:function(){
var self=this;
self.obj.pause();
self.obj.currentTime = 0.0;
},
muted:function(){
var self=this;
self.obj.muted ? self.obj.muted = false : self.obj.muted = true;
},
volume_add:function(){
var self=this;
self.obj.volume = self.obj.volume + 0.1;
},
volume_minus:function(){
var self=this;
self.obj.volume = self.obj.volume - 0.1;
},
init:function(a){
var c = function(s) {
var r={};
for (var k in s) {
r[k] = typeof s[k]==="object" ? c(s[k]) : s[k];
}
return r;
}
var self = c(my_audio);
self.set(a);
return self;
}
} var audio_bg=my_audio.init({url:"video/bg.mp3",auto:true});
var audio_gift=my_audio.init({url:"video/gift.mp3",loop:true});
var audio_bomb=my_audio.init({url:"video/bomb.mp3"}); </script>
</head> <body>
<br><br><br><br><br>
<a href="javascript:audio_bg.play();">播放背景</a>
<a href="javascript:audio_bg.pause();">暂停背景</a>
<a href="javascript:audio_bg.stop();">停止背景</a>
<a href="javascript:audio_bg.muted();">静音背景</a>
<a href="javascript:audio_bg.volume_add();">增加背景音</a>
<a href="javascript:audio_bg.volume_minus();">减少背景音</a>
<br><br><br><br><br>
<a href="javascript:audio_gift.play();">播放gift</a>
<a href="javascript:audio_gift.pause();">暂停gift</a>
<a href="javascript:audio_gift.stop();">停止gift</a>
<a href="javascript:audio_gift.muted();">静音gift</a>
<a href="javascript:audio_gift.volume_add();">增加gift音</a>
<a href="javascript:audio_gift.volume_minus();">减少gift音</a>
<br><br><br><br><br>
<a href="javascript:audio_bomb.play();">播放bomb</a>
<a href="javascript:audio_bomb.pause();">暂停bomb</a>
<a href="javascript:audio_bomb.stop();">停止bomb</a>
<a href="javascript:audio_bomb.muted();">静音bomb</a>
<a href="javascript:audio_bomb.volume_add();">增加bomb音</a>
<a href="javascript:audio_bomb.volume_minus();">减少bomb音</a>
</body>
</html>