https://wxli.ai/assets/js/lib/maudio.js

1function maudio(_opt){
2  var opt = {
3    obj : _opt.obj ? _opt.obj : 'audio',
4    fastStep : _opt.fastStep ? _opt.fastStep : 10
5  }
6  opt.tpl = '\
7    <div class="maudio">\
8      <audio src="" initaudio="false"></audio>\
9      <div class="audio-control">\
10          <a href="javascript:;" class="fast-reverse"></a>\
11          <a href="javascript:;" class="play"></a>\
12          <a href="javascript:;" class="fast-forward"></a>\
13          <div class="progress-bar">\
14              <div class="progress-pass"></div>\
15          </div>\
16          <div class="time-keep">\
17              <span class="current-time">00:00</span> / <span class="duration">00:00</span>\
18          </div>\
19          <a class="mute"></a>\
20          <div class="volume-bar">\
21              <div class="volume-pass"></div>\
22          </div>\
23      </div>\
24    </div>'
25  // var currentAudio,currentAudioBox
26
27  var thisWindow = $(opt.obj).parents(window)
28
29  // 如果样式已经初始化，只要初始化事件
30  if (!$(opt.obj).parent('.maudio').length || !$(opt.obj).next('div.audio-control').length) {
31    // 初始化所有音频
32    window.tDuration = window.tDuration ? window.tDuration : {}
33    $(opt.obj).each(function(i){
34      $(this).before(opt.tpl)
35      var thisBox = $(this).prev('div.maudio')
36      var thisAudio = thisBox.children('audio')[0]
37      var rawSrc = $(this).attr('src') || $(this).children('source').attr('src')
38      if (rawSrc) thisAudio.src = rawSrc
39      window.tDuration[opt.obj + thisAudio.src + '_' + i] = setInterval(function(){
40        if(thisAudio.duration){
41          thisBox.find('.time-keep .duration').text(timeFormat(thisAudio.duration))
42          clearInterval(window.tDuration[opt.obj + thisAudio.src + '_' + i])
43        }
44      },100)
45      $(this).remove()
46    })
47  }
48
49
50  function progressBar(audio,pgp){
51    var p = 100*currentAudio.currentTime/currentAudio.duration
52    currentAudioBox.find('.progress-pass').css({'width':p + '%'})
53    // 计算当前时间
54    currentAudioBox.find('.current-time').text(timeFormat(currentAudio.currentTime))
55    // 播放结束
56    if(currentAudio.currentTime >= currentAudio.duration){
57      currentAudioBox.removeClass('playing')
58      clearInterval(t)
59    }
60  }
61
62  function bindAudioCtrl(){
63    // 播放
64    $(thisWindow).find('.audio-control .play').off('click')
65    $(thisWindow).find('.audio-control .play').on('click', function(){
66      var audioBox = $(this).parent('.audio-control').parent('.maudio')
67      var audio = audioBox.children('audio')[0]
68      if(audioBox.hasClass('playing')){
69        audio.pause()
70        audioBox.removeClass('playing')
71        // Limpiar interval al pausar (fix memory leak)
72        if(window.t) {
73          clearInterval(window.t)
74          window.t = null
75        }
76      }else{
77        // 停止其他语音播放
78        $(thisWindow).find('.playing').each(function(){
79          $(this).children('audio')[0].pause()
80          $(this).removeClass('playing')
81        })
82        audio.play()
83        audioBox.addClass('playing')
84        currentAudio = audio
85        currentAudioBox = audioBox
86        // Limpiar interval anterior antes de crear uno nuevo (fix acumulación)
87        if(window.t) {
88          clearInterval(window.t)
89        }
90        // 进度条
91        window.t = window.setInterval(function(){
92          progressBar()
93        },500)
94      }
95    })
96    // 快进
97    $(thisWindow).find('.audio-control .fast-reverse').off('click')
98    $(thisWindow).find('.audio-control .fast-reverse').on('click', function(){
99      currentAudio.currentTime -= opt.fastStep
100    })
101    // 快退
102    $(thisWindow).find('.audio-control .fast-forward').off('click')
103    $(thisWindow).find('.audio-control .fast-forward').on('click', function(){
104      currentAudio.currentTime += opt.fastStep
105    })
106    // 音量
107    $(thisWindow).find('.audio-control .volume-bar').off('click')
108    $(thisWindow).find('.audio-control .volume-bar').on('click', function(e){
109      var audioBox = $(this).parent('.audio-control').parent('.maudio')
110      var audio = audioBox.children('audio')[0]

111      var p = e.offsetX / audioBox.find('.volume-bar').width()
112      audioBox.find('.volume-pass').css({"width":p * 100 + '%'})
113      audio.volume = p > 1 ? 1 : p
114    })
115    // 静音
116    $(thisWindow).find('.audio-control .mute').off('click')
117    $(thisWindow).find('.audio-control .mute').on('click', function(e){
118      var audioBox = $(this).parent('.audio-control').parent('.maudio')
119      var audio = audioBox.children('audio')[0]
120      if($(this).hasClass('muted')){
121        audio.muted = false
122        $(this).removeClass('muted')
123      }else{
124        audio.muted = true
125        $(this).addClass('muted')
126      }
127    })
128    // 进度条
129    $(thisWindow).find('.audio-control .progress-bar').off('click')
130    $(thisWindow).find('.audio-control .progress-bar').on('click', function(e){
131      var audioBox = $(this).parent('.audio-control').parent('.maudio')
132      var audio = audioBox.children('audio')[0]
133      var p = e.offsetX / audioBox.find('.progress-bar').width()
134      audioBox.find('.progress-pass').css({"width":p * 100 + '%'})
135      audio.currentTime = audio.duration * p
136      // 同步一下本条音频的当前时间
137      audioBox.find('.current-time').text(timeFormat(audio.currentTime))
138    })
139    // 如果音频遇到其他操作变更按钮状态
140    $(thisWindow).find('.maudio audio').off('play')
141    $(thisWindow).find('.maudio audio').on('play', function () {
142      if (!$(this).parent('.maudio').hasClass('playing')) {
143        $(this).parent('.maudio').addClass('playing')
144      }
145    })
146    $(thisWindow).find('.maudio audio').off('pause')
147    $(thisWindow).find('.maudio audio').on('pause', function () {
148      if ($(this).parent('.maudio').hasClass('playing')) {
149        $(this).parent('.maudio').removeClass('playing')
150      }
151    })
152
153  }
154  bindAudioCtrl()
155
156  // 时间换算成“00:00”格式
157  function timeFormat(sec){
158    var m = parseInt(sec/60)
159    var s = parseInt(sec%60)
160    return (m < 10 ?  '0' + m : m)+ ':' + (s < 10 ?  '0' + s : s)
161  }
162}