zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    [转]IDEA 新建 JSP 项目时
    [转] AForge.NET 图像处理类
    [转] 端口被占用的处理
    [极客大挑战 2019]PHP
    今天鸽了
    [ZJCTF 2019]NiZhuanSiWei
    [极客大挑战 2019]Secret File
    [SUCTF 2019]Pythonginx
    [CISCN2019 华北赛区 Day1 Web2]ikun
    [极客大挑战 2019]EasySQL
  • 原文地址:https://www.cnblogs.com/tie123abc/p/6117563.html
Copyright © 2011-2022 走看看