基于HTML5技術(shù)的音樂(lè)播放器的設(shè)計(jì)與實(shí)現(xiàn)

常志強(qiáng)，劉正余，楊勁楠

（皖西學(xué)院電子與信息工程學(xué)院，安徽六安237012）

基于HTML5技術(shù)的音樂(lè)播放器的設(shè)計(jì)與實(shí)現(xiàn)

常志強(qiáng)，劉正余，楊勁楠

（皖西學(xué)院電子與信息工程學(xué)院，安徽六安237012）

本文采用HTML5技術(shù)，設(shè)計(jì)了一款音樂(lè)播放器，可以實(shí)現(xiàn)在線播放音樂(lè)，也可以加載終端里存儲(chǔ)的音樂(lè)文件.有效地減少了用戶終端的安裝軟件數(shù)目，提供更好的使用效果.HTML5技術(shù)還具有跨平臺(tái)等優(yōu)點(diǎn)，一次開發(fā)，可以應(yīng)用在不同平臺(tái)系統(tǒng)上.

HTML5技術(shù)；音樂(lè)播放器；Hbuilder

隨著技術(shù)不斷地進(jìn)步，音樂(lè)播放器以不同的類型出現(xiàn)，PC端的C/S模式和B/S模式、移動(dòng)終端的C/S模式等.由于HTML5技術(shù)的日趨成熟，以及移動(dòng)終端硬件的不斷升級(jí)，出現(xiàn)了軟件的B/S模式，只需要一個(gè)瀏覽器，就可以實(shí)現(xiàn)在線音樂(lè)的播放，也可以播放終端上儲(chǔ)存的音樂(lè)文件[1-4].

本文基于HTML5技術(shù)開發(fā)了一款音樂(lè)播放器，該播放器能實(shí)現(xiàn)歌曲列表顯示、切換歌曲、更換音樂(lè)播放器背景等功能，能夠滿足用戶的基本要求.

1 HTML5技術(shù)簡(jiǎn)介

HTML5技術(shù)在2014年正式形成規(guī)范，它比以往的任何HTML版本都要強(qiáng)大，更具有交互性，將多媒體技術(shù)納入其中，還提供了應(yīng)用程序接口.它可以處理文字、音視頻、圖像等，有很好的人機(jī)交互性.HTML還可以跨平臺(tái)，在不同的系統(tǒng)平臺(tái)上都可以使用.還可以跨設(shè)備，瀏覽器可以屏幕的尺寸不同來(lái)自動(dòng)調(diào)整網(wǎng)頁(yè).

2 開發(fā)環(huán)境介紹（HBuilder）

HBuilder是一款支持HTML5的Web開發(fā)集成開發(fā)環(huán)境.它的優(yōu)點(diǎn)有很多，最重要的是能快速輸入代碼，系統(tǒng)能夠在用戶輸入代碼的過(guò)程中，提示后面可能的輸入代碼，方便快捷地完成代碼的輸入.另外，系統(tǒng)還提供能夠?qū)崿F(xiàn)具體功能的可編程代碼塊，代碼塊的長(zhǎng)度均在50行以上，這樣就更便捷高效地完成相關(guān)功能模塊.

HBuilder的另外一個(gè)優(yōu)點(diǎn)就是操作簡(jiǎn)便.它可以進(jìn)行全方位提示，能提示語(yǔ)法、ID、Class、圖片、鏈接、字體等很多內(nèi)容；在輸入代碼的過(guò)程中可以完全不用鼠標(biāo).此外，它還支持很多種流行的編程語(yǔ)言，例如：jsp、php、ruby等web語(yǔ)言，coffee、less等編譯型語(yǔ)言.

3 系統(tǒng)設(shè)計(jì)及實(shí)現(xiàn)

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

如圖1所示，系統(tǒng)的功能模塊圖，系統(tǒng)包含播放列表、側(cè)拉頁(yè)設(shè)置、播放界面控制等三個(gè)部分，播放列表可以實(shí)現(xiàn)添加歌曲，移除歌曲；側(cè)拉頁(yè)設(shè)置可以進(jìn)行換背景、換皮膚、分欄、滑動(dòng)動(dòng)畫；播放界面控制分為顯示收藏歌曲等功能.

