基于微信小程序的音樂播放器研究與實現

蔣文娟 蘇喜紅 孟麗珍

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

關鍵詞：音樂播放器;微信小程序;接口技術;H5技術

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

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

0 引言

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

1 關鍵技術

1.1 音頻播放Audio對象

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

1.2 接口技術

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

1.3 隨機算法原理

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

2 系統分析

2.1 功能分析

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

2.2 系統總體架構分析

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

3 軟件設計及實現

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

3.1 音樂播放模塊設計

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

3.2 音樂搜索模塊設計

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

3.3 進度條控制模塊設計

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

3.4 嵌入微信模塊設計

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

3.5 UI設計

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

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

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

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

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

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

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

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

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

3.6 數據庫設計

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

4 系統功能實現

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

4.1 播放控制模塊

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

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

4.2 進度條控制模塊

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

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

4.3 歌詞控制模塊

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

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

4.4 簡介模塊

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

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

4.5 在線搜索模塊

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

4.6 嵌入微信模塊

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

5 結語

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