audio标签实现加载时呈现加载中状态，加载完毕改为播放状态并开始计时

点击播放的时候，立刻更改样式，呈现加载中样式

$(".speakContentBox").delegate('.audio_info','click', function(){
  var tmpSrc = app.playSrc;
  app.playSrc = $(this).attr('attr-src');

  app.playSecond = 0;
  clearInterval(app.playIntervalId);

  // 判断播放的链接是否与正在播放的链接一致，一致则暂停播放，否则就替换链接然后开始播放。
  if(tmpSrc == app.playSrc){
    app.playSrc = '';
    app.audioDom.pause();
    // 将上一个播放中的样式清除
    app.playingDom.removeClass('isPlaying isReading audioloading').addClass('isReaded');
  }else {
    // 替换链接然后开始播放。
    $("#audioPlayer").attr('src', app.playSrc);
    app.audioDom.play();

    if(app.playingDom){
      // 将上一个播放中的样式清除
      app.playingDom.removeClass('isPlaying isReading').addClass('isReaded').find(".front-bar").css('width', 0).next().css('left',0);
    }
    // 保存正在呈现播放中状态的 dom 节点
    app.playingDom = $(this).parents('.recordingMsg');
    // 呈现加载中样式
    app.playingDom.addClass('audioloading isPlaying isReading');
  }
});

监听加载完毕开始播放的事件，开始播放后，将加载中样式去掉，并改为播放中，然后开始倒计时。

app.audioDom = document.getElementById('audioPlayer');
//
app.playAudioFn = function(){
  app.playingDom.removeClass('audioloading').addClass('isPlaying');
  app.nowTotalSec = app.playingDom.find('var').text();
  app.playIntervalId = setInterval(function () {
    app.playSecond++;
    if(app.playSecond < app.nowTotalSec){
      var _w = app.playSecond / app.nowTotalSec * 54 + 'px';
      app.playingDom.find(".front-bar").css('width', _w).next().css('left',_w);
    } else {
      app.playSecond = 0;
      clearInterval(app.playIntervalId);
      app.playingDom.removeClass('isPlaying isReading').addClass('isReaded');
    }
  }, 997);
};
// 监听加载完毕开始播放的事件
app.audioDom.addEventListener("canplaythrough", app.playAudioFn, false);