圖1 手機(jī)音樂(lè)播放器功能模塊結(jié)構(gòu)圖

鑒于篇幅的問(wèn)題，本文中將對(duì)幾個(gè)主要的設(shè)計(jì)過(guò)程進(jìn)行介紹，盡量對(duì)其詳細(xì)描述細(xì)節(jié).

3.2 側(cè)拉頁(yè)分欄的設(shè)計(jì)與實(shí)現(xiàn)

Html5播放器中使用＜ul＞列表（無(wú)序列表）來(lái)進(jìn)行側(cè)拉頁(yè)分欄，使用＜li＞標(biāo)簽定義每一個(gè)功能行，包含添加音樂(lè)、播放音樂(lè)、音效、換皮膚、換背景、設(shè)置、退出等，用＜div＞標(biāo)簽設(shè)置播放器頂部信息：點(diǎn)擊頭像登錄、收藏首歌曲等.

然后，在CSS里面設(shè)置側(cè)拉頁(yè)和列表的樣式，選擇合適的大小、位置等.在Html5設(shè)置分欄地過(guò)程中，每個(gè)分欄之前都出現(xiàn)了一個(gè)點(diǎn)，在CSS中，可以用list-style:none去除掉那些點(diǎn).在設(shè)置列表和頭部信息位置的時(shí)候，采用相對(duì)定位的參數(shù)relative和絕對(duì)定位的參數(shù)absolute來(lái)進(jìn)行設(shè)置，前者的設(shè)定是依照目標(biāo)在文檔里的位置，后者的設(shè)定是依照目標(biāo)在父級(jí)元素的位置.當(dāng)沒(méi)有父級(jí)元素時(shí)，就追蹤到頂級(jí)的內(nèi)容塊.通過(guò)nth-child(）選中父元素下面的目標(biāo)內(nèi)容進(jìn)行設(shè)計(jì).

圖2 歌曲播放及側(cè)拉頁(yè)的實(shí)現(xiàn)

3.3 歌曲播放功能的設(shè)計(jì)與實(shí)現(xiàn)

主頁(yè)面的設(shè)計(jì)是用＜div＞標(biāo)簽設(shè)計(jì)的，方法和側(cè)拉頁(yè)的頁(yè)面設(shè)計(jì)類似.在Html5中用＜audio＞標(biāo)簽定義音樂(lè)，在盒子底部插入一個(gè)滾動(dòng)條：＜in put type=“range”class=“range”/＞，并設(shè)置幾個(gè)按鈕鍵，包括前進(jìn)、暫停、后退等[5].

在CSS 中設(shè)置頁(yè)面內(nèi)容，采用了fixed 語(yǔ)句，來(lái)區(qū)別在元素的定位類型上和之前側(cè)拉頁(yè)的設(shè)置.Fixed 語(yǔ)句讓設(shè)計(jì)內(nèi)容放置在對(duì)應(yīng)的位置，實(shí)現(xiàn)絕對(duì)定位的布局，通過(guò)屏幕大小自動(dòng)調(diào)節(jié)頁(yè)面大小.此處的彈性盒子，用display: -webkit-box語(yǔ)句，把100%的寬度默認(rèn)分為十等份.overflow: scroll 語(yǔ)句提供一種滾動(dòng)機(jī)制，使元素框中出現(xiàn)滾動(dòng)條.

創(chuàng)建一個(gè)類用于保存音樂(lè)數(shù)據(jù): 數(shù)據(jù)模型，用var music Models = []語(yǔ)句定義一個(gè)保存音樂(lè)數(shù)據(jù)模型的數(shù)組，然后把數(shù)據(jù)加入數(shù)組里，解析json數(shù)據(jù).

在JS中實(shí)現(xiàn)歌曲的播放與暫停功能.歌曲的播放和暫停切換，實(shí)際上是圖片的切換，在播放和暫停按鈕圖片上添加點(diǎn)擊事件，并監(jiān)聽這個(gè)事件，監(jiān)聽歌曲是否在播放.在歌曲播放頁(yè)面上添加一個(gè)點(diǎn)擊事件，用來(lái)實(shí)現(xiàn)任意選擇播放.Siblings()函數(shù)用于找到兄弟元素，輸入一些所需元素后，能夠通過(guò)DOM發(fā)現(xiàn)關(guān)聯(lián)內(nèi)容并創(chuàng)建對(duì)應(yīng)的jQuery實(shí)例.有眾多供我們使用的選擇器，這個(gè)函數(shù)能夠可以管理它們，而這些內(nèi)容的類型也和參數(shù)一樣.在確定了一個(gè)選擇器之后，會(huì)進(jìn)行一些必需的檢測(cè)，驗(yàn)證通過(guò)符合匹配元素.用if(this.current Time==this.duration){_this.next Music();}語(yǔ)句設(shè)置順序播放.播放完當(dāng)前歌曲條目后，會(huì)按順序自動(dòng)播放列表中的下一首.

3.4 如何在JSON文件中添加歌曲

在JSON文件中添加歌曲的標(biāo)準(zhǔn)樣式如下：

[{quot;srcquot;:quot;music/ 周杰倫- 給我一首歌的時(shí)間.mp3quot;,quot;imgquot;:quot;img/zhouJL.pngquot;,quot;numquot;:quot;10quot;,quot;music-Namequot;:quot;給我一首歌的時(shí)間quot;,quot;namequot;:quot;周杰倫quot;}]

Src是源文件保存的目錄路徑，Img是圖片文件，num是文件位置，musicName是歌名，name是歌手.添加歌曲可在JSON文件中按上述順序填寫，并把源文件導(dǎo)入到HBuilder中.

圖3 側(cè)拉頁(yè)換皮膚的實(shí)現(xiàn)

4 小結(jié)

本文用HBuilder設(shè)計(jì)一款基于HTML5的音樂(lè)播放器，用div來(lái)構(gòu)建音樂(lè)播放器的整體框架和側(cè)拉頁(yè)，用ul和li設(shè)計(jì)歌曲列表，用audio來(lái)播放歌曲，并且用in put插入一個(gè)滾動(dòng)條.在css里設(shè)置播放器所要的各個(gè)參數(shù).在javascript里實(shí)現(xiàn)歌曲的播放、暫停、上一首、下一首等操作，同時(shí)也包括歌曲圖片和歌曲的同步、側(cè)拉頁(yè)的顯示和側(cè)拉頁(yè)換膚、主題背景的更換等選項(xiàng).在pbl.json文件里實(shí)現(xiàn)歌曲的添加和更換功能[6].

相比其他實(shí)現(xiàn)方法，此軟件應(yīng)用的平臺(tái)更廣泛，又節(jié)省了終端的存儲(chǔ)空間，具有很高的實(shí)用性.HTML5技術(shù)是日后的發(fā)展方向，具有很高的發(fā)展?jié)摿?

