258资源分享网

本文带大家开发一个音乐播放器微信小程序——微音乐。该播放器通过QQ音乐接口获取音乐相关数据，首先在页面中显示一个音乐分类列表，用户选择分类之后从QQ音乐中查询获取符合要求的音乐列表，在这个音乐列表中单击一首音乐即进入播放页面进行播放。另外，还需要做一个查询功能，可按歌手或音乐名称进行查询。

QQ音乐API

与“微天气”案例类似，本案例也是通过互联网中已有的API来获取音乐信息。在互联网上这类API很多，本案例使用“易源接口”网站提供的QQ音乐接口，易源接口网址如下：

https://www.showapi.com/

认识易源接口网站

在浏览器中打开易源接口网站，可看到如图1所示的界面。从网页左边的“API分类导航”列表可看到，该网站提供了不同种类的API，在大类中又有很多小类，天气预报的接口也有。

在易源接口网站中提供的接口很多是免费的，要使用这些免费接口，也需要在网站中注册账号，然后申请使用。申请成功之后，在“我的应用”中就可看到申请应用的appid，如图2所示。在应用同一行的secret列单击“查看密钥”，将弹出对话框显示该应用的密钥。将appid和secret复制下来，以备程序中使用。

图1 易源接口

图2 我的接口

QQ音乐接口

本案例使用易源接口提供的“QQ音乐”接口，其说明如图3所示。可以看到，这个接口是免费使用的。

图3 QQ音乐接口

在图3所示页面的左侧“接入点列表”中可看到该API提供了3个接入点。

1. 热门榜单

在图3所示页面中，单击左侧的“热门榜单”，将显示该接入点的详细信息。

热门榜单接入点的URL地址如下：

请求该URL地址时，还需要传入一些参数，主要有以下这些。

showapi_appid：这是用户申请的appid。

showapi_sign：这是用户应用的密钥。

topid：这是音乐分类编码（如5表示内地音乐，6表示港台音乐）。

该接入点返回的JSON数据格式如下（与易源接口官方提示的内容有些不同）：

{ "showapi_res_code": 0, "showapi_res_error": "", "showapi_res_body": { "ret_code": 0, "pagebean": { "songlist": [{ "songname": "一定要幸福 (《咱们相爱吧》电视剧主题曲)", "seconds": 294, "albummid": "003V7SAg16Ed0F", "songid": 109127914, "singerid": 4607, "albumpic_big": " 0/F/003V7SAg16Ed0F.jpg", "albumpic_small": " mid_album_90/0/F/003V7SAg16Ed0F.jpg", "downUrl": "? vkey=3B0957F1A4CDCAD8875251834B7C0DA2D4287FA3BC1A5F73AA 002D3833AE5685FE6168E75BBDB277CB0635E3B483CB6E3A073 E7A1B9723A4&guid=2718671044", "url": " 109127914.m4a?fromtag=46", "singername": "张靓颖", "albumid": 1679081 }, …… ], "total_song_num": 100, "ret_code": 0, "update_time": "2016-11-17", "color": 0, "cur_song_num": 100, "comment_num": 1010, "currentPage": 1, "song_begin": 0, "totalpage": 1 } } }

从上面的JSON数据可看出，该接入点返回的数据中，音乐列表数据保存在songlist数组中，该数组中的每一个元素是一首音乐的信息，各字段的含义如下：

"songname":音乐名称, "seconds": 时长, "songid": 音乐ID, "singerid": 歌手id, "albumpic_big": 专辑大图片，高宽300, "albumpic_small": 专辑小图片，高宽90, "downUrl": mp3下载链接, "url": 流媒体地址, "singername": 歌手名, "albumid": 专辑id

2. 根据歌名、人名查询歌曲

热门榜单接入点的URL地址如下：

请求该URL地址时，还需要传入一些参数，主要有以下这些。

showapi_appid：这是用户申请的appid。

showapi_sign：这是用户应用的密钥。

keyword：查询关键字（人名或歌名）。