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

现在很多移动端要求audio播放必需由用户的事件触发，否则就劫持。实际应用中经常会出现JS网络请求通过返回的结果来决定播放什么音频，在移动端是不允许的。

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

加载准备处理

/**
 * 循环处理
 * @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
 * @returns {undefined}
 */
function audioPaly(name) {
    each(name.split(/\s+/), function (_, name) {
        if (audioPaly.lists[name]) {
            audioPaly.lists[name].play();
        }
    });
}
audioPaly.lists = {};

/**
 * 就绪音频处理
 * @returns {undefined}
 */
function audioReady() {
    var audio;
    while ((audio = audioReady.lists.pop())) {
        audio.play();
        audio.pause(); //直接暂停，可快速再播放
    }
}
audioReady.lists = [];

/**
 * 加载音频
 * @param {String} path
 * @param {Function} callback
 * @returns {undefined}
 */
function loadAudio(path, callback) {
    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}));
    });
    addEvent(audio, 'loadedmetadata', function () {
        audioPaly.lists[path] = {
            play: function () {//播放
                    audio.currentTime = 0; //这个用途不大，兼容处理
                                if (!audio.ended) {
                                     audio.load(); //重新加载，兼容处理，同时也可以快速开始播放
                                }
                audio.play();
            }
        };
        audioReady.lists.push(audio);
        callback && callback();
    });
    loadAudio.frame.appendChild(audio);
}
/**
 * 创建元素
 * @param {String} elem
 * @param {Object} addAttr
 * @returns {Element}
 */
function create(elem, addAttr){
    var Elem = document.createElement(elem);
    for(var key in addAttr){
        Elem.setAttribute(key, addAttr[key]);
    }
    return Elem;
}

//加载音频
loadAudio('test');

用户事件触发处理

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

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

/audio/test.mp3

/audio/test.ogg

/audio/test.wav

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

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

原文链接

https://blog.51cto.com/php2012web/2066930

服务推荐

• 蜻蜓代理
• 代理ip
• 微信域名拦截检测
• 微信域名检测api