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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM