蔣文娟 蘇喜紅 孟麗珍

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

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

DOI：10.11907/rjdk.192287開放科學（資源服務）標識碼（0SID）：

中圖分類號：TP319文獻標識碼：A 文章編號：1672-7800（2020）006-0141-05

0 引言

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

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

1.1 音頻播放Audio對象

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

1.2 接口技術(shù)

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

1.3 隨機算法原理

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

2 系統(tǒng)分析

2.1 功能分析

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

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

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

3 軟件設計及實現(xiàn)

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

3.1 音樂播放模塊設計

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

3.2 音樂搜索模塊設計

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

3.3 進度條控制模塊設計

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

3.4 嵌入微信模塊設計

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

3.5 UI設計

在瀏覽器運行界面，采用HTML5語言加CSS3樣式布局。

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

第二層Div是歌曲名稱和歌手名字，用來顯示當前播放歌曲對應的歌名和歌手名。

第三層Div是快進、快退、播放、暫停模塊。播放暫停模塊的背景顯示對應歌曲的歌手海報。

第四層Div是歌曲進度條模塊，進度條右邊對應歌曲播放時間，進度條左邊對應歌曲總時間。

第五層Div是歌詞模塊，播放歌曲會顯示對應的歌詞并以不同顏色顯示出來，顯示完后恢原來顏色。

第六層Div是歌手簡介，包括姓名、性別、國籍等。播放哪首歌曲就顯示對應的哪首歌的歌手信息。

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

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

3.6 數(shù)據(jù)庫設計

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

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

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

4.1 播放控制模塊

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

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

4.2 進度條控制模塊

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

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

4.3 歌詞控制模塊

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

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

4.4 簡介模塊

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

控制歌手基本信息，關(guān)鍵技術(shù)點同樣是Ajax請求。歌手基本信息存儲在本地數(shù)據(jù)庫中，通過不同參數(shù)的接口請求數(shù)據(jù)，獲取到數(shù)據(jù)并放到對應的元素中加以展示。

4.5 在線搜索模塊

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

4.6 嵌入微信模塊

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

5 結(jié)語

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