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

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

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

二、點(diǎn)擊CD可以打開和關(guān)閉播放列表

三、可以拖動(dòng)本地音樂文件到播放器進(jìn)行播放

Html結(jié)構(gòu)

 

發(fā)表評論 共有條評論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表