基于微信小程序的音樂(lè)播放器研究與實(shí)現(xiàn)

蔣文娟 蘇喜紅 孟麗珍

摘要：微信小程序開發(fā)環(huán)境和開發(fā)者生態(tài)已成熟，各種小程序深受用戶喜愛。為滿足微信使用者對(duì)于音樂(lè)播放器操作簡(jiǎn)單、不占內(nèi)容的需求，提出一款基于微信小程序的音樂(lè)播放器的完整開發(fā)思路和設(shè)計(jì)實(shí)現(xiàn)方法，為后續(xù)開發(fā)者提供基礎(chǔ)。該軟件基于流行的Angular框架和HTML5、CSS3、JavaScript開發(fā)語(yǔ)言，使用MySQL數(shù)據(jù)庫(kù)，后端以PHP作為開發(fā)語(yǔ)言。設(shè)計(jì)采用Aiax請(qǐng)求完成前后端數(shù)據(jù)交互，通過(guò)轉(zhuǎn)換和接口技術(shù)完成微信平臺(tái)部署。播放器實(shí)現(xiàn)了音樂(lè)點(diǎn)播和隨機(jī)播放、資源搜索、播放界面與歌詞同步顯示、圖文簡(jiǎn)介等功能。實(shí)際運(yùn)行結(jié)果表明，音樂(lè)播放器運(yùn)行穩(wěn)定，界面昊觀、操作簡(jiǎn)單、占內(nèi)存少。

關(guān)鍵詞：音樂(lè)播放器;微信小程序;接口技術(shù);H5技術(shù)

DOI：10.11907/rjdk.192287開放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（0SID）：

中圖分類號(hào)：TP319文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-7800（2020）006-0141-05

0 引言

在互聯(lián)網(wǎng)時(shí)代，基于不同平臺(tái)、針對(duì)不同用戶，各類播放器應(yīng)運(yùn)而生，Web端音樂(lè)播放器、基于Android的APP音樂(lè)播放器、嵌入式播放器、音樂(lè)播放網(wǎng)站等滿足了人們對(duì)于音樂(lè)的享受。隨著微信生態(tài)的成熟，微信小程序播放器更是激發(fā)了開發(fā)者的熱情?；谀壳俺墒斓腍TML5技術(shù)，結(jié)合微信小程序開發(fā)簡(jiǎn)捷、少存儲(chǔ)空間、易使用及推廣等特點(diǎn)，開發(fā)了基于微信小程序的音樂(lè)播放器。HTML5技術(shù)安全性好，在開發(fā)領(lǐng)域廣泛支持視頻技術(shù)、離線存儲(chǔ)、讀取技術(shù)，以及基于移動(dòng)瀏覽器的Web應(yīng)用程序開發(fā)關(guān)鍵技術(shù)。Web應(yīng)用促進(jìn)前端技術(shù)快速發(fā)展，HTML5技術(shù)已發(fā)展成為前端技術(shù)的主流。本文主要采用HTML5技術(shù)開發(fā)一款微信端音樂(lè)播放器，為使用者提供便捷和性能良好的小型音樂(lè)播放軟件。

1 關(guān)鍵技術(shù)

1.1 音頻播放Audio對(duì)象

在HTML5技術(shù)中為音頻文件播放提供了Audio對(duì)象，該對(duì)象為音頻播放器開發(fā)標(biāo)準(zhǔn)，在前端頁(yè)面開發(fā)中，對(duì)應(yīng)使用Audio標(biāo)簽，該標(biāo)簽支持市面主流的火狐、306、谷歌、IE等瀏覽器。Audio通過(guò)事件觸發(fā)播放控制，主要事件包括瀏覽器加載音頻、播放、暫停，在屬性中Duration用來(lái)獲取歌曲的時(shí)間長(zhǎng)度，以及當(dāng)前播放的歌曲通過(guò)屬性Loop控制是否重復(fù)播放、Autoplay控制是否自動(dòng)播放等。Play（）和Pause（）分別控制歌曲的播放與暫停。

1.2 接口技術(shù)

