商艳涛 / other-demo · Commits

Commit 496be00ec3fc3005698f102af6defa0f0f00dfbc

Authored by [商艳涛]
1 parent f83fd6f3
build: skipped

no message

Inline Side-by-side
Showing 1 changed file with 0 additions and 703 deletions
audio/index.html deleted 100644 → 0
  View file @f83fd6f
1   -<!DOCTYPE html>
2   -<html lang="en">
3   -
4   -<head>
5   - <meta charset="UTF-8">
6   - <title>音频</title>
7   - <style type="text/css">
8   - #componentWrapper,
9   - #componentWrapper *{
10   - -webkit-box-sizing: border-box;
11   - box-sizing: border-box;
12   - margin: 0;
13   - padding: 0;
14   - border: 0;
15   - outline: none;
16   - }
17   - #componentWrapper {
18   - position: relative;
19   - height: 40px;
20   - font-family: Arial, Helvetica, sans-serif;
21   - font-size: 15px;
22   - display: -webkit-flex;
23   - display: flex;
24   - }
25   -
26   - #componentWrapper .controls_toggle {
27   - position: relative;
28   - width: 40px;
29   - height: 40px;
30   - background: #333;
31   - border-right: 1px solid #555;
32   - border-right-color: rgba( 255, 255, 255, .1);
33   - background-image: url(../images/player_bg2.png);
34   - background-repeat: repeat-x;
35   - -webkit-box-shadow: 1px 1px 6px #333;
36   - box-shadow: 1px 1px 6px #333;
37   - behavior: url(PIE.htc);
38   - cursor: pointer;
39   - }
40   -
41   - #componentWrapper .controls_toggle img {
42   - display: block;
43   - position: absolute;
44   - width: 12px;
45   - height: 15px;
46   - left: 50%;
47   - top: 50%;
48   - margin-left: -6px;
49   - margin-top: -8px;
50   - -webkit-user-select: none;
51   - user-select: none;
52   - }
53   -
54   - #componentWrapper .player_mediaTime_current {
55   - position: relative;
56   - width: 60px;
57   - height: 40px;
58   - color: white;
59   - text-align: center;
60   - line-height: 40px;
61   - border-left: 1px solid #111;
62   - border-left: 1px solid rgba( 0, 0, 0, .25);
63   - background-image: url(../images/player_bg2.png);
64   - background-repeat: repeat-x;
65   - -webkit-box-shadow: 1px 1px 6px #333;
66   - box-shadow: 1px 1px 6px #333;
67   - behavior: url(PIE.htc);
68   - -webkit-user-select: none;
69   - user-select: none;
70   - }
71   -
72   - #componentWrapper .player_progress {
73   - position: relative;
74   - height: 40px;
75   - background-image: url(../images/player_bg2.png);
76   - background-repeat: repeat-x;
77   - -webkit-box-shadow: 1px 1px 6px #333;
78   - box-shadow: 1px 1px 6px #333;
79   - behavior: url(PIE.htc);
80   - cursor: pointer;
81   - flex: 1;
82   - }
83   -
84   - #componentWrapper .progress_bg {
85   - position: absolute;
86   - height: 10px;
87   - background: #222;
88   - top: 15px;
89   - left: 10px;
90   - right: 10px;
91   - -webkit-box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5), 1px 1px 0 rgba( 255, 255, 255, .1);
92   - box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5), 1px 1px 0 rgba( 255, 255, 255, .1);
93   - -webkit-border-radius: 4px;
94   - border-radius: 4px;
95   - }
96   -
97   - #componentWrapper .load_progress {
98   - position: absolute;
99   - height: 10px;
100   - background: #444;
101   - top: 15px;
102   - left: 10px;
103   - right: 10px;
104   - width: 0px;
105   - -webkit-border-radius: 4px;
106   - border-radius: 4px;
107   - }
108   -
109   - #componentWrapper .play_progress {
110   - position: absolute;
111   - height: 10px;
112   - background: #fff;
113   - top: 15px;
114   - left: 10px;
115   - right: 10px;
116   - width: 0px;
117   - -webkit-border-radius: 4px;
118   - border-radius: 4px;
119   - }
120   -
121   - #componentWrapper .player_progress_tooltip {
122   - position: relative;
123   - top: -10px;
124   - width: 72px;
125   - background: #333;
126   - height: 16px;
127   - display: none;
128   - text-align: center;
129   - -webkit-box-shadow: 1px 1px 3px #222;
130   - box-shadow: 1px 1px 3px #222;
131   - behavior: url(PIE.htc);
132   - }
133   -
134   - #componentWrapper .player_progress_tooltip p {
135   - color: white;
136   - font-size: 10px;
137   - margin: 0;
138   - line-height: 16px;
139   - }
140   -
141   - #componentWrapper .player_mediaTime_total {
142   - position: relative;
143   - width: 60px;
144   - height: 40px;
145   - color: white;
146   - text-align: center;
147   - line-height: 40px;
148   - border-right: 1px solid #555;
149   - border-right: 1px solid rgba( 255, 255, 255, .1);
150   - background-image: url(../images/player_bg2.png);
151   - background-repeat: repeat-x;
152   - -webkit-box-shadow: 1px 1px 6px #333;
153   - box-shadow: 1px 1px 6px #333;
154   - behavior: url(PIE.htc);
155   - -webkit-user-select: none;
156   - user-select: none;
157   - }
158   -
159   - #componentWrapper .player_volume_wrapper {
160   - position: relative;
161   - height: 40px;
162   - display: -webkit-flex;
163   - display: flex;
164   - }
165   -
166   - #componentWrapper .player_volume {
167   - position: relative;
168   - width: 40px;
169   - height: 40px;
170   - border-left: 1px solid #111;
171   - border-left-color: rgba( 0, 0, 0, .25);
172   - background-image: url(../images/player_bg2.png);
173   - background-repeat: repeat-x;
174   - -webkit-box-shadow: 1px 1px 6px #333;
175   - box-shadow: 1px 1px 6px #333;
176   - behavior: url(PIE.htc);
177   - cursor: pointer;
178   - }
179   -
180   - #componentWrapper .player_volume img {
181   - display: block;
182   - position: absolute;
183   - width: 18px;
184   - height: 16px;
185   - left: 50%;
186   - top: 50%;
187   - margin-left: -9px;
188   - margin-top: -8px;
189   - -webkit-user-select: none;
190   - user-select: none;
191   - }
192   -
193   - #componentWrapper .volume_seekbar {
194   - position: relative;
195   - width: 80px;
196   - height: 40px;
197   - background-image: url(../images/player_bg2_vol.png);
198   - background-repeat: repeat-x;
199   - -webkit-box-shadow: 1px 1px 6px #333;
200   - box-shadow: 1px 1px 6px #333;
201   - behavior: url(PIE.htc);
202   - /*display: none;*/
203   - cursor: pointer;
204   - }
205   -
206   - #componentWrapper .volume_bg {
207   - position: absolute;
208   - width: 60px;
209   - height: 10px;
210   - background: #222;
211   - bottom: 15px;
212   - left: 10px;
213   - -webkit-box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5), 1px 1px 0 rgba( 255, 255, 255, .1);
214   - box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5), 1px 1px 0 rgba( 255, 255, 255, .1);
215   - -webkit-border-radius: 4px;
216   - border-radius: 4px;
217   - }
218   -
219   - #componentWrapper .volume_level {
220   - position: absolute;
221   - width: 30px;
222   - height: 10px;
223   - background: #fff;
224   - bottom: 15px;
225   - left: 10px;
226   - -webkit-border-radius: 4px;
227   - border-radius: 4px;
228   - }
229   -
230   - #componentWrapper .player_volume_tooltip {
231   - position: relative;
232   - left: -15px;
233   - top: -4px;
234   - width: 35px;
235   - height: 16px;
236   - background: #333;
237   - display: none;
238   - text-align: center;
239   - -webkit-box-shadow: 1px 1px 3px #222;
240   - box-shadow: 1px 1px 3px #222;
241   - behavior: url(PIE.htc);
242   - }
243   -
244   - #componentWrapper .player_volume_tooltip p {
245   - font-family: Arial, Helvetica, sans-serif;
246   - font-size: 10px;
247   - color: #ffffff;
248   - margin: 0;
249   - line-height: 18px;
250   - }
251   - </style>
252   -</head>
253   -
254   -<body>
255   - <style type="text/css">
256   - li a {
257   - line-height: 2;
258   - text-indent: 1em;
259   - color: #00f;
260   - display: block;
261   - }
262   -
263   - li a:hover {
264   - background-color: #dcdcdc;
265   - }
266   - </style>
267   - <ul>
268   - <li><a href="javascript:;" data-url="./Fade.mp3">Fade</a></li>
269   - <li><a href="javascript:;" data-url="./failed.mp3">failed</a></li>
270   - <li><a href="javascript:;" data-url="./yinweiaiqing.mp4">因为爱情</a></li>
271   - <li><a href="javascript:;" data-url="./tonghuazhen.mp3">童话镇</a></li>
272   - <li><a href="javascript:;" data-url="./miaolingtong.mp3">妙龄童</a></li>
273   - </ul>
274   - <div id="audioWrap"></div>
275   -
276   - <script type="text/javascript" src="../lib/jquery-3.1.1.min.js"></script>
277   - <script type="text/javascript">
278   - var AUDIO = {
279   - options: {
280   - debuggers: false, // 是否开启播放记录
281   - container: 'body', // 把组件塞到什么地方
282   - source: '', // 音频源文件
283   - seekNum: 0, // 拖拽是判断之前是否播放
284   - allowSeek: true, // 是否可以拖拽
285   - canplayCallback: null, // 可以播放之后，做某些事情
286   - playCallback: null, // 播放之后，做某些事情
287   - pauseCallback: null, // 暂停之后，做某些事情
288   - timeupdateCallback: null, // 拖动之后，做某些事情
289   - endedCallback: null, // 播放结束之后，做某些事情
290   - mutedCallback: null, // 静音之后，做某些事情
291   - template: $('<div id="componentWrapper">' +
292   - '<audio id="audio-element" style="display: none;">您的浏览器不支持 audio 标签。</audio>' +
293   - '<div class="controls_toggle"><img src="../images/play.png" alt="controls_toggle" /></div>' +
294   - '<div class="player_mediaTime_current">00:00</div>' +
295   - '<div class="player_progress">' +
296   - '<div class="progress_bg"></div>' +
297   - '<div class="load_progress"></div>' +
298   - '<div class="play_progress"></div>' +
299   - '<div class="player_progress_tooltip">' +
300   - '<p></p>' +
301   - '</div>' +
302   - '</div>' +
303   - '<div class="player_mediaTime_total">00:00</div>' +
304   - '<div class="player_volume_wrapper">' +
305   - '<div class="player_volume"><img src="../images/volume.png" alt="player_volume" /></div>' +
306   - '<div class="volume_seekbar">' +
307   - '<div class="volume_bg"></div>' +
308   - '<div class="volume_level"></div>' +
309   - '<div class="player_volume_tooltip">' +
310   - '<p></p>' +
311   - '</div>' +
312   - '</div>' +
313   - '</div>' +
314   - '</div>')
315   - },
316   - elements: {},
317   - init: function(options) {
318   - var _this = this;
319   - if (!options || !options.container) {
320   - return false;
321   - }
322   - this.options = $.extend(this.options, options);
323   -
324   - // audio DOM
325   - _this.elements.audioDom = _this.options.template.find('audio')[0];
326   - // 播放按钮
327   - _this.elements.playButton = _this.options.template.find('.controls_toggle');
328   - // 当前时间
329   - _this.elements.currentTime = _this.options.template.find('.player_mediaTime_current');
330   - // 总时长
331   - _this.elements.totalTime = _this.options.template.find('.player_mediaTime_total');
332   - // 加载进度条
333   - _this.elements.loadProgress = _this.options.template.find('.load_progress');
334   - // 播放进度条
335   - _this.elements.playProgress = _this.options.template.find('.play_progress');
336   - // 播放进度条wrap
337   - _this.elements.playProgressWrap = _this.options.template.find('.player_progress');
338   - // 播放进度条总长
339   - _this.elements.totalPlayProgress = _this.options.template.find('.progress_bg');
340   - // 静音按钮
341   - _this.elements.mutedButton = _this.options.template.find('.player_volume');
342   - // 音量大小wrap
343   - _this.elements.volumeWrap = _this.options.template.find('.volume_seekbar');
344   - // 音量总长
345   - _this.elements.totalVolume = _this.options.template.find('.volume_bg');
346   - // 当前音量
347   - _this.elements.currentVolume = _this.options.template.find('.volume_level');
348   - // 音量提示条
349   - _this.elements.tipsVolume = _this.options.template.find('.player_volume_tooltip');
350   - $(_this.options.container).append(_this.options.template);
351   -
352   - if(options.source){
353   - _this.updateSource({source: options.source, callback: function(){ _this.log('update source') }});
354   - }
355   -
356   - _this.elements.currentVolume.width((60 / 100 * _this.elements.audioDom.volume * 100) + 'px');
357   -
358   - // 初始化话事件
359   - _this.events();
360   - },
361   - updateSource: function(o){
362   - var _this = this;
363   - // 重置
364   - _this.reset();
365   -
366   - // 更新音频来源
367   - _this.elements.audioDom.setAttribute('src', o.source);
368   -
369   - if(typeof o.callback == 'function'){
370   - o.callback();
371   - }
372   - },
373   - events: function() {
374   - var _this = this;
375   -
376   - // 调节声音大小
377   - _this.elements.volumeWrap.on("mouseenter", function(event) {
378   - event.preventDefault();
379   - }).on("mouseleave", function(event) {
380   - event.preventDefault();
381   - _this.elements.tipsVolume.css('display', 'none');
382   - _this.setvolume();
383   - }).on('mousemove', function(event) {
384   - event.preventDefault();
385   - if ((event.pageX - _this.elements.totalVolume.offset().left) > 0 && (event.pageX - _this.elements.totalVolume.offset().left) < (_this.elements.totalVolume.width() + 1)) {
386   - _this.elements.tipsVolume.css({
387   - 'display': 'block',
388   - "left": parseInt(event.pageX - _this.elements.totalVolume.offset().left + _this.elements.totalVolume.width() / 2 - 40, 10) + "px"
389   - });
390   - _this.elements.tipsVolume.find("p").html(_this.sumVolume(event) + " %")
391   - _this.elements.currentVolume.width(event.pageX - _this.elements.totalVolume.offset().left + "px");
392   - }
393   - }).on('mouseup', function(event) {
394   - event.preventDefault();
395   - _this.elements.currentVolume.width(event.pageX - _this.elements.totalVolume.offset().left + "px");
396   -
397   - _this.setvolume({
398   - event: event
399   - });
400   - });
401   -
402   - _this.elements.mutedButton.on('click', function(event) {
403   - event.preventDefault();
404   - /* Act on the event */
405   - _this.muted();
406   - });
407   -
408   - // 播放进度条
409   - if(_this.options.allowSeek){
410   - _this.elements.playProgressWrap.on('mousedown', function(event) {
411   - event.preventDefault();
412   - if (_this.elements.audioDom.paused) {
413   - _this.options.seekNum = 1;
414   - } else {
415   - _this.options.seekNum = 2;
416   - _this.pause();
417   - }
418   - // 鼠标按下就更新进度条
419   - _this.setPlayProgressWidth(event);
420   - }).on('mousemove', function(event) {
421   - event.preventDefault();
422   - // 判断是否已经开始移动 才会设置进度条
423   - _this.options.seekNum != 0 && _this.setPlayProgressWidth(event);
424   - }).on('mouseup', function(event) {
425   - event.preventDefault();
426   - // TODO 是否有必要在鼠标按键抬起的时候再次去更新播放进度条宽度
427   - // _this.setPlayProgressWidth(event);
428   - if (_this.options.seekNum == 1) {
429   - _this.pause();
430   - } else {
431   - _this.play();
432   - }
433   - _this.options.seekNum = 0;
434   - if(typeof _this.options.seekedCallback == 'function'){
435   - _this.options.seekedCallback({'status': _this.elements.audioDom.seeked});
436   - }
437   - })
438   - }else{
439   - _this.elements.playProgressWrap.on('mousedown', function(event) {
440   - event.preventDefault();
441   - if(typeof _this.options.seekedCallback == 'function'){
442   - _this.options.seekedCallback();
443   - }else{
444   - alert('暂时不支持拖拽');
445   - return false;
446   - }
447   - })
448   - }
449   -
450   - // 播放暂停
451   - _this.elements.playButton.on('click', function(event) {
452   - event.preventDefault();
453   - _this.toggleplay({
454   - playCallback: function(){ _this.log('toggleplay：play') },
455   - pauseCallback: function(){ _this.log('toggleplay：pause') }
456   - });
457   - })
458   -
459   - // 当音频的加载已放弃时
460   - _this.elements.audioDom.onabort = function() {
461   - _this.log('onabort');
462   -
463   - _this.reset();
464   - }
465   -
466   - // 当浏览器可以播放音频时
467   - _this.elements.audioDom.oncanplay = function() {
468   - _this.log('oncanplay');
469   - // 判断音频加载完毕
470   - if (_this.elements.audioDom.readyState > 0) {
471   - var duration = Math.round(_this.elements.audioDom.duration);
472   - var minutes = Math.floor(duration / 60);
473   - minutes = 10 <= minutes ? minutes : "0" + minutes;
474   - duration = Math.floor(duration % 60);
475   -
476   - _this.elements.totalTime.html(minutes + ":" + (10 <= duration ? duration : "0" + duration));
477   -
478   - if(typeof _this.options.canplayCallback == 'function'){
479   - _this.options.canplayCallback({'status': true});
480   - }
481   - }
482   - }
483   -
484   - // 当浏览器正在下载音频时
485   - _this.elements.audioDom.onprogress = function() {
486   - _this.elements.loadProgress.width((_this.elements.audioDom.buffered.end(0) / _this.elements.audioDom.seekable.end(0)) * _this.elements.totalPlayProgress.width());
487   - };
488   -
489   - // 当浏览器开始查找音频时
490   - _this.elements.audioDom.onloadstart = function() {
491   - _this.log('onloadstart');
492   - }
493   -
494   - // 当音频已开始或不再暂停时
495   - _this.elements.audioDom.onplay = function() {
496   - _this.log('onplay');
497   - _this.elements.playButton.find('img').attr('src', '../images/pause.png');
498   - }
499   -
500   - // 当音频已暂停时
501   - _this.elements.audioDom.onpause = function() {
502   - _this.log('onpause');
503   - _this.elements.playButton.find('img').attr('src', '../images/play.png');
504   - }
505   -
506   - // 当目前的播放列表已结束时
507   - _this.elements.audioDom.onended = function() {
508   - _this.log('onended');
509   -
510   - if(typeof _this.options.endedCallback == 'function'){
511   - _this.options.endedCallback({'status': _this.elements.audioDom.ended});
512   - }
513   - }
514   -
515   - // 当用户开始移动/跳跃到音频中的新位置时
516   - _this.elements.audioDom.onseeking = function() {
517   - _this.log('onseeking');
518   - }
519   -
520   - // 当用户已移动/跳跃到音频中的新位置时
521   - _this.elements.audioDom.onseeked = function() {
522   - _this.log('onseeked');
523   - }
524   -
525   - // 当目前的播放位置已更改时
526   - _this.elements.audioDom.ontimeupdate = function() {
527   - _this.log('ontimeupdate');
528   - _this.timeupdate();
529   - }
530   -
531   - // 当音量已更改时
532   - _this.elements.audioDom.onvolumechange = function() {
533   - _this.log('onvolumechange');
534   - _this.setvolume();
535   - }
536   - },
537   - toggleplay: function(o) {
538   - var _this = this;
539   - if (_this.elements.audioDom.paused) {
540   - _this.play(o.playCallback);
541   - } else {
542   - _this.pause(o.pauseCallback);
543   - }
544   - },
545   - play: function(o) {
546   - var _this = this;
547   - _this.elements.audioDom.play();
548   - if (typeof o == 'function') {
549   - o({'status': _this.elements.audioDom.play});
550   - }
551   -
552   - if(typeof _this.options.playCallback == 'function'){
553   - _this.options.playCallback({'status': _this.elements.audioDom.play});
554   - }
555   - },
556   - pause: function(o) {
557   - var _this = this;
558   - _this.elements.audioDom.pause();
559   - if (typeof o == 'function') {
560   - o({'status': _this.elements.audioDom.play});
561   - }
562   -
563   - if(typeof _this.options.pauseCallback == 'function'){
564   - _this.options.pauseCallback({'status': _this.elements.audioDom.play});
565   - }
566   - },
567   - // 设置静音否
568   - muted: function() {
569   - var _this = this;
570   - if (_this.elements.audioDom.muted) {
571   - _this.elements.audioDom.muted = false;
572   - _this.elements.mutedButton.find('img').attr('src', '../images/volume.png');
573   - } else {
574   - _this.elements.audioDom.muted = true;
575   - _this.elements.mutedButton.find('img').attr('src', '../images/mute.png');
576   - }
577   -
578   - if(typeof _this.options.mutedCallback == 'function'){
579   - _this.options.mutedCallback({'status': _this.elements.audioDom.muted});
580   - }
581   - },
582   - // 设置声音大小
583   - setvolume: function(arguments) {
584   - var _this = this;
585   - if (!arguments) {
586   - _this.elements.currentVolume.width((_this.elements.totalVolume.width() / 100 * _this.elements.audioDom.volume * 100) + 'px');
587   - } else {
588   - if (arguments.event) {
589   - return _this.elements.audioDom.volume = _this.sumVolume(arguments.event) / 100;
590   - } else {
591   - // _this.log 需要优化
592   - _this.options.debuggers && console.error('缺少参数：arguments.event');
593   - return false;
594   - }
595   - }
596   - },
597   - // 设置播放进度条
598   - setPlayProgressWidth: function(argument) {
599   - var _this = this;
600   - if (!argument) {
601   - return false;
602   - }
603   -
604   - if ((argument.clientX - _this.elements.playProgressWrap.offset().left) > _this.elements.loadProgress.width()) {
605   - _this.elements.playProgress.width(_this.elements.loadProgress.width());
606   - } else {
607   - _this.elements.playProgress.width(argument.clientX - _this.elements.playProgressWrap.offset().left);
608   - _this.elements.audioDom.currentTime = (argument.clientX - _this.elements.playProgressWrap.offset().left) / _this.elements.totalPlayProgress.width() * _this.elements.audioDom.duration;
609   - }
610   - },
611   - // 播放时间更改
612   - timeupdate: function() {
613   - var _this = this;
614   -
615   - var currTime = Math.floor(_this.elements.audioDom.currentTime).toString();
616   - var duration = Math.floor(_this.elements.audioDom.duration).toString();
617   -
618   - _this.elements.currentTime.html(_this.formatTime(currTime));
619   -
620   - if (isNaN(duration)) {
621   - _this.elements.totalTime.html('00:00');
622   - } else {
623   - _this.elements.totalTime.html(_this.formatTime(duration));
624   - }
625   - _this.elements.playProgress.width((_this.elements.audioDom.currentTime / _this.elements.audioDom.duration) * $('.progress_bg').width());
626   - },
627   - // 格式化时间戳相关
628   - formatTime: function(secs, format) {
629   - var hr = Math.floor(secs / 3600);
630   - var min = Math.floor((secs - (hr * 3600)) / 60);
631   - var sec = Math.floor(secs - (hr * 3600) - (min * 60));
632   -
633   - if (min < 10) {
634   - min = "0" + min;
635   - }
636   - if (sec < 10) {
637   - sec = "0" + sec;
638   - }
639   -
640   - return min + ':' + sec;
641   - },
642   - // 计算音量
643   - sumVolume: function(event) {
644   - var _this = this;
645   - if (!event) {
646   - return false;
647   - }
648   - var num = event.pageX - _this.elements.totalVolume.offset().left;
649   - num = Math.max(0, Math.min(1, num / _this.elements.totalVolume.width()));
650   - num = parseInt(100 * num, 10);
651   - return num;
652   - },
653   - // 重置函数
654   - reset: function(){
655   - var _this = this;
656   -
657   - // 播放按钮 当前播放时间 总时间 音量 播放进度条 下载进度条
658   - _this.elements.playButton.find('img').attr('src', '../images/play.png');
659   - _this.elements.currentTime.html('00:00');
660   - _this.elements.totalTime.html('00:00');
661   - _this.elements.currentVolume.width(_this.elements.totalVolume);
662   - _this.elements.playProgress.width(0);
663   - _this.elements.loadProgress.width(0);
664   - },
665   - log: function(log){
666   - var _this = this;
667   -
668   - if(_this.options.debuggers){
669   - return console.info(log);
670   - }
671   - }
672   - }
673   - $(function() {
674   - $('[data-url]').on('click', function(event) {
675   - event.preventDefault();
676   - /* Act on the event */
677   -
678   - AUDIO.updateSource({
679   - source: $(this).data('url'),
680   - callback: function(){
681   -
682   - }
683   - });
684   - // AUDIO.play();
685   - });
686   -
687   - AUDIO.init({
688   - container: '#audioWrap'
689   - ,source: './Fade.mp3'
690   - ,debuggers: false
691   - ,allowSeek: false
692   - ,canplayCallback: function(){ console.log('canplayCallback') }
693   - ,playCallback: function(){ console.log('playCallback') }
694   - ,pauseCallback: function(){ console.log('pauseCallback') }
695   - ,seekedCallback: function(){ alert('认真一点了，快进也许会丢失一些精彩'); }
696   - ,endedCallback: function(){ console.log('endedCallback') }
697   - ,mutedCallback: function(data){ console.log(data) }
698   - });
699   - });
700   - </script>
701   -</body>
702   -
703   -</html>