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>
