常志強，劉正余，楊勁楠

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

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

常志強，劉正余，楊勁楠

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

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

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

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

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

1 HTML5技術(shù)簡介

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在JSON文件中添加歌曲的標準樣式如下：

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

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

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

4 小結(jié)

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

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

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

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

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

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

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

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

TP399

A

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

2017-08-26

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