audiojs使用总结

最新推荐文章于 2026-05-11 02:55:28 发布

原创

最新推荐文章于 2026-05-11 02:55:28 发布 · 7.6k 阅读

收录于

项目需求：同一页面有多个音乐播放器，同一时间只能播放一个音乐。因页面限制所以需要找一个比较简洁，且方便自定义样式的插件，所以选择了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>

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-messa