基于web的音樂播放器的設(shè)計(jì)與實(shí)現(xiàn)

鄧海文

關(guān)鍵詞：HTML5；vue；webpack

中圖分類號：TP37 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2018）29-0098-02

1 背景

音樂是情感的衍生品，它代表著人們的內(nèi)心感受。音樂播放網(wǎng)站是人們經(jīng)常使用的平臺之一，通過音樂平臺人們可以放松心情，感受生活的喜怒哀樂，得到精神上的升華，這大大推動了各式各樣音樂播放軟件的產(chǎn)生，尤其是基于web的音樂播放器。課題開發(fā)了一個功能完善，界面美觀，操作簡單的音樂播放器。

2 系統(tǒng)設(shè)計(jì)

2.1 系統(tǒng)功能分析

項(xiàng)目要支持大多數(shù)音樂文件的格式，還要有豐富的音樂資源。項(xiàng)目設(shè)計(jì)的預(yù)期實(shí)現(xiàn)功能有：支持大多數(shù)音樂格式、當(dāng)前音樂播放進(jìn)度可以進(jìn)行空盒子。顯示播放總時長和當(dāng)前播放時長、兼容各大瀏覽器，登錄注冊、收藏音樂等，使用戶更輕松方便進(jìn)行音樂試聽。

音樂播放器主要實(shí)現(xiàn)功能描述如下：

1）歌曲播放控制，就是改變當(dāng)前歌曲的狀態(tài)及歌曲信息。

2）時間控制，界面上要有歌曲總長度和當(dāng)前進(jìn)度，并且可以通過手動拖拽來改變當(dāng)期那進(jìn)度。

3）歌詞同步，顯示當(dāng)前播放進(jìn)度對應(yīng)的歌詞信息。

4）跳轉(zhuǎn)頁面是歌曲狀態(tài)不變，即首頁跳轉(zhuǎn)列表詳情，之前播放的歌曲不變，播放進(jìn)度不變。這是通過vuex來存儲當(dāng)前歌曲播放的所有信息來實(shí)現(xiàn)的。

5）搜索功能，用戶可以通過關(guān)鍵詞或歌曲名來搜索歌曲，點(diǎn)擊搜索后會返回所有符合要求的歌曲列表。

6）聲音控制，調(diào)整歌曲音量的大小。

7）皮膚控制，可以自定義皮膚，選擇自己中意的樣式，也有默認(rèn)樣式，即歌手寫真。

8）注冊登錄。

2.2 系統(tǒng)功能結(jié)構(gòu)圖

在綜合系統(tǒng)功能分析的基礎(chǔ)上，得到系統(tǒng)的功能結(jié)構(gòu)圖如下：

1）項(xiàng)目整體：該項(xiàng)目有兩個實(shí)體，即管理員，用戶。主要行為有：管理員登錄，管理員管理后臺數(shù)據(jù)；用戶注冊，用戶登錄，在線試聽。管理員登錄后才能進(jìn)行相關(guān)的后臺數(shù)據(jù)，如查詢用戶信息，添加或?qū)徍讼鄳?yīng)歌曲，修改項(xiàng)目中歌曲對應(yīng)的詳細(xì)信息，如歌曲名稱，歌曲播放鏈接，歌曲對應(yīng)海報等，及時更新后臺數(shù)據(jù)。而用戶則必須注冊后臺才能自動存入用戶信息，以便登錄時可以在線試聽，下載，收藏歌曲，和記錄該用戶賬號的歷史記錄，用戶在線試聽無需登錄就可進(jìn)行，點(diǎn)擊相應(yīng)歌曲，就會根據(jù)歌曲hash值來向后臺請求該歌曲的詳細(xì)信息，如圖1所示：

2）用戶：針對用戶來說，在線試聽包括以下功能，選擇歌曲，鈴聲訂閱，歌曲暫停播放，歌詞同步，歌曲進(jìn)度控制，下載歌曲，收藏歌曲。用戶通過以上功能來體驗(yàn)歌曲，放松心情。如圖2所示：

3） 管理員：后臺管理員主要負(fù)責(zé)歌曲審核，添加歌曲，管理用戶信息。

