使用小程序云开发添加背景音乐

使用小程序云开发添加背景音乐且实现后台播放

在网上看了很多种方法,有一些对浏览器有一定的要求,于是懒癌患者想出了另一种办法

首先,要在小程序里添加音频,需要在js里写一段代码:
(此方法来自微信官方https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html)

//index.js
const backgroundAudioManager = wx.getBackgroundAudioManager()

backgroundAudioManager.title = '此时此刻'
backgroundAudioManager.epname = '此时此刻'
backgroundAudioManager.singer = '许巍'
backgroundAudioManager.coverImgUrl = 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000'
// 设置了 src 之后会自动播放
backgroundAudioManager.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'

如果想要让音乐继续在后台播放,需要在app.json里加入

"requiredBackgroundModes": [
    "audio"
  ]

此时小程序应该已经可以顺利播放许巍的此时此刻了
接下来把歌曲换成自己想要的
标题和歌手的更改请自行参考官方文档,非常简单

在网上提前下载好MP3文件
使用微信小程序的云开发功能 上传文件

使用小程序云开发添加背景音乐_第1张图片

上传文件后,点击文件名就会出现文件的详细信息
复制其中的下载地址就好啦
把下载地址写在src里!
图片同理

使用小程序云开发添加背景音乐_第2张图片

千万记得,把权限改成所有用户可读,仅创建者可写!!!不然无法访问!!!
使用小程序云开发添加背景音乐_第3张图片

至此,顺利播放
并且手机上测试可以后台播放
文件大一点也没啥关系
在这里插入图片描述

你可能感兴趣的:(微信小程序,微信小程序,云开发)