本期的教程主要是為了展示Html5新增的
上圖便是這個音頻播放器的UI界面圖，裡面還隱藏了一個歌曲的播放列表。整個播放器的UI除了大背景的人像圖和歌曲的星星評分使用了圖片其他全部由CSS和font-face繪製而成，看上去有難度的地方就只有CD和打碟器的製作了，在歌曲播放時CD和打碟器都是具有動畫交互效果的，這個在後面的部分會講解到。點擊播放器的CD可以打開播放列表噢~
因為這一期的教程主要是為了展示Html5新增的<audio>標籤和audio元素的Dom API的使用，所以播放器UI的繪製在這裡就不詳細解釋了，有疑問的可以自行查看案例的CSS文件的註釋或者在下方留言。
主要功能：一、播放、暫停、上一首、下一首、音量增減
二、點擊CD可以打開和關閉播放列表
三、可以拖動本地音樂文件到播放器進行播放
Html結構
複製代碼