梁美英 / programming · Commits

Commit d4b90e479232c45a7afe545391903585d179d1f4

Authored by ykxie
1 parent dbba4520

fix 屏幕缩放进度条问题

Inline Side-by-side
Showing 1 changed file with 141 additions and 90 deletions
src/js/audioPlayer/jQuery.AudioPlayer.js
  View file @d4b90e4
1 1 /**
2   - * jQuery音频播放
3   - * @Author syantao
4   - * v1.0.1
  2 + * jQuery.AudioPlayer.js
  3 + * @Author Keystion
  4 + * @Version 1.0.1
5 5 * Created by Keystion on 2016-12-19
6   - * @param {[type]} jQuery [description]
  6 + * Update on 2017-01-06
7 7 */
8 8 ;(function(jQuery){
9 9 "use strict";
10 10 var AudioPlayer = {
11 11 options: {
12   - debuggers: false, // 是否开启播放记录
13   - container: 'body', // 把组件塞到什么地方
14   - source: '', // 音频源文件
15   - imagePath: './image', // 音频源文件
16   - seekNum: 0, // 拖拽是判断之前是否播放
17   - allowSeek: true, // 是否可以拖拽
18   - canplayCallback: null, // 可以播放之后，做某些事情
19   - playCallback: null, // 播放之后，做某些事情
20   - pauseCallback: null, // 暂停之后，做某些事情
21   - timeupdateCallback: null, // 拖动之后，做某些事情
22   - endedCallback: null, // 播放结束之后，做某些事情
23   - mutedCallback: null, // 静音之后，做某些事情
24   - template: $('<div id="componentWrapper">' +
  12 + // open console log / 打开控制台日志
  13 + debuggers: false
  14 + // container, default 'body' / 组件要放到什么地方，默认'body'
  15 + ,container: 'body'
  16 + // audio source / 音频源
  17 + ,source: ''
  18 + // 音频源文件 / image resources
  19 + ,imagePath: './image'
  20 + // Determines whether or not the player is playing before dragging/判断拖拽之前是否正在播放
  21 + ,seekNum: 0
  22 + // Whether can drag and drop / 是否可以拖拽
  23 + ,allowSeek: true
  24 + // After can play TODO / 可以播放之后，做某些事情
  25 + ,canplayCallback: null
  26 + // After playback TODO / 播放之后，做某些事情
  27 + ,playCallback: null
  28 + // After the suspension TODO / 暂停之后，做某些事情
  29 + ,pauseCallback: null
  30 + // After the drag TODO / 拖动之后，做某些事情
  31 + ,timeupdateCallback: null
  32 + // End of the play TODO / 播放结束之后，做某些事情
  33 + ,endedCallback: null
  34 + // After the mute TODO / 静音之后，做某些事情
  35 + ,mutedCallback: null
  36 + // template dom / 模板节点
  37 + ,template: $('<div id="componentWrapper">' +
25 38 '<audio id="audio-element" style="display: none;">您的浏览器不支持 audio 标签。</audio>' +
26 39 '<div class="controls_toggle"><img src="" alt="controls_toggle" /></div>' +
27 40 '<div class="player_mediaTime_current">00:00</div>' +
... ... @@ -45,9 +58,11 @@
45 58 '</div>' +
46 59 '</div>' +
47 60 '</div>')
48   - },
49   - elements: {},
50   - init: function(options) {
  61 + }
  62 + // elements
  63 + ,elements: {}
  64 + // initialize
  65 + ,init: function(options) {
51 66 var _this = this;
52 67 if (!options || !options.container) {
53 68 return false;
... ... @@ -56,29 +71,30 @@
56 71  
57 72 // audio DOM
58 73 _this.elements.audioDom = _this.options.template.find('audio')[0];
59   - // 播放按钮
  74 + _this.elements.componentWrapper = _this.options.template.find('#componentWrapper');
  75 + // Play button / 播放按钮
60 76 _this.elements.playButton = _this.options.template.find('.controls_toggle');
61   - // 当前时间
  77 + // The current time / 当前时间
62 78 _this.elements.currentTime = _this.options.template.find('.player_mediaTime_current');
63   - // 总时长
  79 + // The total length / 总时长
64 80 _this.elements.totalTime = _this.options.template.find('.player_mediaTime_total');
65   - // 加载进度条
  81 + // Loading progress bar / 加载进度条
66 82 _this.elements.loadProgress = _this.options.template.find('.load_progress');
67   - // 播放进度条
  83 + // Playback progress bar / 播放进度条
68 84 _this.elements.playProgress = _this.options.template.find('.play_progress');
69   - // 播放进度条wrap
  85 + // Playback progress bar wrap / 播放进度条wrap
70 86 _this.elements.playProgressWrap = _this.options.template.find('.player_progress');
71   - // 播放进度条总长
  87 + // The total length of playback progress bar / 播放进度条总长
72 88 _this.elements.totalPlayProgress = _this.options.template.find('.progress_bg');
73   - // 静音按钮
  89 + // Mute button / 静音按钮
74 90 _this.elements.mutedButton = _this.options.template.find('.player_volume');
75   - // 音量大小wrap
  91 + // The volume size wrap / 音量大小wrap
76 92 _this.elements.volumeWrap = _this.options.template.find('.volume_seekbar');
77   - // 音量总长
  93 + // The volume chief / 音量总长
78 94 _this.elements.totalVolume = _this.options.template.find('.volume_bg');
79   - // 当前音量
  95 + // The current volume / 当前音量
80 96 _this.elements.currentVolume = _this.options.template.find('.volume_level');
81   - // 音量提示条
  97 + // The tooltips of the volume / 音量提示条
82 98 _this.elements.tipsVolume = _this.options.template.find('.player_volume_tooltip');
83 99 $(_this.options.container).append(_this.options.template);
84 100  
... ... @@ -86,32 +102,42 @@
86 102 _this.elements.mutedButton.find('img').attr('src', _this.options.imagePath + '/volume.png');
87 103  
88 104 if(options.source){
89   - _this.updateSource({source: options.source, callback: function(){ _this.log('update source') }});
  105 + _this.updateSource({source: options.source, callback: function(){ _this.log('The audio source has been updated') }});
90 106 }
91 107  
92 108 _this.elements.currentVolume.width((60 / 100 * _this.elements.audioDom.volume * 100) + 'px');
93 109  
94   - // 初始化话事件
  110 + // Initialize the event / 初始化事件
95 111 _this.events();
96   - },
97   - // 更新音频源
98   - updateSource: function(o){
  112 + }
  113 + // Update the audio source foo. / 更新音频源
  114 + ,updateSource: function(o){
99 115 var _this = this;
100   - // 重置
  116 + // reset
101 117 _this.reset();
102 118  
103   - // 更新音频来源
  119 + // Update the audio source / 更新音频源
104 120 _this.elements.audioDom.setAttribute('src', o.source);
105 121  
  122 + // callback
106 123 if(typeof o.callback == 'function'){
107 124 o.callback();
108 125 }
109   - },
110   - // dom 绑定事件
111   - events: function() {
  126 + }
  127 + // dom events
  128 + ,events: function() {
112 129 var _this = this;
113 130  
114   - // 调节声音大小
  131 + // Monitor window changes to do some of the UI update / 监听窗口的变化做一些UI的更新
  132 + $(window).resize(function(event) {
  133 +
  134 + // Update the width of the download progress bar / 更新下载进度条的宽度
  135 + _this.setLoadProgressWidth();
  136 + // Update the playback progress bar width / 更新播放进度条的宽度
  137 + _this.elements.playProgress.width((_this.elements.audioDom.currentTime / _this.elements.audioDom.duration) * $('.progress_bg').width());
  138 + });
  139 +
  140 + // Adjust the size of sound / 调节声音大小
115 141 _this.elements.volumeWrap.on("mouseenter", function(event) {
116 142 event.preventDefault();
117 143 }).on("mouseleave", function(event) {
... ... @@ -143,7 +169,8 @@
143 169 _this.muted();
144 170 });
145 171  
146   - // 播放进度条
  172 + // Playback progress bar drag and drop events / 播放进度条拖拽事件
  173 + // To determine whether to allow drag and drop / 判断是否允许拖拽
147 174 if(_this.options.allowSeek){
148 175 _this.elements.playProgressWrap.on('mousedown', function(event) {
149 176 event.preventDefault();
... ... @@ -153,15 +180,17 @@
153 180 _this.options.seekNum = 2;
154 181 _this.pause();
155 182 }
156   - // 鼠标按下就更新进度条
  183 + // The mouse click will update the progress bar / 鼠标按下就更新进度条
157 184 _this.setPlayProgressWidth(event);
158 185 }).on('mousemove', function(event) {
159 186 event.preventDefault();
160   - // 判断是否已经开始移动 才会设置进度条
  187 + // Determine whether have begun to move will set the progress bar / 判断是否已经开始移动 才会设置进度条
161 188 _this.options.seekNum != 0 && _this.setPlayProgressWidth(event);
162 189 }).on('mouseup', function(event) {
163 190 event.preventDefault();
164   - // TODO 是否有必要在鼠标按键抬起的时候再次去更新播放进度条宽度
  191 + // TODO
  192 + // Is it necessary to when the mouse button to lift again to update the playback progress bar width
  193 + // 是否有必要在鼠标按键抬起的时候再次去更新播放进度条宽度
165 194 // _this.setPlayProgressWidth(event);
166 195 if (_this.options.seekNum == 1) {
167 196 _this.pause();
... ... @@ -185,7 +214,7 @@
185 214 })
186 215 }
187 216  
188   - // 播放暂停
  217 + // Click event broadcast suspended / 播放暂停点击事件
189 218 _this.elements.playButton.on('click', function(event) {
190 219 event.preventDefault();
191 220 _this.toggleplay({
... ... @@ -194,17 +223,17 @@
194 223 });
195 224 })
196 225  
197   - // 当音频的加载已放弃时
  226 + // When audio load has abandoned / 当音频的加载已放弃时
198 227 _this.elements.audioDom.onabort = function() {
199 228 _this.log('onabort');
200 229  
201 230 _this.reset();
202 231 }
203 232  
204   - // 当浏览器可以播放音频时
  233 + // When the browser can play audio / 当浏览器可以播放音频时
205 234 _this.elements.audioDom.oncanplay = function() {
206 235 _this.log('oncanplay');
207   - // 判断音频加载完毕
  236 + // Determine the audio to load / 判断音频加载完毕
208 237 if (_this.elements.audioDom.readyState == 4) {
209 238 var duration = Math.round(_this.elements.audioDom.duration);
210 239 var minutes = Math.floor(duration / 60);
... ... @@ -219,31 +248,31 @@
219 248 }
220 249 }
221 250  
222   - // 当浏览器正在下载音频时
  251 + // When the browser is downloading audio / 当浏览器正在下载音频时
223 252 _this.elements.audioDom.onprogress = function() {
224 253 if (_this.elements.audioDom.readyState == 4) {
225 254 _this.elements.loadProgress.width((_this.elements.audioDom.buffered.end(0) / _this.elements.audioDom.seekable.end(0)) * _this.elements.totalPlayProgress.width());
226 255 }
227 256 };
228 257  
229   - // 当浏览器开始查找音频时
  258 + // When the browser begins searching for the audio / 当浏览器开始查找音频时
230 259 _this.elements.audioDom.onloadstart = function() {
231 260 _this.log('onloadstart');
232 261 }
233 262  
234   - // 当音频已开始或不再暂停时
  263 + // When the audio has begun or is no longer suspended / 当音频已开始或不再暂停时
235 264 _this.elements.audioDom.onplay = function() {
236 265 _this.log('onplay');
237 266 _this.elements.playButton.find('img').attr('src', _this.options.imagePath + '/pause.png');
238 267 }
239 268  
240   - // 当音频已暂停时
  269 + // When the audio has been suspended / 当音频已暂停时
241 270 _this.elements.audioDom.onpause = function() {
242 271 _this.log('onpause');
243 272 _this.elements.playButton.find('img').attr('src', _this.options.imagePath + '/play.png');
244 273 }
245 274  
246   - // 当目前的播放列表已结束时
  275 + // When the current playlist has ended / 当目前的播放列表已结束时
247 276 _this.elements.audioDom.onended = function() {
248 277 _this.log('onended');
249 278  
... ... @@ -252,39 +281,43 @@
252 281 }
253 282 }
254 283  
  284 + // When the user starts moving/jump to the new location in the audio
255 285 // 当用户开始移动/跳跃到音频中的新位置时
256 286 _this.elements.audioDom.onseeking = function() {
257 287 _this.log('onseeking');
258 288 }
259 289  
  290 + // When the user has mobile/jump to the new location in the audio
260 291 // 当用户已移动/跳跃到音频中的新位置时
261 292 _this.elements.audioDom.onseeked = function() {
262 293 _this.log('onseeked');
263 294 }
264 295  
  296 + // When the current playback position has changed
265 297 // 当目前的播放位置已更改时
266 298 _this.elements.audioDom.ontimeupdate = function() {
267 299 _this.log('ontimeupdate');
268 300 _this.timeupdate();
269 301 }
270 302  
  303 + // When the volume is changed
271 304 // 当音量已更改时
272 305 _this.elements.audioDom.onvolumechange = function() {
273 306 _this.log('onvolumechange');
274 307 _this.setvolume();
275 308 }
276   - },
277   - // 切换播放/暂停
278   - toggleplay: function(o) {
  309 + }
  310 + // Toggle play/pause 切换播放/暂停
  311 + ,toggleplay: function(o) {
279 312 var _this = this;
280 313 if (_this.elements.audioDom.paused) {
281 314 _this.play(o.playCallback);
282 315 } else {
283 316 _this.pause(o.pauseCallback);
284 317 }
285   - },
286   - // 设置播放
287   - play: function(o) {
  318 + }
  319 + // Set the playback / 设置播放
  320 + ,play: function(o) {
288 321 var _this = this;
289 322 _this.elements.audioDom.play();
290 323 if (typeof o == 'function') {
... ... @@ -294,9 +327,9 @@
294 327 if(typeof _this.options.playCallback == 'function'){
295 328 _this.options.playCallback({'status': _this.elements.audioDom.play});
296 329 }
297   - },
298   - // 设置暂停
299   - pause: function(o) {
  330 + }
  331 + // Set the suspend / 设置暂停
  332 + ,pause: function(o) {
300 333 var _this = this;
301 334 _this.elements.audioDom.pause();
302 335 if (typeof o == 'function') {
... ... @@ -306,9 +339,9 @@
306 339 if(typeof _this.options.pauseCallback == 'function'){
307 340 _this.options.pauseCallback({'status': _this.elements.audioDom.play});
308 341 }
309   - },
310   - // 设置静音否
311   - muted: function(o) {
  342 + }
  343 + // muted / 设置静音否
  344 + ,muted: function(o) {
312 345 var _this = this;
313 346 if (_this.elements.audioDom.muted) {
314 347 _this.elements.audioDom.muted = false;
... ... @@ -321,9 +354,9 @@
321 354 if(typeof _this.options.mutedCallback == 'function'){
322 355 _this.options.mutedCallback({'status': _this.elements.audioDom.muted});
323 356 }
324   - },
325   - // 设置声音大小
326   - setvolume: function(options) {
  357 + }
  358 + // Set the sound size / 设置声音大小
  359 + ,setvolume: function(options) {
327 360 var _this = this;
328 361 if (!options) {
329 362 _this.elements.currentVolume.width((_this.elements.totalVolume.width() / 100 * _this.elements.audioDom.volume * 100) + 'px');
... ... @@ -331,14 +364,15 @@
331 364 if (options.event) {
332 365 return _this.elements.audioDom.volume = _this.sumVolume(options.event) / 100;
333 366 } else {
334   - // _this.log 需要优化
  367 + // TODO _this.log
  368 + // Need to optimize / 需要优化
335 369 _this.options.debuggers && console.error('缺少参数：options.event');
336 370 return false;
337 371 }
338 372 }
339   - },
340   - // 设置播放进度条
341   - setPlayProgressWidth: function(argument) {
  373 + }
  374 + // Set the playback progress bar / 设置播放进度条
  375 + ,setPlayProgressWidth: function(argument) {
342 376 var _this = this;
343 377 if (!argument) {
344 378 return false;
... ... @@ -350,9 +384,20 @@
350 384 _this.elements.playProgress.width(argument.clientX - _this.elements.playProgressWrap.offset().left);
351 385 _this.elements.audioDom.currentTime = (argument.clientX - _this.elements.playProgressWrap.offset().left) / _this.elements.totalPlayProgress.width() * _this.elements.audioDom.duration;
352 386 // }
353   - },
354   - // 播放时间更改
355   - timeupdate: function() {
  387 + }
  388 + // Set the width of the download progress bar / 设置下载进度条的宽度
  389 + ,setLoadProgressWidth: function(){
  390 + var _this = this;
  391 +
  392 + // The audio of the ready state / 音频的就绪状态
  393 + // More docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState
  394 + // TODO Add other state
  395 + if (_this.elements.audioDom.readyState == 4) {
  396 + _this.elements.loadProgress.width((_this.elements.audioDom.buffered.end(0) / _this.elements.audioDom.seekable.end(0)) * _this.elements.totalPlayProgress.width());
  397 + }
  398 + }
  399 + // Playing time change foo. / 播放时间更改
  400 + ,timeupdate: function() {
356 401 var _this = this;
357 402  
358 403 var currTime = Math.floor(_this.elements.audioDom.currentTime).toString();
... ... @@ -366,9 +411,9 @@
366 411 _this.elements.totalTime.html(_this.formatTime(duration));
367 412 }
368 413 _this.elements.playProgress.width((_this.elements.audioDom.currentTime / _this.elements.audioDom.duration) * $('.progress_bg').width());
369   - },
370   - // 格式化时间戳相关
371   - formatTime: function(secs, format) {
  414 + }
  415 + // Formatting a timestamp / 格式化时间戳相关
  416 + ,formatTime: function(secs, format) {
372 417 var hr = Math.floor(secs / 3600);
373 418 var min = Math.floor((secs - (hr * 3600)) / 60);
374 419 var sec = Math.floor(secs - (hr * 3600) - (min * 60));
... ... @@ -381,9 +426,9 @@
381 426 }
382 427  
383 428 return min + ':' + sec;
384   - },
385   - // 计算音量
386   - sumVolume: function(event) {
  429 + }
  430 + // To calculate the volume / 计算音量
  431 + ,sumVolume: function(event) {
387 432 var _this = this;
388 433 if (!event) {
389 434 return false;
... ... @@ -392,20 +437,26 @@
392 437 num = Math.max(0, Math.min(1, num / _this.elements.totalVolume.width()));
393 438 num = parseInt(100 * num, 10);
394 439 return num;
395   - },
396   - // 重置函数
397   - reset: function(){
  440 + }
  441 + // reset / 重置函数
  442 + ,reset: function(){
398 443 var _this = this;
399 444  
400   - // 播放按钮 当前播放时间 总时间 音量 播放进度条 下载进度条
  445 + // The play button to return to the initial state / 播放按钮回到初始状态
401 446 _this.elements.playButton.find('img').attr('src', _this.options.imagePath + '/play.png');
  447 + // The current playback time back to the initial state / 当前播放时间回到初始状态
402 448 _this.elements.currentTime.html('00:00');
  449 + // Total time to return to the initialization state / 总时间回到初始化状态
403 450 _this.elements.totalTime.html('00:00');
  451 + // The volume back to initialize the state / 音量回到初始化状态
404 452 _this.elements.currentVolume.width(_this.elements.totalVolume);
  453 + // Playback progress bar to initialize state / 播放进度条回到初始化状态
405 454 _this.elements.playProgress.width(0);
  455 + // Audio download progress bar back to the initial state / 音频下载进度条回到初始状态
406 456 _this.elements.loadProgress.width(0);
407   - },
408   - log: function(log){
  457 + }
  458 + // Custom log / 定制log
  459 + ,log: function(log){
409 460 var _this = this;
410 461  
411 462 if(_this.options.debuggers){
... ...