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

1、基于html5技術(shù)的音樂播放器的設(shè)計(jì)與 實(shí)現(xiàn)常志強(qiáng)劉正余楊勁楠皖西學(xué)院電子與信息工程學(xué)院摘要：本文采用iitml5技術(shù)，設(shè)計(jì)了一款音樂播放器，可以實(shí)現(xiàn)在線播放音樂，也可 以加載終端里存儲的音樂文件有效地減少了用戶終端的安裝軟件數(shù)目，提供更 好的使用效果.html5技術(shù)還具有跨平臺等優(yōu)點(diǎn)，一次開發(fā)，可以應(yīng)用在不同平 臺系統(tǒng)上.關(guān)鍵詞：html5 技術(shù); 音樂播放器;hbu訂dcr;收稿日期：2017-08-26基金：皖西學(xué)院校級自然科學(xué)研究項(xiàng)目：基于zigbee的溫室大棚溫濕度檢測系統(tǒng) 的設(shè)計(jì)與實(shí)現(xiàn)(wxzq1420)received： 2017-08-26隨著技術(shù)不斷地進(jìn)步，咅樂播放器以不同的

2、類型出現(xiàn)，pc端的c/s模式和b/s 模式、移動終端的c/s模式等.由于html5技術(shù)的日趨成熟，以及移動終端硬件 的不斷升級，出現(xiàn)了軟件的b/s模式，只需要一個瀏覽器，就可以實(shí)現(xiàn)在線音 樂的播放，也可以播放終端上儲存的音樂文件1-4.本文基于html5技術(shù)開發(fā)了一款咅樂播放器，該播放器能實(shí)現(xiàn)歌曲列表顯示、切 換歌曲、更換音樂播放器背景等功能，能夠滿足用戶的基本要求.1 html5技術(shù)簡介html5技術(shù)在2014年正式形成規(guī)范，它比以往的任何html版木都要強(qiáng)大，更具 有交互性，將多媒體技術(shù)納入其中，還提供了應(yīng)用程序接口它可以處理文字、 咅視頻、圖像等，有很好的人機(jī)交互性.html還可以跨平臺

3、，在不同的系統(tǒng)平臺 上都可以使用述可以跨設(shè)備，瀏覽器可以屏幕的尺寸不同來自動調(diào)整網(wǎng)頁.2開發(fā)環(huán)境介紹（hbuilder）hbuilder是一款支持html5的web開發(fā)集成開發(fā)環(huán)境它的優(yōu)點(diǎn)有很多，最重要 的是能快速輸入代碼，系統(tǒng)能夠在用戶輸入代碼的過程中，提示后面可能的輸 入代碼，方便快捷地完成代碼的輸入另外，系統(tǒng)還提供能夠?qū)崿F(xiàn)具體功能的可 編程代碼塊，代碼塊的長度均在50行以上，這樣就更便捷高效地完成相關(guān)功能 模塊.hbu訂der的另外一個優(yōu)點(diǎn)就是操作簡便它可以進(jìn)行全方位提示，能提示語法、 id、class.圖片、鏈接、字體等很多內(nèi)容;在輸入代碼的過程中可以完全不用鼠 標(biāo)此外，它還支持很多種

4、流行的編程語言，例如：jsp、php> ruby等web語言, coffee、less等編譯型語言.3系統(tǒng)設(shè)計(jì)及實(shí)現(xiàn)3.1系統(tǒng)功能模塊結(jié)構(gòu)圖如圖1所示，系統(tǒng)的功能模塊圖，系統(tǒng)包含播放列表、側(cè)拉頁設(shè)置、播放界面控 制等三個部分，播放列表可以實(shí)現(xiàn)添加歌曲，移除歌曲；側(cè)拉頁設(shè)置可以進(jìn)行換 背景、換皮膚、分欄、滑動動畫;播放界面控制分為顯示收藏歌曲等功能.側(cè)拉頁設(shè)置音樂播放器播放界面控制圖1手機(jī)咅樂播放器功能模塊結(jié)構(gòu)圖下載原圖鑒于篇幅的問題，本文屮將對幾個主要的設(shè)計(jì)過程進(jìn)行介紹，盡量對其詳細(xì)描 述細(xì)節(jié).3. 2側(cè)拉頁分欄的設(shè)計(jì)與實(shí)現(xiàn)html5播放器中使用31列表(無序列表)來進(jìn)行側(cè)拉頁分欄，使用

5、li標(biāo)簽 定義每一個功能行，包含添加音樂、播放音樂、音效、換皮膚、換背景、設(shè)置、 退出等，用div標(biāo)簽設(shè)置播放器頂部信息：點(diǎn)擊頭像登錄、收藏首歌曲等.然后,在css里面設(shè)置側(cè)拉頁和列表的樣式，選擇合適的大小、位置等在html5 設(shè)置分欄地過程中，每個分欄之前都出現(xiàn)了一個點(diǎn)，在css中，可以用 list-style:none去除掉那些點(diǎn)在設(shè)置列表和頭部信息位置的時候，采用相對 定位的參數(shù)relative和絕對定位的參數(shù)absolute來進(jìn)行設(shè)置，前者的設(shè)定是依 照目標(biāo)在文檔里的位置，后者的設(shè)定是依照目標(biāo)在父級元素的位置當(dāng)沒有父級 元素時，就追蹤到頂級的內(nèi)容塊通過nth-child ()選中父元素

