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

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

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

加载准备处理

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78

/**   * 循环处理   * @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.muted =  true ; //静音，有的移动端不设置这个会直接播放          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.muted =  false ;                  audio.play();              }          };          audioReady.lists.push(audio);          callback && callback();      });      loadAudio.frame.appendChild(audio); }   //加载音频 loadAudio( 'test' );

用户事件触发处理

1 2 3 4 5 6 7 8 9 10 11

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

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

/audio/test.mp3

/audio/test.ogg

/audio/test.wav

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

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

本文转自  ttlxihuan    51CTO博客，原文链接:http://blog.51cto.com/php2012web/2066930