audio最简单原始的播放、暂停、停止、静音、音量大小控制的功能,注意某些浏览器会有权限无法自动播放噢(video也会如此)
JS代码:
1 //注意某些浏览器有权限无法自动播放 2 //声音控制 3 var my_audio={ 4 obj:null, 5 is_auto_play:false, 6 is_loop:false, 7 set:function(a){ 8 var self=this; 9 self.obj=new Audio(a.url); 10 if(a.auto){ 11 self.is_auto_play=true; 12 self.play(); 13 } 14 if(a.loop){ 15 self.is_loop=true; 16 } 17 }, 18 play:function(){ 19 var self=this; 20 self.obj.play(); 21 if(self.is_loop){ 22 self.obj.onended = function() { 23 self.play(); 24 }; 25 } 26 }, 27 pause:function(){ 28 var self=this; 29 self.obj.pause(); 30 }, 31 stop:function(){ 32 var self=this; 33 self.obj.pause(); 34 self.obj.currentTime = 0.0; 35 }, 36 muted:function(){ 37 var self=this; 38 self.obj.muted ? self.obj.muted = false : self.obj.muted = true; 39 }, 40 volume_add:function(){ 41 var self=this; 42 self.obj.volume = self.obj.volume + 0.1; 43 }, 44 volume_minus:function(){ 45 var self=this; 46 self.obj.volume = self.obj.volume - 0.1; 47 }, 48 init:function(a){ 49 var c = function(s) { 50 var r={}; 51 for (var k in s) { 52 r[k] = typeof s[k]==="object" ? c(s[k]) : s[k]; 53 } 54 return r; 55 } 56 var self = c(my_audio); 57 self.set(a); 58 return self; 59 } 60 } 61 62 var audio_bg=my_audio.init({url:"video/bg.mp3",auto:true}); 63 var audio_gift=my_audio.init({url:"video/gift.mp3",loop:true}); 64 var audio_bomb=my_audio.init({url:"video/bomb.mp3"});
HTML代码:
1 <a href="javascript:audio_bg.play();">播放背景</a> 2 <a href="javascript:audio_bg.pause();">暂停背景</a> 3 <a href="javascript:audio_bg.stop();">停止背景</a> 4 <a href="javascript:audio_bg.muted();">静音背景</a> 5 <a href="javascript:audio_bg.volume_add();">增加背景音</a> 6 <a href="javascript:audio_bg.volume_minus();">减少背景音</a> 7 <br> 8 <a href="javascript:audio_gift.play();">播放gift</a> 9 <a href="javascript:audio_gift.pause();">暂停gift</a> 10 <a href="javascript:audio_gift.stop();">停止gift</a> 11 <a href="javascript:audio_gift.muted();">静音gift</a> 12 <a href="javascript:audio_gift.volume_add();">增加gift音</a> 13 <a href="javascript:audio_gift.volume_minus();">减少gift音</a> 14 <br> 15 <a href="javascript:audio_bomb.play();">播放bomb</a> 16 <a href="javascript:audio_bomb.pause();">暂停bomb</a> 17 <a href="javascript:audio_bomb.stop();">停止bomb</a> 18 <a href="javascript:audio_bomb.muted();">静音bomb</a> 19 <a href="javascript:audio_bomb.volume_add();">增加bomb音</a> 20 <a href="javascript:audio_bomb.volume_minus();">减少bomb音</a>