HTML5 有兩個很炫的元素，就是Audio和 Video,可以用他們在頁面上創建音頻播放器和視頻播放器，制作一些效果很不錯的應用。
無論是視屏還是音頻，都是一個容器文件，包含了一些音頻軌道，視頻軌道和一些元數據，這些是和你的視頻或者音頻控件綁定到一塊的，這樣才形成了一個完整的播放組件。
瀏覽器支持情況：
| 瀏覽器 |
支持情況 |
編解碼器 |
| Chrome |
3.0 |
Theora 、 Vorbis 、Ogg H.264 、 AAC 、MPEG4 |
| FireFox |
3.5 |
Theora 、 Vorbis 、Ogg |
| IE |
不支持 |
無 |
| Opera |
10.5 |
Theora 、 Vorbis 、Ogg（10.5） VP8、Vorbis 、 WebM（10.6） |
| Safari |
3.2 |
H.264 、 ACC 、MPEG4 |
常用的控制函數：
| 函數 |
動作 |
| load() |
加載音頻、視頻軟件 |
| play() |
加載並播放音頻、視頻文件或重新播放暫停的的音頻、視頻 |
| pause() |
暫停出於播放狀態的音頻、視頻文件 |
| canPlayType(obj) |
測試是否支持給定的Mini類型的文件 |
只讀的媒體屬性：
| 只讀屬性 |
值 |
| duration |
獲取媒體文件的播放時長，以s為單位，如果無法獲取，則為NaN |
| paused |
如果媒體文件被暫停，則返回true，否則返回false |
| ended |
如果媒體文件播放完畢，則返回true |
| startTime |
返回起始播放時間 |
| error |
返回錯誤代碼 |
| currentSrc |
以字符串形式返回正在播放或已加載的文件 |
可腳本控制的屬性值：
| 屬性 |
值 |
| autoplay |
自動播放已經加載的的媒體文件 |
| loop |
為true的時候則設定為自動播放 |
| currentTime |
以s為單位返回從開始播放到目前所花的時間 |
| controls |
顯示或者隱藏用戶控制界面 |
| volume |
音量值,從0.0至1.0之間 |
| muted |
設置是否靜音 |
| autobuffer |
是否進行緩沖加載 |
首先,我們在頁面中添加一個音頻元素：
<audio src="../Media/The sound of silence.mp3" controls="controls" autoplay="autoplay"></audio>
在谷歌Chrome瀏覽器中的效果如下：
controls指的是用戶控制界面,所以我們可以在Web頁面中看到上面這個操作面板，包括播放和暫停，播放進度條，音量進度條，和進度時間顯示等。autoplay 指的是自動播發已加載的媒體文件，所以我們一打開頁面就可以直接播放了
HTML5 Audio API 的界面很強大，功能也很完善，但是我們的Web應用會根據不同的需求、設計風格和界面顏色來要求不同的播放器樣式和功能，這就要求我們能基於他們的API 設計出靈活的應用。
接下來，我們設計一款適合我們離線工作系統需要的播放器：
View Code
1 //在頁面放置一個audio元素，因為我們使用自己設計的播放界面，所以這邊不用他們的controls。 2 <audio id="myMusic" > </audio> 3 4 //這邊放置一個隱藏域，他的作用是存放媒體文件暫停的時間點 5 <input id="PauseTime" type="hidden" /> 6 7 //編寫音樂盒的界面 8 <div class="MusicBox" > 9 10 <div class="LeftControl" ></div> //上一個媒體文件的控制圖標 11 <div id="MainControl" class="MainControl" ></div> //開始和暫停的控制圖標 12 <div class="RightControl" ></div> //下一個媒體文件的控制圖標 13 14 <div class="ProcessControl">//進度條 15 <div class="SongName">Ben's Music Box!</div> //媒體文件標題 16 <div class="SongTime">00:00 | 00:00</div> //時間進度 17 <div class="Process" ></div> //全部時長的進度條 18 <div class="ProcessYet"></div> //已播放時長的進度條 19 </div> 20 21 <div class="VoiceEmp"></div> //靜音圖標 22 <div class="VoidProcess" ></div> //全音量進度條 23 <div class="VoidProcessYet" ></div> //當前音量進度條 24 <div class="VoiceFull" ></div>//全音量圖標 25 <div class="ShowMusicList" ></div> //顯示或隱藏媒體文件列表圖標 26 27 </div> 28 29 30 <div class="MusicList"> //媒體文件列表區域 31 <div class="Author"></div> //當前媒體文件的 32 <div class="List"> //媒體文件列表 33 34 <div class="Single" > //單個媒體文件 35 <span class="SongName" KV="Fate" >01.Fate</span> 36 </div> 37 38 </div> 39 </div>
畫好這個結構之后，我們就來寫相應的CSS樣式了：
View Code
1 //這是音樂盒整體框架 2 3 .MusicBox 4 5 { 6 7 font: 9px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica; 8 9 background-color: #212121; 10 11 12 13 //設置漸變的顏色，左上到左下，顏色從#1B1B1B 到 #212121。 14 15 background-image: -webkit-gradient(linear, left top, left bottom, from(#1B1B1B), to(#212121)); 16 17 background-image: -webkit-linear-gradient(top, #1B1B1B, #212121); 18 19 background-image: -moz-linear-gradient(top, #1B1B1B, #212121); 20 21 background-image: -ms-linear-gradient(top, #1B1B1B, #212121); 22 23 background-image: -o-linear-gradient(top, #1B1B1B, #212121); 24 25 background-image: linear-gradient(top, #1B1B1B, #212121); 26 27 28 29 //設置邊框的弧度值，為3px 30 31 -moz-border-radius: 3px; 32 33 -webkit-border-radius: 3px; 34 35 border-radius: 3px; 36 37 38 39 40 41 42 43 44 45 /*陰影*/ 46 47 text-shadow: 0 1px 0 rgba(255,255,255,0.5); 48 49 -webkit-box-shadow: 10px 10px 25px #ccc; 50 51 -moz-box-shadow: 10px 10px 25px #ccc; 52 53 box-shadow: 10px 10px 25px #ccc; 54 55 56 57 /*透明度*/ 58 59 opacity:0.9; 60 61 62 63 /*基本屬性*/ 64 65 border-width: 1px; 66 67 border-style: solid; 68 69 border-color: #488BF0 #488BF0 #488BF0 #488BF0; 70 71 width:810px; 72 73 height:40px; 74 75 padding:2px 5px; 76 77 position:absolute; 78 79 z-index:9; 80 81 } 82 83 84 85 //上一個媒體文件的控制圖標 86 87 .LeftControl 88 89 { 90 91 width:0px; 92 93 padding: 10px 10px 10px 10px; 94 95 float:left; 96 97 height:20px; 98 99 background:url(../Images/sk-dark.png) left 2px no-repeat; 100 101 margin-right:8px; 102 103 margin-left:10px; 104 105 } 106 107 .LeftControl:hover 108 109 { 110 111 background:url(../Images/sk-dark.png) left -30px no-repeat; 112 113 } 114 115 116 117 118 119 //下一個媒體文件的控制圖標 120 121 .RightControl 122 123 { 124 125 width:0px; 126 127 padding: 10px 10px 10px 10px; 128 129 float:left; 130 131 height:20px; 132 133 background:url(../Images/sk-dark.png) left -62px no-repeat; 134 135 margin-right:8px; 136 137 } 138 139 140 141 .RightControl:hover 142 143 { 144 145 background:url(../Images/sk-dark.png) left -93px no-repeat; 146 147 } 148 149 150 151 //音頻進度控制 152 153 （注意這邊有兩個高度為2px的div,一個是.Process 一個是.ProcessYet,用來顯示音頻播放的進度條，一個是顯示全部的音頻長度，長度是固定的;一個用來實時顯示播放的進度的） 154 155 .ProcessControl 156 157 { 158 159 width:500px; 160 161 padding: 5px 10px 10px 10px; 162 163 float:left; 164 165 height:20px; 166 167 margin-right:12px; 168 169 color:#ffffff; 170 171 } 172 173 174 175 .ProcessControl .SongName { float:left; } 176 177 .ProcessControl .SongTime { float:right; } 178 179 .ProcessControl .Process 180 181 { 182 183 width: 500px; 184 185 float: left; 186 187 height: 2px; 188 189 cursor: pointer; 190 191 background-color:#000000; 192 193 margin-top:7px; 194 195 } 196 197 198 199 .ProcessControl .ProcessYet 200 201 { 202 203 width: 0px; 204 205 position:absolute; 206 207 height: 2px; 208 209 left:131px; 210 211 top:30px; 212 213 cursor: pointer; 214 215 background-color:#7A8093; 216 217 } 218 219 220 221 //靜音圖標 222 223 .VoiceEmp 224 225 { 226 227 width:0px; 228 229 padding: 10px 10px 10px 10px; 230 231 float:left; 232 233 height:17px; 234 235 background:url(../Images/sk-dark.png) -28px -180px no-repeat; 236 237 margin-right:2px; 238 239 } 240 241 .VoiceEmp:hover 242 243 { 244 245 background:url(../Images/sk-dark.png) -28px -212px no-repeat; 246 247 } 248 249 250 251 //總音量進度條 252 253 .VoidProcess 254 255 { 256 257 width: 66px; 258 259 height: 2px; 260 261 cursor: pointer; 262 263 background-color:#000; 264 265 float:left; 266 267 margin-top:19px; 268 269 margin-right:6px; 270 271 } 272 273 274 275 //當前音量進度條 276 277 .VoidProcessYet 278 279 { 280 281 width: 66px; 282 283 position:absolute; 284 285 height: 2px; 286 287 left:675px; 288 289 top:21px; 290 291 cursor: pointer; 292 293 background-color:#7A8093; 294 295 } 296 297 298 299 //全音量圖標 300 301 .VoiceFull 302 303 { 304 305 width:0px; 306 307 padding: 10px 10px 10px 10px; 308 309 float:left; 310 311 height:17px; 312 313 background:url(../Images/sk-dark.png) -28px -116px no-repeat; 314 315 } 316 317 318 319 .VoiceFull:hover 320 321 { 322 323 background:url(../Images/sk-dark.png) -28px -148px no-repeat; 324 325 } 326 327 328 329 330 331 //呈現出播放圖標 332 333 .MainControl 334 335 { 336 337 width:25px; 338 339 padding: 10px 15px 5px 10px; 340 341 float:left; 342 343 height:20px; 344 345 background:url(../Images/sk-dark.png) -80px -130px no-repeat; 346 347 } 348 349 350 351 .MainControl:hover 352 353 { 354 355 background:url(../Images/sk-dark.png) -80px -166px no-repeat; 356 357 } 358 359 360 361 //呈現出暫停或停止圖標 362 363 .StopControl 364 365 { 366 367 width:14px; 368 369 padding: 10px 10px 5px 10px; 370 371 float:left; 372 373 height:20px; 374 375 background:url(../Images/sk-dark.png) -50px -130px no-repeat; 376 377 margin-right:16px; 378 379 } 380 381 .StopControl:hover 382 383 { 384 385 background:url(../Images/sk-dark.png) -50px -165px no-repeat; 386 387 } 388 389 //顯示多媒體文件列表的控制圖標 390 391 .ShowMusicList 392 393 { 394 395 width:10px; 396 397 padding: 10px 10px 5px 10px; 398 399 float:left; 400 401 height:10px; 402 403 background:url(../Images/sk-dark.png) -20px 0 no-repeat; 404 405 margin:5px 0 0 12px; 406 407 cursor:pointer; 408 409 } 410 411 412 413 .ShowMusicList:hover 414 415 { 416 417 background:url(../Images/sk-dark.png) -20px -29px no-repeat; 418 419 } 420 421 422 423 //文件列表區域的樣式代碼 424 425 .MusicList 426 427 { 428 429 font: 9px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica; 430 431 background-color: #212121; 432 433 background-image: -webkit-gradient(linear, left top, left bottom, from(#1B1B1B), to(#212121)); 434 435 background-image: -webkit-linear-gradient(top, #1B1B1B, #212121); 436 437 background-image: -moz-linear-gradient(top, #1B1B1B, #212121); 438 439 background-image: -ms-linear-gradient(top, #1B1B1B, #212121); 440 441 background-image: -o-linear-gradient(top, #1B1B1B, #212121); 442 443 background-image: linear-gradient(top, #1B1B1B, #212121); 444 445 446 447 -moz-border-radius: 3px; 448 449 -webkit-border-radius: 3px; 450 451 border-radius: 3px; 452 453 454 455 text-shadow: 0 1px 0 rgba(255,255,255,0.5); 456 457 458 459 border-width: 1px; 460 461 border-style: solid; 462 463 border-color: #488BF0 #488BF0 #488BF0 #488BF0; 464 465 466 467 width:600px; 468 469 height:200px; 470 471 472 473 /*陰影*/ 474 475 -webkit-box-shadow: 10px 10px 25px #ccc; 476 477 -moz-box-shadow: 10px 10px 25px #ccc; 478 479 box-shadow: 10px 10px 25px #ccc; 480 481 482 483 /*透明度*/ 484 485 opacity:0.9; 486 487 488 489 /*基本性質*/ 490 491 padding:2px 5px; 492 493 position:absolute; 494 495 z-index:1000; 496 497 display:none; 498 499 } 500 501 502 503 .MusicList .Author 504 505 { 506 507 font: 9px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica; 508 509 background-color: #212121; 510 511 background-image:url(../Images/Eson.jpg); 512 513 514 515 -moz-border-radius: 3px; 516 517 -webkit-border-radius: 3px; 518 519 border-radius: 3px; 520 521 522 523 width:158px; 524 525 height:200px; 526 527 float:left; 528 529 } 530 531 532 533 .MusicList .List 534 535 { 536 537 font: 9px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica; 538 539 background-color: #212121; 540 541 -moz-border-radius: 3px; 542 543 -webkit-border-radius: 3px; 544 545 border-radius: 3px; 546 547 548 549 width:410px; 550 551 height:180px; 552 553 float:right; 554 555 overflow:hidden; 556 557 padding:10px 13px; 558 559 color:#fff; 560 561 } 562 563 564 565 .MusicList .List .Single 566 567 { 568 569 width:100%; 570 571 float:left; 572 573 overflow:hidden; 574 575 height:15px; 576 577 font-size:13px; 578 579 cursor:pointer; 580 581 margin-bottom:8px; 582 583 } 584 585 586 587 .MusicList .List .Single .SongName 588 589 { 590 591 width:90%; 592 593 float:left; 594 595 }
頁面的元素和CSS樣式寫完之后，就可以看到一個漂亮的音樂播放器的模型了，如圖：
只是現在的播放器上面的按鈕都是空殼，沒有任何功能。所以，現在我們就來添加這些功能 ， 腳本的頂層框架就用Jquery。
View Code
1 $(document).ready(function () { 2 3 //獲取音頻工具 4 5 var audio = document.getElementById("myMusic"); 6 7 //開始，暫停按鈕 8 9 $("#MainControl")._toggle(function () { 10 11 $(this).removeClass("MainControl").addClass("StopControl"); 12 13 if (audio.src == "") { 14 15 var Defaultsong = $(".Single .SongName").eq(0).attr("KV"); 16 17 $(".MusicBox .ProcessControl .SongName").text(Defaultsong); 18 19 $(".Single .SongName").eq(0).css("color", "#7A8093"); 20 21 audio.src = "../Media/" + Defaultsong + ".mp3"; 22 23 } 24 25 audio.play(); 26 27 TimeSpan(); 28 29 }, function () { 30 31 $(this).removeClass("StopControl").addClass("MainControl"); 32 33 audio.pause(); 34 35 }); 36 37 38 39 40 41 //歌曲列表的選擇操作 42 43 $(".MusicList .List .Single .SongName").click(function () { 44 45 $(".MusicList .List .Single .SongName").css("color", "#fff"); 46 47 $("#MainControl").removeClass("MainControl").addClass("StopControl"); 48 49 $(this).css("color", "#7A8093"); 50 51 var SongName = $(this).attr("KV"); 52 53 $(".MusicBox .ProcessControl .SongName").text(SongName); 54 55 audio.src = "../Media/" + SongName + ".mp3"; 56 57 audio.play(); 58 59 TimeSpan(); 60 61 }); 62 63 64 65 //左前進按鈕 66 67 $(".LeftControl").click(function () { 68 69 $(".MusicList .List .Single .SongName").each(function () { 70 71 if ($(this).css("color") == "rgb(122, 128, 147)") { 72 73 var IsTop = $(this).parent(".Single").prev(".Single").length == 0 ? true : false; //檢查是否是最頂端的歌曲 74 75 var PrevSong; 76 77 if (IsTop) { 78 79 PrevSong = $(".Single").last().children(".SongName").attr("KV"); 80 81 $(".Single").last().children(".SongName").css("color", "#7A8093"); 82 83 } 84 85 else { 86 87 PrevSong = $(this).parent(".Single").prev(".Single").children(".SongName").attr("KV"); 88 89 $(this).parent(".Single").prev(".Single").children(".SongName").css("color", "#7A8093"); 90 91 } 92 93 94 95 audio.src = "../Media/" + PrevSong + ".mp3"; 96 97 $(".MusicBox .ProcessControl .SongName").text(PrevSong); 98 99 $(this).css("color", "#fff"); 100 101 audio.play(); 102 103 return false; //代表break 104 105 } 106 107 }) 108 109 }); 110 111 112 113 //右前進按鈕 114 115 $(".RightControl").click(function () { 116 117 $(".MusicList .List .Single .SongName").each(function () { 118 119 if ($(this).css("color") == "rgb(122, 128, 147)") { 120 121 var IsBottom = $(this).parent(".Single").next(".Single").length == 0 ? true : false; //檢查是否是最尾端的歌曲 122 123 var NextSong; 124 125 if (IsBottom) { 126 127 NextSong = $(".Single").first().children(".SongName").attr("KV"); 128 129 $(".Single").first().children(".SongName").css("color", "#7A8093"); 130 131 } 132 133 else { 134 135 NextSong = $(this).parent(".Single").next(".Single").children(".SongName").attr("KV"); 136 137 $(this).parent(".Single").next(".Single").children(".SongName").css("color", "#7A8093"); 138 139 } 140 141 142 143 audio.src = "../Media/" + NextSong + ".mp3"; 144 145 $(".MusicBox .ProcessControl .SongName").text(NextSong); 146 147 $(this).css("color", "#fff"); 148 149 audio.play(); 150 151 return false; //代表break 152 153 } 154 155 }) 156 157 }); 158 159 160 161 //靜音按鈕 162 163 $(".VoiceEmp").click(function () { 164 165 $(".VoidProcessYet").css("width", "0"); 166 167 audio.volume = 0; 168 169 }); 170 171 172 173 //滿音量按鈕 174 175 $(".VoiceFull").click(function () { 176 177 $(".VoidProcessYet").css("width", "66px"); 178 179 audio.volume = 1; 180 181 }); 182 183 184 185 /* 186 187 之前一直考慮進度條的原理，這邊進度條的做法啟發自騰訊一款播放器的做法，采用兩個2px高度的div，重疊， 188 189 上面那個與下面那個div的顏色不一樣，用於區分進度,頂層div的width是根據播放的長度來調整的，width越長，說明播放越長， 190 191 知道上層的div完全覆蓋下面的div，達到長度的一致，說明播放完畢。我們的播放進度條和音量進度條都是這樣做的 192 193 */ 194 195 196 197 // 音頻進度條事件（進度增加） 198 199 $(".Process").click(function (e) { 200 201 202 203 //播放進度條的基准參數 204 205 var Process = $(".Process").offset(); 206 207 var ProcessStart = Process.left; 208 209 var ProcessLength = $(".Process").width(); 210 211 212 213 214 215 var CurrentProces = e.clientX - ProcessStart; 216 217 DurationProcessRange(CurrentProces / ProcessLength); 218 219 $(".ProcessYet").css("width", CurrentProces); 220 221 }); 222 223 224 225 //音頻進度條事件（進度減少） 226 227 $(".ProcessYet").click(function (e) { 228 229 230 231 //播放進度條的基准參數 232 233 var Process = $(".Process").offset(); 234 235 var ProcessStart = Process.left; 236 237 var ProcessLength = $(".Process").width(); 238 239 240 241 var CurrentProces = e.clientX - ProcessStart; 242 243 DurationProcessRange(CurrentProces / ProcessLength); 244 245 $(".ProcessYet").css("width", CurrentProces); 246 247 }); 248 249 250 251 //音量進度條事件（進度增加） 252 253 $(".VoidProcess").click(function (e) { 254 255 //音量進度條的基准參數 256 257 var VoidProcess = $(".VoidProcess").offset(); 258 259 var VoidProcessStart = VoidProcess.left; 260 261 var VoidProcessLength = $(".VoidProcess").width(); 262 263 264 265 var CurrentProces = e.clientX - VoidProcessStart; 266 267 VolumeProcessRange(CurrentProces / VoidProcessLength); 268 269 $(".VoidProcessYet").css("width", CurrentProces); 270 271 }); 272 273 274 275 //音量進度條時間（進度減少） 276 277 $(".VoidProcessYet").click(function (e) { 278 279 //音量進度條的基准參數 280 281 var VoidProcess = $(".VoidProcess").offset(); 282 283 var VoidProcessStart = VoidProcess.left; 284 285 var VoidProcessLength = $(".VoidProcess").width(); 286 287 288 289 var CurrentProces = e.clientX - VoidProcessStart; 290 291 VolumeProcessRange(CurrentProces / VoidProcessLength); 292 293 $(".VoidProcessYet").css("width", CurrentProces); 294 295 }); 296 297 298 299 //顯示或隱藏多媒體文件列表事件 300 301 $(".ShowMusicList").toggle(function () { 302 303 $(".MusicList").show(); 304 305 306 307 var MusicBoxRight = $(".MusicBox").offset().left + $(".MusicBox").width(); 308 309 var MusicBoxBottom = $(".MusicBox").offset().top + $(".MusicBox").height(); 310 311 $(".MusicList").css("left", MusicBoxRight - $(".MusicList").width()); 312 313 $(".MusicList").css("top", MusicBoxBottom + 15); 314 315 }, function () { 316 317 $(".MusicList").hide(); 318 319 }); 320 321 322 323 324 325 //監聽媒體文件結束的事件（ended），這邊一首歌曲結束就讀取下一首歌曲，實現播放上的循環播放 326 327 audio.addEventListener('ended', function () { 328 329 $(".MusicList .List .Single .SongName").each(function () { 330 331 if ($(this).css("color") == "rgb(122, 128, 147)") { 332 333 var IsBottom = $(this).parent(".Single").next(".Single").length == 0 ? true : false; //檢查是否是最尾端的歌曲 334 335 var NextSong; 336 337 if (IsBottom) { 338 339 NextSong = $(".Single").first().children(".SongName").attr("KV"); 340 341 $(".Single").first().children(".SongName").css("color", "#7A8093"); 342 343 } 344 345 else { 346 347 NextSong = $(this).parent(".Single").next(".Single").children(".SongName").attr("KV"); 348 349 $(this).parent(".Single").next(".Single").children(".SongName").css("color", "#7A8093"); 350 351 } 352 353 354 355 audio.src = "../Media/" + NextSong + ".mp3"; 356 357 $(".MusicBox .ProcessControl .SongName").text(NextSong); 358 359 $(this).css("color", "#fff"); 360 361 audio.play(); 362 363 return false; //代表break 364 365 } 366 367 }); 368 369 }, false); 370 371 372 373 374 375 }); 376 377 378 379 //音量進度條的轉變事件 380 381 function VolumeProcessRange(rangeVal) { 382 383 var audio = document.getElementById("myMusic"); 384 385 audio.volume = parseFloat(rangeVal); 386 387 } 388 389 390 391 //播放進度條的轉變事件 392 393 function DurationProcessRange(rangeVal) { 394 395 var audio = document.getElementById("myMusic"); 396 397 audio.currentTime = rangeVal * audio.duration; 398 399 audio.play(); 400 401 } 402 403 404 405 //播放事件 406 407 function Play(obj) { 408 409 var SongUrl = obj.getAttribute("SongUrl"); 410 411 var audio = document.getElementById("myMusic"); 412 413 audio.src = "../Media/" + SongUrl + ".mp3"; 414 415 audio.play(); 416 417 TimeSpan(); 418 419 } 420 421 422 423 //暫停事件 424 425 function Pause() { 426 427 var audio = document.getElementById("myMusic"); 428 429 $("#PauseTime").val(audio.currentTime); 430 431 audio.pause(); 432 433 } 434 435 436 437 //繼續播放事件 438 439 function Continue() { 440 441 var audio = document.getElementById("myMusic"); 442 443 audio.startTime = $("PauseTime").val(); 444 445 audio.play(); 446 447 } 448 449 450 451 //時間進度處理程序 452 453 function TimeSpan() { 454 455 var audio = document.getElementById("myMusic"); 456 457 var ProcessYet = 0; 458 459 setInterval(function () { 460 461 var ProcessYet = (audio.currentTime / audio.duration) * 500; 462 463 $(".ProcessYet").css("width", ProcessYet); 464 465 var currentTime = timeDispose(audio.currentTime); 466 467 var timeAll = timeDispose(TimeAll()); 468 469 $(".SongTime").html(currentTime + " | " + timeAll); 470 471 }, 1000); 472 473 } 474 475 476 477 //時間處理，因為時間是以為單位算的，所以這邊執行格式處理一下 478 479 function timeDispose(number) { 480 481 var minute = parseInt(number / 60); 482 483 var second = parseInt(number % 60); 484 485 minute = minute >= 10 ? minute : "0" + minute; 486 487 second = second >= 10 ? second : "0" + second; 488 489 return minute + ":" + second; 490 491 } 492 493 494 495 //當前歌曲的總時間 496 497 function TimeAll() { 498 499 var audio = document.getElementById("myMusic"); 500 501 return audio.duration; 502 503 }
至此，一款播放器做完了，默認執行的是列表循環播放，包含了上一首，下一首，播放，暫停，播放進度條調整，音量調進度條整，列表選擇等功能。播放的歌曲是固定的寫在列表里面的，我喜歡的ESON的照片也是貼上去的，這些都可以做成動態獲取或則與服務器交互，有興趣的可以去試一下，擴展一下。
本來准備在我們的離線工作系統中添加音頻播放器，后來需求變更，放棄了，所以這個版本不是完善的版本。視頻播放器的功能大同小異，也可以自己試試。
本文源碼下載：CRX_Mail_Audio