audio 基本功能实现(audio停止播放,audio如何静音,audio音量控制等)

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>
原文地址:https://www.cnblogs.com/tie123abc/p/6117563.html