audiojs使用总结

项目需求：同一页面有多个音乐播放器，同一时间只能播放一个音乐。因页面限制所以需要找一个比较简洁，且方便自定义样式的插件，所以选择了audiojs。并利用圣杯模式实现进度条长度自适应，可以适用不同尺寸设备。

效果图：

HTML代码：

<div class="audiojsZ">
  <audio src="../../static/musics/n.mp3" preload="auto"></audio>
  <div class="" style="width: 100%;float: left;">
    <div class="scrubberZ">
      <div class="progressZ"></div>
      <div class="loadedZ"></div>
    </div>
  </div>
  <div class="play-pauseZ">
    <p class="playZ"></p>
    <p class="pauseZ"></p>
    <p class="loadingZ"></p>
    <p class="errorZ"></p>
  </div>
  <div class="timeZ">
    <em class="playedZ">00:00</em>/<strong class="durationZ">00:00</strong>
  </div>
  <div class="error-messageZ"></div>
</div>

JS

setTimeout(function () {
  audiojs.events.ready(function() {
    var aAudioDomList = document.getElementsByTagName('audio')
    for(var i of aAudioDomList) {
      //初始化 自定义样式
      audiojs.create(i, {
        css: false,
        createPlayer: {
          markup: false,
          playPauseClass: 'play-pauseZ',
          scrubberClass: 'scrubberZ',
          progressClass: 'progressZ',
          loaderClass: 'loadedZ',
          timeClass: 'timeZ',
          durationClass: 'durationZ',
          playedClass: 'playedZ',
          errorMessageClass: 'error-messageZ',
          playingClass: 'playingZ',
          loadingClass: 'loadingZ',
          errorClass: 'errorZ'
        }
      })
    }
  })
  //保存正在播放音乐的序号
  var sAudioPlayingIndex = '-1'
  for(var i in audiojs.instances){
    //去看了源码 没有找到点击播放按钮的回调函数 只能重写playPause（监听音乐播放进度事件）
    //
    audiojs.instances[i].playPause = function () {
      // 原playPause事件 
      if (this.playing) this.pause();
      else this.play();
      // 有正在播放的音乐序号与sAudioPlayingIndex所保存的不同 则暂停音乐
      var sId = this.wrapper.id.split('audiojs_wrapper')[1]
      if (this.playing === true && sAudioPlayingIndex !== sId) {
        sAudioPlayingIndex = sId
        for(var j in audiojs.instances){
          if (j.split('audiojs')[1] != sAudioPlayingIndex) {
            audiojs.instances[j].pause()
          }
        }
      }
    }
  }
}, 2000)

CSS

.audiojsZ audio { position: absolute; left: -1px; }
/* 根据父标签className 展示不同长度 */
.question-audio .audiojsZ{
  width: 80%;
}
.option-img-div .audiojsZ{
  width: 100%;
}
.audiojsZ { width: 150px; height: 30px;margin: 5px auto 0 auto; background: #FDCD0F; overflow: hidden; font-family: monospace; font-size: 12px;
  -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); }
.audiojsZ .play-pauseZ { width: 25px; height: 25px; padding: 2px 3px; margin-left: -100%; float: left; overflow: hidden; border-right: 1px solid #F15A24; }
.audiojsZ p { display: none; width: 25px; height: 40px; margin: 0px; cursor: pointer; }
.audiojsZ .playZ { display: block; }
.audiojsZ .scrubberZ { height: 14px;margin: 8px 90px 8px 40px; background: #eee; border-left: 0px; border-bottom: 0px; overflow: hidden; }
.audiojsZ .progressZ { top: 0px; left: 0px; height: 14px; width: 0px;float: left;background: #9B3718; z-index: 1; }
.audiojsZ .loadedZ { top: 0px; left: 0px; height: 14px; width: 0px; background: #F15A24; }
.audiojsZ .timeZ { float: left; height: 30px; line-height: 30px; margin-left: -80px; padding: 0 5px; border-left: 1px solid #F15A24; color: #F15A24; }
.audiojsZ .timeZ em { padding: 0px 2px 0px 0px; color: #fff; font-style: normal; }
.audiojsZ .timeZ strong { padding: 0px 0px 0px 2px; font-weight: normal; }
.audiojsZ .error-messageZ { float: left; display: none; margin: 0px 10px; height: 36px; width: 400px; overflow: hidden; line-height: 36px; white-space: nowrap; color: #fff;
  text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; }
.audiojsZ .error-messageZ a { color: #eee; text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #999; white-space: wrap; }

.audiojsZ .playZ { background: url('../../static/images/player-graphics.gif') -2px -1px no-repeat; }
.audiojsZ .loadingZ { background: url('../../static/images/player-graphics.gif') -2px -31px no-repeat; }
.audiojsZ .errorZ { background: url('../../static/images/player-graphics.gif') -2px -61px no-repeat; }
.audiojsZ .pauseZ { background: url('../../static/images/player-graphics.gif') -2px -91px no-repeat; }

.playingZ .playZ, .playingZ .loadingZ, .playingZ .errorZ { display: none; }
.playingZ .pauseZ { display: block; }

.loadingZ .playZ, .loadingZ .pauseZ, .loadingZ .errorZ { display: none; }
.loadingZ .loadingZ { display: block; }

.errorZ .timeZ, .errorZ .playZ, .errorZ .pauseZ, .errorZ .scrubberZ, .errorZ .loadingZ { display: none; }
.errorZ .errorZ { display: block; }
.errorZ .play-pauseZ p { cursor: auto; }
.errorZ .error-messageZ { display: block; }

audiojs CDN地址
audiojs github地址