https://melphis.fm/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      thisAudio.src = $(this).attr('src') || $(this).children('source').attr('src')
38      window.tDuration[opt.obj + thisAudio.src + '_' + i] = setInterval(function(){
39        if(thisAudio.duration){
40          thisBox.find('.time-keep .duration').text(timeFormat(thisAudio.duration))
41          clearInterval(window.tDuration[opt.obj + thisAudio.src + '_' + i])
42        }
43      },100)
44      $(this).remove()
45    })
46  }
47
48
49  function progressBar(audio,pgp){
50    var p = 100*currentAudio.currentTime/currentAudio.duration
51    currentAudioBox.find('.progress-pass').css({'width':p + '%'})
52    // 计算当前时间
53    currentAudioBox.find('.current-time').text(timeFormat(currentAudio.currentTime))
54    // 播放结束
55    if(currentAudio.currentTime >= currentAudio.duration){
56      currentAudioBox.removeClass('playing')
57      clearInterval(t)
58    }
59  }
60
61  function bindAudioCtrl(){
62    // 播放
63    $(thisWindow).find('.audio-control .play').off('click')
64    $(thisWindow).find('.audio-control .play').on('click', function(){
65      var audioBox = $(this).parent('.audio-control').parent('.maudio')
66      var audio = audioBox.children('audio')[0]
67      if(audioBox.hasClass('playing')){
68        audio.pause()
69        audioBox.removeClass('playing')
70      }else{
71        // 停止其他语音播放
72        $(thisWindow).find('.playing').each(function(){
73          $(this).children('audio')[0].pause()
74          $(this).removeClass('playing')
75        })
76        audio.play()
77        audioBox.addClass('playing')
78        currentAudio = audio
79        currentAudioBox = audioBox
80        // 进度条
81        window.t = window.setInterval(function(){
82          progressBar()
83        },500)
84      }
85    })
86    // 快进
87    $(thisWindow).find('.audio-control .fast-reverse').off('click')
88    $(thisWindow).find('.audio-control .fast-reverse').on('click', function(){
89      currentAudio.currentTime -= opt.fastStep
90    })
91    // 快退
92    $(thisWindow).find('.audio-control .fast-forward').off('click')
93    $(thisWindow).find('.audio-control .fast-forward').on('click', function(){
94      currentAudio.currentTime += opt.fastStep
95    })
96    // 音量
97    $(thisWindow).find('.audio-control .volume-bar').off('click')
98    $(thisWindow).find('.audio-control .volume-bar').on('click', function(e){
99      var audioBox = $(this).parent('.audio-control').parent('.maudio')
100      var audio = audioBox.children('audio')[0]
101      var p = e.offsetX / audioBox.find('.volume-bar').width()
102      audioBox.find('.volume-pass').css({"width":p * 100 + '%'})
103      audio.volume = p > 1 ? 1 : p
104    })
105    // 静音
106    $(thisWindow).find('.audio-control .mute').off('click')
107    $(thisWindow).find('.audio-control .mute').on('click', function(e){
108      var audioBox = $(this).parent('.audio-control').parent('.maudio')
109      var audio = audioBox.children('audio')[0]
110      if($(this).hasClass('muted')){
111        audio.muted = false
112        $(this).removeClass('muted')
113      }else{
114        audio.muted = true
115        $(this).addClass('muted')
116      }
117    })
118    // 进度条
119    $(thisWindow).find('.audio-control .progress-bar').off('click')
120    $(thisWindow).find('.audio-control .progress-bar').on('click', function(e){
121      var audioBox = $(this).parent('.audio-control').parent('.maudio')
122      var audio = audioBox.children('audio')[0]

123      var p = e.offsetX / audioBox.find('.progress-bar').width()
124      audioBox.find('.progress-pass').css({"width":p * 100 + '%'})
125      audio.currentTime = audio.duration * p
126      // 同步一下本条音频的当前时间
127      audioBox.find('.current-time').text(timeFormat(audio.currentTime))
128    })
129    // 如果音频遇到其他操作变更按钮状态
130    $(thisWindow).find('.maudio audio').off('play')
131    $(thisWindow).find('.maudio audio').on('play', function () {
132      if (!$(this).parent('.maudio').hasClass('playing')) {
133        $(this).parent('.maudio').addClass('playing')
134      }
135    })
136    $(thisWindow).find('.maudio audio').off('pause')
137    $(thisWindow).find('.maudio audio').on('pause', function () {
138      if ($(this).parent('.maudio').hasClass('playing')) {
139        $(this).parent('.maudio').removeClass('playing')
140      }
141    })
142
143  }
144  bindAudioCtrl()
145
146  // 时间换算成“00:00”格式
147  function timeFormat(sec){
148    var m = parseInt(sec/60)
149    var s = parseInt(sec%60)
150    return (m < 10 ?  '0' + m : m)+ ':' + (s < 10 ?  '0' + s : s)
151  }
152}