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

微信音乐播放器开发

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

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

 

在前两期教程中我们早已将前台播放器界面、后台音乐内容管理以及数据通信接口完结了,未来要做的作业正是编辑代码让前台播放器利用通信接口来调用后台音乐内容,完结部分播放器操作。

 

事先的前台页面是兑现播放器效果表现和离线播放,所以在组成的时候对前边的html代码做了1部分调动,去除了音乐封面、音乐音信以及音乐url等,那里就不主要讲了,有趣味的意中人可以将左右七个文件做个对照。

 

下边重点来讲怎么样行使JS来成功多少调用以及播放器操作,全数的代码都在第4玖行<script>之后,首先是开始化播放器页面,如下图:

 

图片 1

第拾1、7三行是概念1些变量,同时新建2个播放器类,类的定义在common.js里,这一个类是有关于播放器的一部分绑定操作,比如播放、暂停,检查测试歌曲载入和播放时间,检验歌曲是不是播放完结等,有趣味的能够去看下。

 

第84行是jquery的1种语法,表示当页面加载完成时实施这么些函数,也便是眼前台页面加载成功后进行该函数里的有的先后。

 

第捌六行那一个函数定义也在common.js里,是将歌曲列表层隐藏起来,隐藏的格局是收获当前页面包车型客车增幅,然后将列表左偏移页面宽度。

 

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

 

第三一7行播放器类绑定播放器控件。

 

第11玖行到126行取得前端页面url传递的参数,1个是歌曲的ID,一个是微信用户ID。播放器前端页面是三个.html的静态页面,由此获得url参数是透过location.search来赢得的,parseQuery()函数是用来拍卖获取的多寡的。

 

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

 

第130行通过get_list函数从服务器获取歌曲列表音讯,更新列表内容。

 

get_song()是歌曲详细消息获取的函数,如下图:

 

图片 2

该函数的参数有五个,几个是song_id,即须要取得歌曲的ID号,播放器切换上下歌曲、歌曲列表点选歌曲都是调用那个函数将歌曲ID传递到服务器上,另贰个参数opne_id是微信用户ID,首假使扶持判断该歌曲是否为用户表态喜欢的歌曲。

 

获取歌曲音讯运用的是Ajax那种异步获取的章程,那样能够在不刷新当前页面包车型地铁气象下从服务器上获得多少,更新当前页面包车型地铁有个别剧情,它也分GET和POST二种形式,那里都以用了GET格局。

 

Ajax的格式是$.ajax({进度}),当中有局地必写参数:

 

UOdysseyL:是指服务器接口地址,由于应用的是get的格局,所以除了地址外还要将参数字传送递过去,在此间传递过去的是t=jsonp(服务器重返数据的格式)、song_id(歌曲ID)、open_id(微信用户ID),接口地址为服务器上wxgetmusic.php,那里请各位修改下sae的域名

 

DATATYPE:接受多少的格式

 

JSONP:校验的变量名

 

TIMEOUT:保持三番五次最大时间,超越则断开

 

SUCCESS:通信成功后实施事件

 

当song_id=0,open_id=aaa那样条件下,前端页面去央浼服务器时,服务器再次来到数据会如下:

 

图片 3

jQueryXXXX那一个是校验的变量名,前边正是json格式的歌曲音信数据,包罗歌曲新闻、上1首下壹首的ID号等。获取到这个数量后就能够对应更新播放器内容。

 

第35二到155行是立异歌曲名称、演唱者、歌曲表明、歌曲封面,当中.html()是jquery的函数,表示替换钦赐控件的内容,.css()也是jquery的函数,表示修改控件的体制。

 

第贰5八行是创新播放器控件的歌曲url,即第1八行<audio>的src。

 

第360到162行是给全局变量赋值,那八个变量在起初化的时候定义了,分别对应上1首、下壹首和当下歌曲。

 

第二64到171行是基于再次回到的表态标识来判断当前歌曲的欣赏样式,即红心照旧灰心。

 

第37伍行是当接口文件再次来到错误,即wxgetmusic.php里出现throw new
Exception(错误消息)跳出时,将错误消息呈现出来。

 

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

 

图片 4

 

结构和方面大致,分化的是那里url的参数多了do=like,那样wxgetmusic.php就会接到到do那么些参数为like,表示执行第4肆到第10八行用户表态的操作。

 

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

 

图片 5

那三个函数只是做了部分逻辑判断,通过prev_id和next_id两个全局变量来规定是还是不是实施播放操作,播放操作照旧调用了get_song()。

 

get_list()是收获歌曲列表函数,如下图:

 

图片 6

这里的关键有八个:

 

第1四⑦行到25二行判断获得全体歌曲列表依旧喜欢歌曲列表。

 

第一62行到27肆行是歌曲列表内容显示格式整理,由于服务器再次来到的歌曲列表是一个数组,因而在那边用$.each做数组的读取,然后拼接成贰个个<dl>内容块,最终全体替换fmlistdiv的始末。

 

第二7伍行到2八柒行是页码区内容展现,page是服务器再次来到的当前页码,假使当前页码不为一则意味不是首页,由此要显得首页和上1页按钮,real_page是服务器再次回到的总页数,假使当前页码不对等总页数表示不是尾页,因而要出示尾页和下壹页。

 

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

 

图片 7

以此函数只是多了一步,就是把列表隐藏起来,然后实施get_song。

 

至于前台页面和后台音乐数据整合便是这么些,最终发个微信接口文件的代码,如下图:

 

图片 8

 

那是多个正经的微信图像和文字音信回复格式,要小心的是图像和文字音讯地址Url那个赋值,笔者除了把播放器url地址放上之外,还有对应的参数,在那之中0表示私下认可歌曲ID,&&是分隔符,后边的$fromUsername是当下微信用户的ID号,那样当用户点击该图像和文字消息时,实际访问的地方是:

 

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

 

播放器也就足以获得到歌曲ID和微信用ID了!关于播放器的课程到此甘休,希望对大家有帮扶!

 

除此以外自定蒿子杆单接口近来有了新变化,以前写的接口文件并未有与时俱进,作者偷闲会更新下提要求大家!

相关文章