上圖便是這個音頻播放器的UI界面圖，里面還隱藏了一個歌曲的播放列表。整個播放器的UI除了大背景的人像圖和歌曲的星星評分使用了圖片其他全部由CSS和font-face繪制而成，看上去有難度的地方就只有CD和打碟器的制作了，在歌曲播放時CD和打碟器都是具有動畫交互效果的，這個在后面的部分會講解到。點擊播放器的CD可以打開播放列表噢~

因為這一期的教程主要是為了展示Html5新增的<audio>標簽和audio元素的Dom API的使用，所以播放器UI的繪制在這里就不詳細解釋了，有疑問的可以自行查看案例的CSS文件的注釋或者在下方留言。

一、播放、暫停、上一首、下一首、音量增減

二、點擊CD可以打開和關閉播放列表

三、可以拖動本地音樂文件到播放器進行播放

Html結構

 

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表