下載本文檔
版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
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.
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 浙江省舟山市(2024年-2025年小學四年級語文)人教版課后作業(yè)(下學期)試卷及答案
- 江西省景德鎮(zhèn)市(2024年-2025年小學四年級語文)統(tǒng)編版小升初模擬(上學期)試卷及答案
- 黑龍江黑河市(2024年-2025年小學四年級語文)人教版課后作業(yè)((上下)學期)試卷及答案
- 【初中歷史教案、學案、備課】第9課 辛亥革命 教案
- 2024年一氧化二氮合作協(xié)議書
- 2023年巴中市赴知名高校引進和急需緊缺專業(yè)人才事業(yè)單位崗位考試真題
- 2024年多通道腦電圖機項目合作計劃書
- 2024年雄激素及同化激素項目建議書
- 2024年烷基單乙醇酰胺及其醚衍生物項目合作計劃書
- 2024年異佛爾酮項目合作計劃書
- 施工辦公區(qū)及生活區(qū)標準化方案
- K9860型凱氏定氮儀操作說明 2
- 中醫(yī)師承和確有專長考核考試報考用全套表格(吐血推薦)
- 生物醫(yī)學類外文數據庫
- 《胸部專業(yè)知識》PPT課件.ppt
- 個人參賽證明模板
- 關于房屋建筑和市政工程界定文件
- 【護理講課】肺炎病人的護理PPT
- 獸藥店企業(yè)的組織機構圖
- 工廠廢棄物管理制度廢棄物的分類、保管、運輸管理辦法 - 生產管理
- 工程測量收費標準
評論
0/150
提交評論