在獲取數(shù)據(jù)庫(kù)信息和搜索歌曲完成前后端數(shù)據(jù)交互時(shí)采用了接口技術(shù)，前端發(fā)起請(qǐng)求，獲取數(shù)據(jù)，完成前端頁(yè)面的數(shù)據(jù)渲染。首先前端會(huì)向服務(wù)器發(fā)起一個(gè)Ajax請(qǐng)求，請(qǐng)求地址是Aiax里的參數(shù)URL，請(qǐng)求成功后執(zhí)行回調(diào)函數(shù)，返回Ajax里的Success參數(shù)。后端Servlet收到前端的請(qǐng)求后，先獲取Request中的Parameter，然后將成功返回的數(shù)據(jù)賦值給PHP對(duì)應(yīng)的對(duì)象。后端返回的數(shù)據(jù)一般都是JSon格式的字符串，該數(shù)據(jù)一般根據(jù)數(shù)據(jù)處理需求將其轉(zhuǎn)化為程序需要的JSon對(duì)象，然后前端頁(yè)面訪問(wèn)轉(zhuǎn)換格式后的JSon對(duì)象值，完成頁(yè)面的數(shù)據(jù)渲染。

1.3 隨機(jī)算法原理

播放歌單采用了隨機(jī)排序，在搜索模塊中根據(jù)搜索規(guī)則搜索到的歌曲在歌單中也是隨機(jī)排列?；驹恚喝绻幸粋€(gè)集合A（a_l，…，a_n），對(duì)于ω，0≤ω≤n，如何從集合A中選取ω個(gè)元素是等概率的呢？經(jīng)過(guò)計(jì)算經(jīng)典概率公式，選擇每個(gè)元素的概率是ω/n。如果集合A中的元素已經(jīng)具有隨機(jī)性，每個(gè)位置上的概率是相同的，因此每個(gè)元素也是等概率地出現(xiàn)在每個(gè)位置上，A上只有一個(gè)數(shù)據(jù)被選擇時(shí)就可以返回A的前面ω個(gè)元素，或者可以在每隔h個(gè)元素中使用類似方法。同樣可以使用類似方法用于每隔h個(gè)元素。

2 系統(tǒng)分析

2.1 功能分析

軟件基于微信端完成了音樂(lè)列表的隨機(jī)播放和指定播放，實(shí)現(xiàn)了音樂(lè)暫停、恢復(fù)、快進(jìn)和快退，進(jìn)度條、上下歌曲選擇以及歌曲播放時(shí)歌詞的同步顯示;同時(shí)，也實(shí)現(xiàn)了用戶在線搜索歌曲功能和歌曲及歌手等圖文信息展示。

2.2 系統(tǒng)總體架構(gòu)分析

根據(jù)操作習(xí)慣和數(shù)據(jù)走向完成總體框架結(jié)構(gòu)設(shè)計(jì)，如圖1所示。將音樂(lè)播放器嵌入到微信小程序中，該過(guò)程需要使用企業(yè)注冊(cè)信息和法人個(gè)人信息申請(qǐng)注冊(cè)賬號(hào)以獲取AppID，完成整個(gè)文件配置、上傳服務(wù)器等一系列工作，待騰訊完成審核以后嵌入到微信小程序中。

3 軟件設(shè)計(jì)及實(shí)現(xiàn)

分析目前主流播放軟件功能，確定該播放器功能如下：歌曲播放與暫停、播放快進(jìn)與快退、歌曲搜索模塊、進(jìn)度條調(diào)控模塊、歌詞同步顯示、播放背景同步顯示、歌手簡(jiǎn)介及嵌人微信小程序。

3.1 音樂(lè)播放模塊設(shè)計(jì)

音樂(lè)播放由前端音頻播放Audio標(biāo)簽實(shí)現(xiàn)，配合JS代碼控制音樂(lè)播放器播放與暫停。音樂(lè)播放流程設(shè)計(jì)通過(guò)歌單列表選擇模式確定播放歌曲，完成播放。

3.2 音樂(lè)搜索模塊設(shè)計(jì)

