移動端audio音頻播放兼容方案
阿新 • • 發佈:2018-01-30
ram fine string 靜音 pre fun function creat bre 現在很多移動端要求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音頻播放兼容方案