基于web的音樂播放器的設計與實現(共4頁)

1、精選優(yōu)質文檔-傾情為你奉上基于web的音樂播放器的設計與實現作者：鄧海文來源：電腦知識與技術2018年第29期        摘要：設計并實現了一個基于web的音樂播放器。音樂播放器以vue為主要框架，以vue-cli腳手架和webpack的主要框架來構建項目原型，主要使用mint-ui、swiper插件、音頻控制，相關技術是html5、css、javascript和zepto.js、touch.js、vuex、node.js、express等等。該項目實現了音樂播放、音樂暫停、歌曲切換、歌詞同步、歌曲快速向前和倒

2、帶、歌曲搜索、歌曲收藏、歌曲下載還有登錄注冊等功能。        關鍵詞：HTML5；vue；webpack        中圖分類號：TP37 文獻標識碼：A 文章編號：1009-3044（2018）29-0098-02        1 背景        音樂是情感的衍生

3、品，它代表著人們的內心感受。音樂播放網站是人們經常使用的平臺之一，通過音樂平臺人們可以放松心情，感受生活的喜怒哀樂，得到精神上的升華，這大大推動了各式各樣音樂播放軟件的產生，尤其是基于web的音樂播放器。課題開發(fā)了一個功能完善，界面美觀，操作簡單的音樂播放器。        2 系統(tǒng)設計        2.1 系統(tǒng)功能分析        項目要支持大多數音樂

4、文件的格式，還要有豐富的音樂資源。項目設計的預期實現功能有：支持大多數音樂格式、當前音樂播放進度可以進行空盒子。顯示播放總時長和當前播放時長、兼容各大瀏覽器，登錄注冊、收藏音樂等，使用戶更輕松方便進行音樂試聽。        音樂播放器主要實現功能描述如下：        1）歌曲播放控制，就是改變當前歌曲的狀態(tài)及歌曲信息。        2）時間控制，界面

5、上要有歌曲總長度和當前進度，并且可以通過手動拖拽來改變當期那進度。        3）歌詞同步，顯示當前播放進度對應的歌詞信息。        4）跳轉頁面是歌曲狀態(tài)不變，即首頁跳轉列表詳情，之前播放的歌曲不變，播放進度不變。這是通過vuex來存儲當前歌曲播放的所有信息來實現的。        5）搜索功能，用戶可以通過關鍵詞或歌曲名來搜索歌曲，點擊搜索后會

6、返回所有符合要求的歌曲列表。        6）聲音控制，調整歌曲音量的大小。        7）皮膚控制，可以自定義皮膚，選擇自己中意的樣式，也有默認樣式，即歌手寫真。        8）注冊登錄。        2.2 系統(tǒng)功能結構圖   

7、60;    在綜合系統(tǒng)功能分析的基礎上，得到系統(tǒng)的功能結構圖如下：        1）項目整體：該項目有兩個實體，即管理員，用戶。主要行為有：管理員登錄，管理員管理后臺數據；用戶注冊，用戶登錄，在線試聽。管理員登錄后才能進行相關的后臺數據，如查詢用戶信息，添加或審核相應歌曲，修改項目中歌曲對應的詳細信息，如歌曲名稱，歌曲播放鏈接，歌曲對應海報等，及時更新后臺數據。而用戶則必須注冊后臺才能自動存入用戶信息，以便登錄時可以在線試聽，下載，收藏歌曲，和記錄該用戶賬號的歷史記錄，用

8、戶在線試聽無需登錄就可進行，點擊相應歌曲，就會根據歌曲hash值來向后臺請求該歌曲的詳細信息，如圖1所示：        2）用戶：針對用戶來說，在線試聽包括以下功能，選擇歌曲，鈴聲訂閱，歌曲暫停播放，歌詞同步，歌曲進度控制，下載歌曲，收藏歌曲。用戶通過以上功能來體驗歌曲，放松心情。如圖2所示：        3） 管理員：后臺管理員主要負責歌曲審核，添加歌曲，管理用戶信息。     &

9、#160;   歌曲審核：添加歌曲之前管理員要審核歌曲信息，例如歌曲是否存在，歌曲是否健康，歌手，歌詞是否正確，信息是否完整等，通過后才可進行添加。         添加歌曲：當有新的歌曲時，管理員要添加該歌曲到數據庫中，比如歌曲名稱，歌手，歌曲播放鏈接，歌曲帶時間軸的歌詞，歌曲對應海報，歌曲分裂等一系列歌曲信息。         管理用戶信息：進入后臺首頁，管理用戶的登錄信息和登錄時進行的操作，比如當用戶注冊時，用

10、戶初始信息存入數據庫，當用戶更改密碼時要及時更新數據庫，當用戶進行相應的操作，比如收藏歌曲，訂閱彩鈴等，這些行為也要存儲在后臺用戶數據中，以便用戶查看或進行其他行為。如圖3所示：        3 系統(tǒng)部分功能的實現與程序的編制        系統(tǒng)主要包含以下功能模塊：注冊模塊、登錄模塊、歌曲搜索模塊、歌曲播放控制模塊、歌曲在線列表模塊等模塊。以下為部分模塊的界面和實現部分代碼。     

11、;   3.1 歌曲搜索模塊        作為一個音樂播放器，歌曲搜索功能是必不可少的，通過輸入歌曲名稱，歌手名字或關鍵詞后點擊搜索按鈕來向后臺請求數據，返回符合條件的數據總數和歌曲列表。例如輸入王杰點擊搜索，搜索后界面如圖4所示。向后臺請求數據的代碼如圖5所示。        其中this.keyword是通過vue雙向的雙向數據綁定來獲取輸入框的value值，在請求數據時作為參數向后臺請求數據。

12、60;       3.2 播放控制模塊        player組件中有點擊下一曲功能，歌曲詳情頁有點擊上一曲/下一曲功能，vuex中存在一個全局變量songIndex，當點擊上一曲時，讓songIndex-，當點擊下一曲時，songIndex+，界面如圖6所示：        點擊上一曲和下一曲實現的具體代碼如圖7所示：   

13、60;    點擊上一曲播放調用函數prev（），點擊下一曲播放調用函數next（），這些函數都放在公共空間的actions中，以便在每個頁面都可以調用這些函數。        該播放器經試用，功能基本達到了要求，完全能夠適應互聯(lián)網音樂播放器的一般要求。但界面還可以制作更精美，此項目對于設計與制作一個基于web的其他小程序具有參考意義。        參考文獻：        1 曲大旗. 基于Android的手機音樂播放器的設計與實現Z.        2 李光毅. 中文高性能響應式Web開發(fā)實戰(zhàn)M. 北京： 人民郵電出版社， 2016.        3 賈錚. HTML+CSS網頁布局開發(fā)指南M. 北京： 清華大學出版社， 2008.