實(shí)現(xiàn)音樂(lè)在線搜索功能，主要通過(guò)當(dāng)前流行的各大音樂(lè)網(wǎng)站提供的接口訪問(wèn)相應(yīng)數(shù)據(jù)庫(kù)。首先要獲得訪問(wèn)服務(wù)器的路徑，獲取對(duì)應(yīng)的AppId和Key值，然后通過(guò)Ajax請(qǐng)求匹配AppId和Key值進(jìn)行數(shù)據(jù)庫(kù)訪問(wèn)，兩者缺一不可，配合jQuery代碼完成工作，搜索流程如圖2所示，連接音樂(lè)網(wǎng)站流程如圖3所示。

3.3 進(jìn)度條控制模塊設(shè)計(jì)

首先獲取當(dāng)前歌曲總時(shí)間，然后獲取當(dāng)前歌曲播放時(shí)間，用不同顏色加以區(qū)分，進(jìn)度條的長(zhǎng)度固定，根據(jù)對(duì)應(yīng)的百分比標(biāo)注歌曲已播放時(shí)長(zhǎng)并轉(zhuǎn)換成距離，當(dāng)前距離等于進(jìn)度條的固定值時(shí)，播放結(jié)束。播放流程如圖4所示。

3.4 嵌入微信模塊設(shè)計(jì)

當(dāng)整個(gè)Web程序完成后，嵌入到微信小程序中，該過(guò)程需要在微信公眾平臺(tái)上申請(qǐng)開發(fā)者賬號(hào)，提交企業(yè)注冊(cè)信息和法人個(gè)人信息，等審核通過(guò)后即可進(jìn)行微信端開發(fā)。首先將文件配置好，將開發(fā)Web端的代碼提交到編譯微信的編譯軟件上，按照微信開發(fā)規(guī)范修改格式，最后將代碼提交到服務(wù)器上，繼續(xù)等待騰訊審核，審核完成即表示微信小程序開發(fā)部署已完成。

3.5 UI設(shè)計(jì)

在瀏覽器運(yùn)行界面，采用HTML5語(yǔ)言加CSS3樣式布局。

界面最上面一層Div是歌單和搜索框樣式。歌單顯示當(dāng)前本地歌曲，搜索框用于在線搜索歌曲，可以搜索用戶喜歡的歌曲。

第二層Div是歌曲名稱和歌手名字，用來(lái)顯示當(dāng)前播放歌曲對(duì)應(yīng)的歌名和歌手名。

第三層Div是快進(jìn)、快退、播放、暫停模塊。播放暫停模塊的背景顯示對(duì)應(yīng)歌曲的歌手海報(bào)。

第四層Div是歌曲進(jìn)度條模塊，進(jìn)度條右邊對(duì)應(yīng)歌曲播放時(shí)間，進(jìn)度條左邊對(duì)應(yīng)歌曲總時(shí)間。

第五層Div是歌詞模塊，播放歌曲會(huì)顯示對(duì)應(yīng)的歌詞并以不同顏色顯示出來(lái)，顯示完后恢原來(lái)顏色。

第六層Div是歌手簡(jiǎn)介，包括姓名、性別、國(guó)籍等。播放哪首歌曲就顯示對(duì)應(yīng)的哪首歌的歌手信息。

最后一層Div是上一曲、下一曲按鈕，用來(lái)控制歌曲的上下曲。

整個(gè)UI設(shè)計(jì)由上述幾部分組成，加上不同的顏色和樣式使得界面更加以美觀。

3.6 數(shù)據(jù)庫(kù)設(shè)計(jì)

在該程序中需要用到數(shù)據(jù)庫(kù)存放本地歌曲信息，這些信息包括歌曲背景、歌曲音頻、歌曲名稱、歌詞和歌手簡(jiǎn)介。歌曲信息可以定為一個(gè)實(shí)體，包含的信息可以作為屬性，則格式可以表示為歌曲信息：{背景圖片路徑，音頻歌曲路徑，歌曲名稱，歌詞路徑，簡(jiǎn)介}。

4 系統(tǒng)功能實(shí)現(xiàn)

音樂(lè)播放器完成微信部署后，其功能實(shí)現(xiàn)包括播放控制模塊、進(jìn)度條控制模塊、歌詞控制模塊、簡(jiǎn)介模塊和在線搜索模塊，具體開發(fā)設(shè)計(jì)如圖5、圖6所示。

