自由尋覓快樂別人從沒法感受

0%

小程序获取QQ音乐播放链接插件

发表于 更新于 阅读次数：

前言

最近参加了一个微信小程序开发大赛，其中用到了音乐播放功能。于是在小程序官方文档和插件库中逛了一圈，但是官方没有提供对QQ音乐的搜索和获取播放链接等支持，插件库中的插件寥寥无几，并不好用。无奈之下只好自己写一个关于QQ音乐的插件，来完成相应的搜索，获取播放链接等功能。

在开始介绍插件功能之前，特别感谢简书tisa提供了QQ音乐相应的api。这个插件就是基于这些api进行的封装。

插件项目地址：https://github.com/FisherWY/QQMusicPlugin

下面正式开始介绍插件使用方法

下载插件

前往下载页面，下载最新的v0.2版本，将下载的文件解压放在小程序utils文件夹中，解压后的文件目录结构如下图所示：

文件目录结构

添加合法Request域名

前往微信公众平台->开发->开发设置->服务器域名。添加以下request合法域名，该域名用于音乐的搜索等

https://c.y.qq.com

添加合法域名

页面中引入插件

在小程序页面js文件中引用qqMusicTools.js，注意相对路径，这里演示的页面路径为/pages/index/

1
const musicTool = require("../../utils/QQMusicPlugin/qqMusicTools.js")

引入插件

搜索音乐

搜索音乐接口searchMusic（使用PromiseJS语法）

1
2
3
musicTool.searchMusic(1, 10, "墙纸").then(function(searchRes) {
    console.log(searchRes)
})

接口参数说明：

  • page：搜索页码

  • number：每页搜索记录数量

  • keyword：搜索关键字

搜索接果如下图：

搜索音乐

播放音乐

获取播放音乐链接接口playMusic接受1个参数：filename。表示要播放的音乐的文件名，文件名来自searchMusic结果中的songmid（使用PeomiseJS语法）

1
2
3
musicTool.playMusic("0021rBlZ1gQiLy").then(function(playRes) {
    console.log(playRes)
})

接口参数说明：

  • filename：要播放的音乐的文件名，文件名来自searchMusic结果中的songmid

返回结果如下图：

获取播放链接

获取专辑图片

获取音乐专辑图片接口getAlbumImage（使用Promise语法）（在v0.1版本中，搜索音乐接口已经集成了该接口，专辑图片字段名为albumImg）

1
2
3
musicTool.getAlbumImage(6271293).then(function(res) {
    console.log(res)
})

参数说明：

  • albumId：该参数来自searchMusic结果中的albumId

返回结果如下图：

获取专辑图片

获取热歌榜

获取热门音乐榜Top100歌单接口getTopMusic不需要任何参数，直接调用即可获得返回结果（使用Promise语法）

1
2
3
musicTool.getTopMusic().then(function(res) {
    console.log(res)
})

返回结果如下图：

获取热歌榜

随机推荐歌单

随机推荐歌单接口radomRecommend不需要任何参数，直接调用即可获得返回结果（使用Promise语法）

1
2
3
musicTool.randomRecommend().then(function(res) {
  console.log(res)
})

返回结果如下图：

随机推荐歌单

播放音乐

播放音乐，这里使用BackgroundAudioManager演示

1
2
3
4
5
6
7
8
9
10
// 获取全局唯一的背景音乐管理器
const bgAudioManager = wx.getBackgroundAudioManager()
// 音乐标题
bgAudioManager.title = 'Music'
// 音乐歌手名
bgAudioManager.singer = 'Singer'
// 专辑封面图片
bgAudioManager.coverImgUrl = 'imgUrl'
// 音乐播放链接，设置后自动开始播放
bgAudioManager.src = playRes

整体使用流程

代码整合到一块，整个使用流程如下（需要注意异步问题）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const bgAudioManager = wx.getBackgroundAudioManager();
// 搜索音乐
musicTool.searchMusic(1, 10, "绿色").then(function(searchRes) {
  console.log(searchRes)
})
// 获取播放链接
musicTool.playMusic("0021rBlZ1gQiLy").then(function(playRes) {
  console.log(playRes)
  bgAudioManager.title = 'Music'
  bgAudioManager.src = playRes
})
// 获取专辑封面
musicTool.getAlbumImage(6271293).then(function(res) {
  console.log(res)
})
// 获取top100音乐
musicTool.getTopMusic().then(function(res) {
  console.log(res)
})
// 随机推荐音乐
musicTool.randomRecommend().then(function(res) {
  console.log(res)
})

特别说明

  • 当要播放的音乐属于收费音乐时无法播放 ，具体表现为获取token返回值为空

  • 请求过程中需要注意js中的异步问题

  • 微信小程序的BackgroundAudioManager存在部分链接无法播放的问题，因此建议使用InnerAudioContext，无法播放的详细原因参见JabinGP的简书