基于微信小程序的音乐播放器研究与实现

蒋文娟 苏喜红 孟丽珍

摘要：微信小程序开发环境和开发者生态已成熟，各种小程序深受用户喜爱。为满足微信使用者对于音乐播放器操作简单、不占內容的需求，提出一款基于微信小程序的音乐播放器的完整开发思路和设计实现方法，为后续开发者提供基础。该软件基于流行的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音乐播放器、嵌入式播放器、音乐播放网站等满足了人们对于音乐的享受。随着微信生态的成熟，微信小程序播放器更是激发了开发者的热情。基于目前成熟的HTML5技术，结合微信小程序开发简捷、少存储空间、易使用及推广等特点，开发了基于微信小程序的音乐播放器。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 结语

为实现基于微信小程序的音乐播放器开发，本文对目前媒体类播放器的各种形式进行比较，梳理了本项目采用的关键技术，进行了软件分析和设计，最后提供了各模块的详细实现过程。本研究可为后续微信小程序开发提供基础，并为未来相关类型的应用程序开发提供技术支持。