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>