Commit 496be00ec3fc3005698f102af6defa0f0f00dfbc
1 parent
f83fd6f3
no message
Showing
1 changed file
with
0 additions
and
703 deletions
audio/index.html deleted
100644 → 0
| 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> |