〔1〕陳振宇.基于Android的手機(jī)音樂(lè)播放器的設(shè)計(jì)與開發(fā)[D].西安電子科技大學(xué)，2014.

〔2〕季玉茹，王德忠.基于安卓的音樂(lè)播放器設(shè)計(jì)[J].電腦知識(shí)與技術(shù),2013(25).

〔3〕胡曉東.基于android平臺(tái)音樂(lè)播放器的設(shè)計(jì)與實(shí)現(xiàn)[D].吉林大學(xué)，2014.

〔4〕蘇航.基于Android的音樂(lè)播放器軟件的設(shè)計(jì)與實(shí)現(xiàn)[D].電子科技大學(xué)，2016.

〔5〕鄭培純.基于HTML5的多媒體播放網(wǎng)站[D].吉林大學(xué)，2014.

〔6〕王健.iOS平臺(tái)在線音樂(lè)播放器設(shè)計(jì)與實(shí)現(xiàn)[J].自動(dòng)化技術(shù)與應(yīng)用,2016(06).

TP399

A

1673-260X（2017）11-0035-02

2017-08-26

皖西學(xué)院校級(jí)自然科學(xué)研究項(xiàng)目:基于ZigBee的溫室大棚溫濕度檢測(cè)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)(WXZQ 1420);皖西學(xué)院2015年省級(jí)大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練計(jì)劃項(xiàng)目:基于51單片機(jī)的自動(dòng)測(cè)控LED節(jié)能照明系統(tǒng)(006040216051)