一種基于Web 的移動端音樂臺設計與實現(xiàn)

蘇州健雄職業(yè)技術學院 張子瑜

1 總體設計

本研究是模仿當下流行的某移動版的客戶端制作的移動音樂項目，包含歌手，收藏，推薦等功能，可以選擇自己喜愛的歌手和歌曲點擊播放，并實現(xiàn)了歌曲的暫停和播放，歌手封面，收藏夾等功能。

在研究的過程中發(fā)現(xiàn)用戶交互環(huán)節(jié)中用戶的使用感覺并不是很好，通過利用Vue- cli，Vuex，Vue- router 與axios 等組件實現(xiàn)優(yōu)化，利用Vue- cli 搭建框架，配合后臺完成用戶的點擊驗證，實現(xiàn)相關路由功能，實現(xiàn)歌曲的播放/ 暫停功能。

通過多個組件的互相作用，來實現(xiàn)優(yōu)化用戶體驗，避免音樂列表與歌手列表的丟失與重復，讓各個歌手與歌單實現(xiàn)互相對應。實現(xiàn)音樂進程的控制與播放暫停效果。

2 資源管理

在fonts 中放入字體文件同時在images 中放入歌曲與人物的預加載圖片。字體文件可以自行在網(wǎng)絡上搜尋下載心儀的款式，預加載圖片在這則是一張綠色加載有著音樂符的圖片。

在設計的過程中需要一些相同的參數(shù)，為了解決相同參數(shù)需要多次調用使用，因此直接將其定義為公共參數(shù)，把他們變?yōu)槟J的，其中就包括數(shù)據(jù)傳輸格式以json 格式傳輸，fmt：’json’字體標識符設置inCst：’utf8’與outCst：’utf- 8’以及算法的hash 值默認為5381。同時，為了后續(xù)方便校驗服務器請求到的歌曲數(shù)據(jù)是否與實際需求一樣的值，添加一個狀態(tài)值CODE_OK 如果趕回值為0 則對應著請求數(shù)據(jù)獲取正確。最后還添加了一項對音樂播放模式的選擇值pd，與此同時添加了三個預設order：按順序播放；loop：循環(huán)播放；random：隨機播放。

3 組件設計

有時由于網(wǎng)絡延遲或者其他的一些問題，網(wǎng)頁總會顯示不出來，為了優(yōu)化視覺與用戶體驗，添加了一個加載組件，同時添加了一張菊花加載圖1。

圖1 菊花加載圖

播放頁面樣式的具體設計

本設計采用比較時尚的設計，代碼結構如圖2，效果如圖3：

對歌曲播放的相關設計

圖2 M- player 頁面代碼結構

圖3 M- player 頁面效果

首先校驗歌曲是否處于準備狀態(tài)，即是否點擊播放歌曲。然后對進度條進行設計，由之前獲取到的歌曲時間與當前播放時間進行百分比計算，在進度條上設計預留一個按鈕，后續(xù)通過按鈕即可設置并拖動播放進度。如有歌單列表，通過判斷mode 的值，進行對播放模式單曲循環(huán)，列表循環(huán)與隨機播放的選擇效果設計。利用數(shù)組的位碼下標特性進行上一首下一首切換功能實現(xiàn)。

由m- player 設計的播放進度計算的算法計算，對按鈕位置進行固定，根據(jù)進度設置按鈕的位置，同時也可以調整按鈕的位置對歌曲播放的進度進行調整以達到調整歌曲播放的目的。中間利用tSt，tMv，tEd 對進度進行控制計算拖動后的百分比percent，然后將其傳回父組件m- player。而watch 在整個事件中起著監(jiān)聽百分比percent 的作用。

在頁面左上角有一個箭頭其作用是返回上一級的回退按鈕，在播放頁的中間和縮小后的播放器左側會有一個圓形的滾動的CD。他的設計效果是由播放時的暫停播放所傳入的值來決定的，當返回值為1 時即為暫停，同時CD 停止旋轉。在播放頁縮小后，左下角的CD 樣式外圍有一個圓環(huán)效果，該圓環(huán)實際是播放進度，通過進度的改變，該圓環(huán)的滾動距離也會隨之改變。

suggest 推薦搜索設計

首先獲取目前熱門詞條，根據(jù)不同的內容去請求不同的數(shù)據(jù)，調用getSearch接口處理數(shù)據(jù)，點擊歌手時拼接歌手信息。判斷當前歌手是誰，隨后將歌手信息存放在ret 數(shù)組中。與此同時歌曲信息也在其中。點擊歌曲查詢相關歌曲。

4 歌手頁面設計

indexSinger 頁面設計

在歌手頁面仿寫了top10 的歌手樣式，隨后將其他的歌手按照名字的首字母順序排列，同時在右側也有首字母篩選標識。具體頁面效果如圖4，結構代碼如圖5：

圖4 IndexSinger 頁面效果圖

圖5 IndexSinger 機構代碼singerDetail 頁面設計

圖6 SingerDetail 頁面效果圖

該頁面是由兩部分組成，上面三分之一部分是由歌手頭像海報組成，下面部分則是由歌手所唱的歌曲列表組成。在滑動歌曲列表時，超出的部分則用hidden 掩蓋掉。具體頁面效果如圖6：

5 效果驗證

在設計完成的App.vue 文件中只做了渲染組件的作用，將各個組件糅合在一起。main.js 中引入了不同的庫與文件，而router.js 中則做出了非常重要的路由管理與重新定向。最終的設計效果圖分別如圖8～10。

圖7 推薦頁效果圖

圖8 歌手頁效果圖

圖9 排行頁效果圖

圖10 搜索頁效果圖