① 歌曲審核：添加歌曲之前管理員要審核歌曲信息，例如歌曲是否存在，歌曲是否健康，歌手，歌詞是否正確，信息是否完整等，通過后才可進(jìn)行添加。

② 添加歌曲：當(dāng)有新的歌曲時，管理員要添加該歌曲到數(shù)據(jù)庫中，比如歌曲名稱，歌手，歌曲播放鏈接，歌曲帶時間軸的歌詞，歌曲對應(yīng)海報，歌曲分裂等一系列歌曲信息。

③ 管理用戶信息：進(jìn)入后臺首頁，管理用戶的登錄信息和登錄時進(jìn)行的操作，比如當(dāng)用戶注冊時，用戶初始信息存入數(shù)據(jù)庫，當(dāng)用戶更改密碼時要及時更新數(shù)據(jù)庫，當(dāng)用戶進(jìn)行相應(yīng)的操作，比如收藏歌曲，訂閱彩鈴等，這些行為也要存儲在后臺用戶數(shù)據(jù)中，以便用戶查看或進(jìn)行其他行為。如圖3所示：

3 系統(tǒng)部分功能的實(shí)現(xiàn)與程序的編制

系統(tǒng)主要包含以下功能模塊：注冊模塊、登錄模塊、歌曲搜索模塊、歌曲播放控制模塊、歌曲在線列表模塊等模塊。以下為部分模塊的界面和實(shí)現(xiàn)部分代碼。

3.1 歌曲搜索模塊

作為一個音樂播放器，歌曲搜索功能是必不可少的，通過輸入歌曲名稱，歌手名字或關(guān)鍵詞后點(diǎn)擊搜索按鈕來向后臺請求數(shù)據(jù)，返回符合條件的數(shù)據(jù)總數(shù)和歌曲列表。例如輸入王杰點(diǎn)擊搜索，搜索后界面如圖4所示。向后臺請求數(shù)據(jù)的代碼如圖5所示。

其中this.keyword是通過vue雙向的雙向數(shù)據(jù)綁定來獲取輸入框的value值，在請求數(shù)據(jù)時作為參數(shù)向后臺請求數(shù)據(jù)。

3.2 播放控制模塊

player組件中有點(diǎn)擊下一曲功能，歌曲詳情頁有點(diǎn)擊上一曲/下一曲功能，vuex中存在一個全局變量songIndex，當(dāng)點(diǎn)擊上一曲時，讓songIndex--，當(dāng)點(diǎn)擊下一曲時，songIndex++，界面如圖6所示：

點(diǎn)擊上一曲和下一曲實(shí)現(xiàn)的具體代碼如圖7所示：

點(diǎn)擊上一曲播放調(diào)用函數(shù)prev（），點(diǎn)擊下一曲播放調(diào)用函數(shù)next（），這些函數(shù)都放在公共空間的actions中，以便在每個頁面都可以調(diào)用這些函數(shù)。

該播放器經(jīng)試用，功能基本達(dá)到了要求，完全能夠適應(yīng)互聯(lián)網(wǎng)音樂播放器的一般要求。但界面還可以制作更精美，此項(xiàng)目對于設(shè)計(jì)與制作一個基于web的其他小程序具有參考意義。

參考文獻(xiàn)：

[1] 曲大旗. 基于Android的手機(jī)音樂播放器的設(shè)計(jì)與實(shí)現(xiàn)[Z].

[2] 李光毅. 中文高性能響應(yīng)式Web開發(fā)實(shí)戰(zhàn)[M]. 北京： 人民郵電出版社， 2016.

[3] 賈錚. HTML+CSS網(wǎng)頁布局開發(fā)指南[M]. 北京： 清華大學(xué)出版社， 2008.

[4] 謝希仁. 計(jì)算機(jī)網(wǎng)絡(luò)[M]. 北京： 電子工業(yè)出版社， 2003.

[5] Bob Quinn， Dave Shute. Windows Sockets網(wǎng)絡(luò)編程[M]. 徐磊， 譯.北京： 機(jī)械工業(yè)出版社， 2012.

【通聯(lián)編輯：謝媛媛】