前端关于audio播放一些事项

• 首先定义一个audio对象

audio:{
    music:null,//audio
    touch:true,//触摸条件
    curent:true,//切换状态
    //播放函数 id 是audio 容器，element 是 播放按钮，klass 是播放按钮的状态
    play:function(id,element,klass){
        var that = this;
        // getAudio 获取audio元素
        that.music = document.getElementById(id)

        // listenerPlay 监听播放状态 改变按钮状态，如果以播放 触摸条件为false
        that.music.addEventListener('playing', function () {
           $(element).addClass(klass)
           that.touch = false;
        }, false);

        // listenerPause 监听暂停 改变按钮状态
        that.music.addEventListener('pause', function () {
           $(element).removeClass(klass)
        }, false);

        // weixinPlay 微信环境 执行播放
        document.addEventListener("WeixinJSBridgeReady",function(){
            that.music.play();
        },false);

        // clickPlayPause 按钮点击 切换按钮状态 和改变 切换状态，用户手动暂停 在切换后不再执行
        $(element).bind('click',function(){
            if(that.music.paused){
                that.music.play()
            }else{
                that.music.pause();
            }
            that.curent = !that.curent;
        })

        // touchPlay 触摸播放
        document.addEventListener('touchstart', function(){
            if(that.touch){
                that.music.play();
            }
        }, false);

        // togglePlayPause 切换暂停/播放
        document.addEventListener('visibilitychange', function() {
            if(document.hidden){
                that.music.pause();
            }else{
                if(that.curent){
                    that.music.play();
                }
            }
        })
    }
}