4.1 播放控制模塊

播放控制用來(lái)控制歌曲播放與暫停，在代碼中用iplay函數(shù)實(shí)現(xiàn)該功能，播放使用隨機(jī)原理函數(shù)初始化播放列表。其關(guān)鍵點(diǎn)是通過(guò)Ajax請(qǐng)求接口向后臺(tái)訪問(wèn)數(shù)據(jù)庫(kù)的數(shù)據(jù)，請(qǐng)求成功后后臺(tái)，返回JSon格式的數(shù)據(jù)，將得到的數(shù)據(jù)處理成前端需要的數(shù)據(jù)格式放人對(duì)應(yīng)的代碼中。在控制播放暫停功能中通過(guò)一個(gè)狀態(tài)值判斷是否正在播放，如果沒(méi)有該狀態(tài)值就無(wú)法判斷當(dāng)前是播放還是暫停。每點(diǎn)擊一下此按鈕，狀態(tài)值就會(huì)發(fā)生一次變化。在播放時(shí)加人編碼技術(shù)，可以提高音樂(lè)音質(zhì)，使播放出來(lái)的音樂(lè)更加清晰。

以上為JS控制代碼，實(shí)現(xiàn)歌曲播放與暫停功能的控制。

4.2 進(jìn)度條控制模塊

已播放對(duì)應(yīng)進(jìn)度條的顏色和未播放對(duì)應(yīng)進(jìn)度條的顏色不一樣，已播放對(duì)應(yīng)進(jìn)度條的顏色為藍(lán)色，反之為灰色。在開發(fā)過(guò)程中使用兩個(gè)相同的Div，其中一個(gè)Div表示正在播放對(duì)應(yīng)的進(jìn)度條，設(shè)置背景顏色為藍(lán)色，進(jìn)度條長(zhǎng)度隨時(shí)間將增長(zhǎng)。而另一個(gè)Div什么變化都不用做，只將背景填充成灰色即可，通過(guò)顏色變化，進(jìn)度條產(chǎn)生視覺上的變化，從而解決問(wèn)題。JS代碼控制如下：

上述JS代碼實(shí)現(xiàn)了進(jìn)度條控制，關(guān)鍵技術(shù)點(diǎn)就是根據(jù)歌曲播放時(shí)間和整個(gè)進(jìn)度條長(zhǎng)度進(jìn)行比例換算，以顯示進(jìn)度條走動(dòng)的距離。

4.3 歌詞控制模塊

該模塊用來(lái)顯示歌詞，當(dāng)前播放什么歌曲，這部分就要顯示對(duì)應(yīng)的歌詞，未播放的歌曲歌詞和已播放的歌曲歌詞顯示的顏色一樣，都用灰色顯示。當(dāng)前正在播放的歌曲歌詞用藍(lán)色顯示，以示區(qū)別。顯示的歌詞同樣使用數(shù)據(jù)庫(kù)中的數(shù)據(jù)，根據(jù)該首歌曲的Id，通過(guò)Ajax向后臺(tái)發(fā)起請(qǐng)求，同時(shí)將該歌曲的Id當(dāng)作參數(shù)傳向后臺(tái)，后臺(tái)根據(jù)正在播放歌曲的Id查找出對(duì)應(yīng)的歌詞，后臺(tái)會(huì)返回前端一個(gè)JSon數(shù)據(jù)，拿到該數(shù)據(jù)后進(jìn)行相同處理，將其處理成程序需要的數(shù)據(jù)格式，放在對(duì)應(yīng)的前端元素中，這樣歌詞就能正常顯示。在項(xiàng)目中用一個(gè)parseLyric函數(shù)實(shí)現(xiàn)該功能，JS中的代碼如下：

以上代碼用來(lái)獲取歌詞，關(guān)鍵技術(shù)點(diǎn)是獲取的歌詞需要轉(zhuǎn)換格式，根據(jù)時(shí)間戳顯示對(duì)應(yīng)歌詞，只要將其解決好，其它即可順利完成。如果訪問(wèn)接口時(shí)參數(shù)和格式不正確，就會(huì)報(bào)錯(cuò)。

