Ajax微信公众号教程(20)微信音乐播放器开发 下

微信音乐播放器开发

 原文:http://www.cnblogs.com/imaker/p/6252667.html

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

 

当前边少要教程被我们已将前台播放器界面、后台音乐内容管理和数据通讯接口就了,现在一经开的业务就是编代码让前台播放器利用通讯接口来调用后台音乐内容,实现有播放器操作。

 

前的前台页面是落实播放器效果表现和离线播放,所以在做的当儿对前的html代码做了一部分调整,去除了音乐封面、音乐信息与音乐url等,这里就无重大出口了,有趣味之爱侣可将左右两单文件举行只对照。

 

下要来讲如何下JS来形成多少调用以及播放器操作,所有的代码都当第69执<script>之后,首先是初始化播放器页面,如下图:

 

Ajax 1

第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()是歌曲详细信息获取的函数,如下图:

 

Ajax 2

欠函数的参数有个别只,一个凡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这样条件下,前端页面去请服务器时,服务器返回数据会如下:

 

Ajax 3

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()是用户点击喜欢按钮事件之函数,如下图:

 

Ajax 4

 

结构和点差不多,不同之是此处url的参数多了do=like,这样wxgetmusic.php就见面收到到do这个参数为like,表示执行第44暨第88行用户表态的操作。

 

prev_song()和next_song()是对准诺上下歌曲按钮的函数,如下图:

 

Ajax 5

当即点儿独函数只是做了有逻辑判断,通过prev_id和next_id两只全局变量来确定是否履播放操作,播放操作还是调用了get_song()。

 

get_list()是得到歌曲列表函数,如下图:

 

Ajax 6

这边的重点有三单:

 

第247实施到252实践判断得到全部歌曲列表还是好歌曲列表。

 

第262尽至274行是歌曲列表内容显示格式整理,由于服务器返回的歌列表是一个频繁组,因此于此处用$.each做数组的读取,然后拼接成一个个<dl>内容块,最后整体替换fmlistdiv的始末。

 

第275尽至287尽是页码区内容展示,page是服务器返回的当前页码,如果手上页码不呢1虽说表示未是首页,因此要来得首页和落得同一页按钮,real_page是服务器返回的毕竟页数,如果手上页码不等于总页数表示未是尾页,因此若显得尾页和下一致页。

 

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

 

Ajax 7

其一函数只是大抵矣同步,就是管列表隐藏起来,然后实施get_song。

 

有关前台页面和后台音乐数据整合就是这些,最后发个微信接口文件之代码,如下图:

 

Ajax 8

 

马上是一个正规的微信图文信息回复格式,要专注的是图文信息地址Url此赋值,我除了将播放器url地址放上外,还发照应的参数,其中0表示默认歌曲ID,&&是分开隔符,后面的$fromUsername是现阶段微信用户之ID号,这样当用户点击该图文信息不时,实际访问的地点是:

 

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

 

播放器也尽管得获到歌曲ID和微信用ID了!关于播放器的教程到是结束,希望对大家产生拉!

 

此外从定义菜单接口最近生矣初转变,之前写的接口文件没有与时俱进,我偷闲见面更新下提供被大家!

相关文章