6、下面的目標(biāo)內(nèi) 容進(jìn)行設(shè)計(jì).o需掃挪斤就 h師序播放g音效換皮膚 門換背量睡眠睜設(shè)置0送岀點(diǎn)擊收藏圖2歌曲播放及側(cè)拉頁的實(shí)現(xiàn)下載原圖3.3歌曲播放功能的設(shè)計(jì)與實(shí)現(xiàn)主頁面的設(shè)計(jì)是用div標(biāo)簽設(shè)計(jì)的，方法和側(cè)拉頁的頁面設(shè)計(jì)類似.在html5 中用audio標(biāo)簽定義音樂，在盒子底部插入一個滾動條:inputtype二“range” class二“rane” />,并設(shè)置兒個按鈕鍵，包括前進(jìn)、暫停、后 退等.在css中設(shè)置頁面內(nèi)容，采用了 fixed語句，來區(qū)別在元素的定位類型上和之前 側(cè)拉頁的設(shè)置.fixed語句讓設(shè)計(jì)內(nèi)容放置在對應(yīng)的位置，實(shí)現(xiàn)絕對定位的布局, 通過屏幕大小自動調(diào)節(jié)頁而大小此處的

7、彈性盒子，用di splay:-webkit-box語 句，把100%的寬度默認(rèn)分為十等份.overflow: scroll語句提供一種滾動機(jī)制， 使元素框中出現(xiàn)滾動條.創(chuàng)建一個類用于保存咅樂數(shù)據(jù):數(shù)據(jù)模型，用var music models二語句定義一 個保存音樂數(shù)據(jù)模型的數(shù)組，然后把數(shù)據(jù)加入數(shù)組里，解析json數(shù)據(jù).在js中實(shí)現(xiàn)歌曲的播放與暫停功能歌曲的播放和暫停切換，實(shí)際上是圖片的 切換，在播放和暫停按鈕圖片上添加點(diǎn)擊事件，并監(jiān)聽這個事件，監(jiān)聽歌曲是 否在播放在歌曲播放頁面上添加一個點(diǎn)擊事件，用來實(shí)現(xiàn)任意選擇播放.siblings ()函數(shù)用于找到兄弟元素，輸入一些所需元素后，能夠通過d

8、0m 發(fā)現(xiàn)關(guān)聯(lián)內(nèi)容并創(chuàng)建對應(yīng)的j query實(shí)例有眾多供我們使用的選擇器，這個函 數(shù)能夠可以管理它們，而這些內(nèi)容的類型也和參數(shù)一樣在確定了一個選擇器z 后，會進(jìn)行一些必需的檢測，驗(yàn)證通過符合匹配元素用if (this, current time=this. duration) this, next music () ;語句設(shè)置順序播放播放完當(dāng) 前歌曲條目后，會按順序直動播放列表中的下一首.3.4如何在js0n文件中添加歌曲在json文件中添加歌曲的標(biāo)準(zhǔn)樣式如下：src："music/周杰倫-給我一首歌的時間.mp3", img：img/zhou jl. png",

9、，zmusicname，/：，/給我一首歌的時間 "name":"周杰倫src是源文件保存的目錄路徑，img是圖片文件，num是文件位置，music name 是歌名，name是歌手添加歌曲可在json文件中按上述順序填寫，并把源文件 導(dǎo)入到ubuilder中.點(diǎn)站收藏1掃顫音 約m g掃描聽歌音效換皮膚換背昌睡眠p *1 設(shè)置退岀點(diǎn)擊頭像登錄收簸10苜歌曲圖3側(cè)拉頁換皮膚的實(shí)現(xiàn) 下載原圖4小結(jié)本文用hbuilder設(shè)計(jì)一款基于html5的音樂播放器，用div來構(gòu)建音樂播放器 的整體框架和側(cè)拉頁，用ul和li設(shè)計(jì)歌曲列表，用audio來播放歌曲，并且用 input插入一個滾動條.在css里設(shè)置播放器所要的各個參數(shù).在javascript里 實(shí)現(xiàn)歌曲的播放、暫停、上一首、下一首等操作，同時也包括歌曲圖片和歌曲的 同步、側(cè)拉頁的顯示和側(cè)拉頁換膚、主題背景的更換等選項(xiàng)在pbl. json文件里 實(shí)現(xiàn)歌曲的添加和更換功能凹.相比其他實(shí)現(xiàn)方法，此軟件應(yīng)用的平臺更廣泛，乂節(jié)省了終端的存儲空間，具 有很高的實(shí)用性.html5技術(shù)是日后的發(fā)展方向，具有很高的發(fā)展?jié)摿?參考文獻(xiàn)1 陳振宇基于android的手機(jī)音斥播放器的設(shè)計(jì)與開發(fā)d 西安電子科技大 學(xué)，2014.2 季玉茹，王德忠基于安卓的音斥播放器設(shè)計(jì)j電腦知識與技術(shù)，2013 (