4.4 簡(jiǎn)介模塊

該模塊主要介紹歌手基本信息，這些信息來(lái)源同樣是通過(guò)Ajax向后臺(tái)發(fā)起請(qǐng)求，同時(shí)以歌手名字作為參數(shù)向后臺(tái)請(qǐng)求數(shù)據(jù)，這樣就能查到對(duì)應(yīng)的歌手信息。后臺(tái)返回?cái)?shù)據(jù)并將其處理成前端需要的格式放在前端元素中。這樣，歌手的基本信息就能完整地展示出來(lái)。同樣地，如果訪問(wèn)接口寫錯(cuò)或者參數(shù)格式不正確，接口就會(huì)報(bào)錯(cuò)。每個(gè)歌手的信息都展示同類的內(nèi)容，也不用滾動(dòng)顯示，因此將該模塊直接固定好即可。

控制歌手基本信息，關(guān)鍵技術(shù)點(diǎn)同樣是Ajax請(qǐng)求。歌手基本信息存儲(chǔ)在本地?cái)?shù)據(jù)庫(kù)中，通過(guò)不同參數(shù)的接口請(qǐng)求數(shù)據(jù)，獲取到數(shù)據(jù)并放到對(duì)應(yīng)的元素中加以展示。

4.5 在線搜索模塊

搜索模塊在頁(yè)面展示中只是一個(gè)搜索框加一個(gè)按鈕，但是在JS代碼中實(shí)現(xiàn)該功能并不容易。本文通過(guò)searchMuics函數(shù)中Ajax的URL地址訪問(wèn)其它音樂(lè)服務(wù)器，data中有對(duì)應(yīng)的appid和密鑰，有了這些才能順利訪問(wèn)，實(shí)現(xiàn)資源在線搜索功能。目前流行的QQ、酷狗、網(wǎng)易云等音樂(lè)播放器，都有自己的數(shù)據(jù)庫(kù)和服務(wù)器，部分平臺(tái)已將資源放到服務(wù)器上，用戶可以根據(jù)歌手名字或者歌曲名字進(jìn)行搜索，或者根據(jù)其它關(guān)鍵詞進(jìn)行模糊搜索查詢。要實(shí)現(xiàn)該功能，需要借助接口訪問(wèn)音樂(lè)平臺(tái)的數(shù)據(jù)庫(kù)，但是音樂(lè)平臺(tái)在資源分享上有技術(shù)限制，在數(shù)據(jù)庫(kù)訪問(wèn)上需要通過(guò)指定接口才能訪問(wèn)成功。通過(guò)上網(wǎng)搜索大量資料并進(jìn)行對(duì)比，最終確定采用訪問(wèn)QQ音樂(lè)的接口。

4.6 嵌入微信模塊

該程序在Web端完成開發(fā)后，需要對(duì)完成的程序加以打包測(cè)試，將打包好的程序嵌入微信中查看顯示結(jié)果，對(duì)不滿意的樣式按照微信端規(guī)則加以改進(jìn)。小程序開發(fā)首先要有微信小程序開發(fā)者賬號(hào)，這個(gè)賬號(hào)需要在微信公眾號(hào)頁(yè)面的最后一部分進(jìn)行開發(fā)者驗(yàn)證。騰訊目前支持的微信小程序開發(fā)賬號(hào)只有企業(yè)版的，因此需要借助一個(gè)公司的開發(fā)者賬號(hào)進(jìn)行開發(fā)。具體控制代碼如下：以上代碼只是控制部分功能實(shí)現(xiàn)。

5 結(jié)語(yǔ)

為實(shí)現(xiàn)基于微信小程序的音樂(lè)播放器開發(fā)，本文對(duì)目前媒體類播放器的各種形式進(jìn)行比較，梳理了本項(xiàng)目采用的關(guān)鍵技術(shù)，進(jìn)行了軟件分析和設(shè)計(jì)，最后提供了各模塊的詳細(xì)實(shí)現(xiàn)過(guò)程。本研究可為后續(xù)微信小程序開發(fā)提供基礎(chǔ)，并為未來(lái)相關(guān)類型的應(yīng)用程序開發(fā)提供技術(shù)支持。