上QQ阅读APP看书，第一时间看更新
3.2 范例——制作音乐播放器APP
本例将使用HTML 5的新元素audio播放音频。这里给出了一个实现简单在线音频播放器的场景，用户可以点击播放列表进行音乐切换。
使用Chrome浏览器打开网页文件，运行结果如图3.3所示。点击列表中第3首歌曲“LightMusic.mp3”，然后点击左下角的播放按钮，运行效果如图3.4所示。
图3.3 使用Chrome打开网页文件
图3.4 播放“LightMusic.mp3”
利用编辑器打开“3-3．做一个自己的在线音频播放器．html”文件，代码如下：
【代码3-3】
01 <! DOCTYPE HTML>
02 <html>
03 <head>
04 <style>
05 // .....．省略部分非关键样式，请参考下载资源源码
06 .list{ /* 播放列表样式 */
07 height:150px; font-size:15px;
08 border: 1px solid #464646;
09 border-radius: 3px; /* 圆角 */
10 -moz-border-radius: 3px;
11 -webkit-border-radius: 3px;
12 background-color: #F5F6F9;
13 margin-bottom:10px;
14 }
15 .run{ /* 当前正在播放 */
16 background-color:#4BA9E6 ! important;
17 background: url(../images/running.gif) no-repeat;
18 background-position:4px 3px;
19 }
20 .box{ /* 播放器外观 */
21 border: 1px solid #464646;
22 border-radius: 3px; /* 圆角 */
23 -moz-border-radius: 3px;
24 -webkit-border-radius: 3px;
25 padding: 20px;
26 /* 背景色线性渐变 */
27 background:-moz-linear-gradient(top, rgb(53, 111, 143), #f6f6f8);
28 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(53,
111, 143)), to(#f6f6f8));
29 }
30 </style>
31 </head>
32 <body>
33 <header><h2>做一个自己的在线音频播放器</h2></header>
34 <div class="box">
35 <div class="list">
36 <! -- 播放列表 -->
37 <ul>
38 <li class="run">Kalimba.mp3</li>
39 <li>MaidWithTheFlaxenHair.mp3</li>
40 <li>LightMusic.mp3</li>
41 </ul>
42 </div>
43 <div>
44 <! -- 播放器 -->
45 <audio src="../res/Kalimba.mp3" controls>非常抱歉，您的浏览器不支持
audio标签。</audio>
46 </div>
47 </div>
48 </body>
49 <script>
50 var slice = Array.prototype.slice,
51 audio = document.querySelector('audio'), // 音频播放元素
52 // 将获取的播放音频元素列表转化为数组
53 items = slice.call(document.querySelectorAll('.list li'),0),
54 run;
55 items.forEach(function (item) {
56 item.addEventListener('click', function () { // 监听元素的click事件
57 run = document.querySelector('li.run'); // 获取当前播放的元素
58 run.className = ''; // 取消之前元素播放状态
59 item.className = 'run'; // 为当前点击的音频加入正在播放样式
60 // 替换audio的地址为当前点击音频地址
61 audio.src = audio.src.replace(run.innerHTML, item.innerHTML);
62 });
63 });
64 </script>
65 </html>
代码第45行是播放器的核心，使用HTML 5新元素audio。audio元素有多种属性供使用，说明如下：
● autoplay：视频就绪后立即播放。
● controls：显示浏览器默认的播放器控件，如示例中的按钮。
● loop：某个文件完成播放后重复播放。
● preload：与页面一同进行加载，并预备播放。autoplay存在时则忽略该属性。
● src：指定媒体的地址。
代码第53行获取播放列表中的文件元素并转化为数组。代码第55行循环文件数组，监听每个元素的click事件。当用户点击列表文件时，给文件添加播放的样式类，并重新设置audio的src属性。此时，音乐被切换，并且所有播放状态被重置为初始状态。
提示
本例中并没有提及audio元素自身事件的相关使用。audio元素拥有比一般元素更多的事件状态，如pause、play、progress、waiting等。用户可以通过这些事件，编写更为复杂的自定义音频播放器。