移動端audio音頻播放相容方案

標籤：pat   利用   檔案   call   多個   end   llb   dev   efi   

現在很多移動端要求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     * @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音頻播放相容方案