微信公众号教程（20）微信音乐播放器开发 下

Posted 2020-08-26 贝创工作室

微信音乐播放器开发

 

五、音乐播放器前后端整合

 

在前两期教程中我们已经将前台播放器界面、后台音乐内容管理以及数据通讯接口完成了，现在要做的事情就是编写代码让前台播放器利用通讯接口来调用后台音乐内容，实现一些播放器操作。

 

之前的前台页面是实现播放器效果展现和离线播放，所以在整合的时候对之前的html代码做了一些调整，去除了音乐封面、音乐信息以及音乐url等，这里就不重点讲了，有兴趣的朋友可以将前后两个文件做个对比。

 

下面重点来讲如何使用JS来完成数据调用以及播放器操作，所有的代码都在第69行<script>之后，首先是初始化播放器页面，如下图：

 

第71、73行是定义一些变量，同时新建一个播放器类，类的定义在common.js里，这个类是有关于播放器的一些绑定操作，比如播放、暂停，检测歌曲载入和播放时间，检测歌曲是否播放完毕等，有兴趣的可以去看下。

 

第74行是jquery的一种语法，表示当页面加载完毕时执行这个函数，也就是当前台页面加载完成后执行该函数里的一些程序。

 

第76行这个函数定义也在common.js里，是将歌曲列表层隐藏起来，隐藏的方法是获取当前页面的宽度，然后将列表左偏移页面宽度。

 

第77到115行是对播放器上的一些按钮进行事件绑定，$(‘#按钮名‘).click(函数)相当于在按钮上加onclick事件，即当用户点击按钮时触发操作。

 

第117行播放器类绑定播放器控件。

 

第119行到126行获取前端页面url传递的参数，一个是歌曲的ID，一个是微信用户ID。播放器前端页面是一个.html的静态页面，因此获取url参数是通过location.search来获取的，parseQuery()函数是用来处理获取的数据的。

 

第128行通过get_song函数从服务器获取歌曲详细信息，更新播放器。

 

第130行通过get_list函数从服务器获取歌曲列表信息，更新列表内容。

 

get_song()是歌曲详细信息获取的函数，如下图：

 

该函数的参数有两个，一个是song_id，即需要获取歌曲的ID号，播放器切换上下歌曲、歌曲列表点选歌曲都是调用这个函数将歌曲ID传递到服务器上，另一个参数opne_id是微信用户ID，主要是辅助判断该歌曲是否为用户表态喜欢的歌曲。

 

获取歌曲信息采用的是Ajax这种异步获取的方式，这样可以在不刷新当前页面的情况下从服务器上拿到数据，更新当前页面的一些内容，它也分GET和POST两种模式，这里都是用了GET模式。

 

Ajax的格式是$.ajax({过程})，其中有一些必写参数：

 

URL:是指服务器接口地址，由于采用的是get的方式，所以除了地址外还要将参数传递过去，在这里传递过去的是t=jsonp（服务器返回数据的格式）、song_id（歌曲ID）、open_id（微信用户ID），接口地址为服务器上wxgetmusic.php，这里请各位修改下sae的域名。

 

DATATYPE:接受数据的格式

 

JSONP:校验的变量名

 

TIMEOUT:保持连接最大时间，超过则断开

 

SUCCESS：通讯成功后执行事件

 

当song_id=0，open_id=aaa这样条件下，前端页面去请求服务器时，服务器返回数据会如下：

 

jQueryXXXX这个是校验的变量名，后面就是json格式的歌曲信息数据，包括歌曲信息、上一首下一首的ID号等。获取到这些数据后就可以相应更新播放器内容。

 

第152到155行是更新歌曲名称、演唱者、歌曲说明、歌曲封面，其中.html()是jquery的函数，表示替换指定控件的内容，.css()也是jquery的函数，表示修改控件的样式。

 

第158行是更新播放器控件的歌曲url，即第38行<audio>的src。

 

第160到162行是给全局变量赋值，这三个变量在初始化的时候定义了，分别对应上一首、下一首和当前歌曲。

 

第164到171行是根据返回的表态标识来判断当前歌曲的喜欢样式，即红心还是灰心。

 

第175行是当接口文件返回错误，即wxgetmusic.php里出现throw new Exception(错误信息)跳出时，将错误信息显示出来。

 

like()是用户点击喜欢按钮事件的函数，如下图：

 

 

结构和上面差不多，不同的是这里url的参数多了do=like，这样wxgetmusic.php就会接收到do这个参数为like，表示执行第44到第88行用户表态的操作。

 

prev_song()和next_song()是对应上下歌曲按钮的函数，如下图：

 

这两个函数只是做了一些逻辑判断，通过prev_id和next_id两个全局变量来确定是否执行播放操作，播放操作还是调用了get_song()。

 

get_list()是获取歌曲列表函数，如下图：

 

这里的重点有三个：

 

第247行到252行判断获取全部歌曲列表还是喜欢歌曲列表。

 

第262行到274行是歌曲列表内容展示格式整理，由于服务器返回的歌曲列表是一个数组，因此在这里用$.each做数组的读取，然后拼接成一个个<dl>内容块，最后整体替换fmlistdiv的内容。

 

第275行到287行是页码区内容展示，page是服务器返回的当前页码，如果当前页码不为1则表示不是首页，因此要显示首页和上一页按钮，real_page是服务器返回的总页数，如果当前页码不等于总页数表示不是尾页，因此要显示尾页和下一页。

 

get_song_from_list()列表歌曲点击播放函数，如下图：

 

这个函数只是多了一步，就是把列表隐藏起来，然后执行get_song。

 

关于前台页面和后台音乐数据整合就是这些，最后发个微信接口文件的代码，如下图：

 

 

这是一个标准的微信图文消息回复格式，要注意的是图文消息地址Url这个赋值，我除了把播放器url地址放上之外，还有相应的参数，其中0表示默认歌曲ID，&&是分隔符，后面的$fromUsername是当前微信用户的ID号，这样当用户点击该图文消息时，实际访问的地址是：

 

播放器页面地址?歌曲ID=0&&微信用户ID=xxx

 

播放器也就可以获取到歌曲ID和微信用ID了！关于播放器的教程到此完毕，希望对大家有帮助！

 

另外自定义菜单接口最近有了新变化，之前写的接口文件没有与时俱进，我抽空会更新下提供给大家！