audio的兼容和使用

2017-09-01 散崖 755人已阅读

html5的新增的标签audio,用法其实网上也介绍一大堆,使用过程中经常发现的问题是:自动播放问题,如何页面只运行在微信端那还可以解决:




可是你一旦运行在ios设备中uc或者是safari浏览器等浏览器当中,那就没办法了解决了!当然这不是本文主要的讲的内容,下面主要介绍一下audio如何分断读取音频达到我们理想的播放效果!!

先看下面这个demo

可以发现在页面记性拖拽按钮的时候,随着骰子的结果播放不同的声音,而所有的音频都在一个文件里面

所以我们需要通过ajax返回的不同的结果进行分断读取播放,代码如下:

var Voice=(function(){
    var audioElem=document.getElementById("J_audio"); //获取页面元素
    var index=0; //默认初始化第一段
    var spriteData = { //音频分段对象字面量
        tt:{
            start:0,
            length:1
        },
        0: {
            start: 2.0,
            length: 2.8
        },
        1: {
            start: 5.2,
            length: 2.4
        },
        2: {
            start: 8.0,
            length: 2.7
        },
        3: {//四进
            start: 11.0,
            length: 3.5
        },
        4: {//三红
            start: 14.6,
            length: 3.4
        },
        
        5: {//对堂
            start: 18.0,
            length: 2.8
        },
        6: {//状元
            start: 22.8,
            length: 3.2
        }
    };

    

    var handler=function(){
        if (this.currentTime >= spriteData[index].start + spriteData[index].length) {
            this.pause();
        }
    };
    
    
    audioElem.addEventListener('timeupdate', handler, false);
    
    var play=function(rank){
        audioElem.currentTime = spriteData[rank].start;
        index=rank;
        audioElem.play(rank);

    };

    var pause=function(){
         audioElem.pause();
    };

    var ready=function(){
        if(audioElem.readyState==4){
            return true;
        }
        return false;
    }
    return {
        play:play,
        pause:pause,
        isReady:ready
    }
})();                  

原理很简单就是:在播放的时候,播放指定的区间,实时监听,如果播放的时间达到制定区间的末端,那么自动停止!

handler函数:在实时监听,判断播放的时间是否达到指定区间的末端,达到了就停止!

上一篇:

交换友情链接