AICODER大前端培训

AICODER-IT培训专家,前端培训基地,前端培训,全栈培训,大学生IT培训基地,线上IT课程免费自学,线下培训项目实战,实习,html5培训实习-AICODE程序员

在线咨询

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

AICODER官方 发布于: 2019年6月26日 11时0分20秒 阅读601次

现在很多移动端要求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


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

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


AICODER编辑推荐:



报名就业班送基础班

最近分享