移动端audio音频播放兼容方案

标签：pat   利用   文件   call   多个   end   llb   dev   efi   

当移动需要通过网络请求回调来播放音频时，就得做点准备工作，具体代码如下：

加载准备处理

     /**
     * 循环处理
     * @param {Object} data
     * @param {Function} callback
     * @returns {undefined}
     */
    function each(data, callback) {
        if (typeof data === 'object') {
            if (data.length) {
                for (var key = 0; key < data.length; key++) {
                    if (callback(key, data[key]) === false) {
                        break;
                    }
                }
            } else {
                for (var key in data) {
                    if (callback(key, data[key]) === false) {
                        break;
                    }
                }
            }
        }
    }
    /**
     * 播放音频
     * @param {String} name
     * @param {Bool} isPrepare
     * @returns {undefined}
     */
    function audioPaly(name, isPrepare) {
        each(name.split(/\s+/), function (_, name) {
            if (audioPaly.lists[name]) {
                if (isPrepare) {
                    audioPaly.lists[name].prepare();
                } else {
                    audioPaly.lists[name].play();
                }
            }
        });
    }
    audioPaly.lists = {};
    /**
     * 加载音频
     * @param {String} path
     * @param {Function} callback
     * @returns {undefined}
     */
    function loadAudio(path) {
        var audio = create('audio', {preload: 'load'});
        each({'ogg': 'ogg', 'mp3': 'mpeg', 'wav': 'wav'}, function (name, type) {
            audio.appendChild(create('source', {src: '/audio/' + path + '.' + name, type: 'audio/' + type}));
        });
        audio.addEventListener('loadedmetadata', function () {
            audioPaly.lists[path] = {
                play: function () {//播放
                    audio.muted = false;//关闭静音
                    audio.play();
                },
                prepare: function () {//准备
                    audio.muted = true;//静音，有的移动端不设置这个会直接播放
                    audio.play();
                    audio.pause();
                }
            };
        });
        document.body.appendChild(audio);
    }
    
    //加载音频
    loadAudio('test');

用户事件触发处理

//绑定用户可触发元素点击事件
element.addEventListener('click', function(){
    audioPaly('test', true);//音频触发，用于回调再次播放
    //网络请求代码
    ....
        //网络回调器
        function (){
            audioPaly('test');//播放处理
        }
    ....
});

准备的音频文件（为什么准备多个就不多说了，具体看面向的终端支持音频格式来定）

/audio/test.mp3

/audio/test.ogg

/audio/test.wav

这段代码并不复杂，只是利用了移动端限制中的一点点许可，当在用户触发事件中播放了，那么在后续的操作的就可以再次播放。

只要我们在用户触发后播放音频并及时暂停或静音就可以不被听到音频，然后在网络请求回调中再次操作播放即可实现，动态播放。

移动端audio音频播放兼容方案

标签：pat   利用   文件   call   多个   end   llb   dev   efi   

原文地址：http://blog.51cto.com/php2012web/2066930