微信小程序在手机息屏后依旧能播放音频,需要使用 wx.getBackgroundAudioManager()
方法创建后台音乐播放器,并将音乐播放任务交给这个后台播放器。
具体实现步骤如下:
小程序页面中,使用 wx.getBackgroundAudioManager()
方法创建后台音乐播放器实例。
const backgroundAudioManager = wx.getBackgroundAudioManager();
设置音乐播放器的 src
属性为音频文件的地址,并调用 play()
方法开始播放音乐。
backgroundAudioManager.src = '音频文件地址'; backgroundAudioManager.title = '音频标题'; backgroundAudioManager.coverImgUrl = '音频封面地址'; backgroundAudioManager.play();
在播放过程中,如果用户将手机屏幕锁定或者切换到其他应用程序,音乐播放器会自动转为后台播放状态。
如果需要在后台播放音频时显示通知栏信息、响应用户的操作等功能,还需要在小程序的 app.json
文件中进行设置,如下所示:
{ "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "小程序标题", "navigationBarTextStyle": "black" }, "requiredBackgroundModes": ["audio"] }
设置 requiredBackgroundModes
为 ["audio"]
,表示需要在后台播放音频时在通知栏显示音乐播放的信息。
以下是实现该功能的示例代码:
1. 在小程序的页面中引入背景音频管理器:
const backgroundAudioManager = wx.getBackgroundAudioManager();
2. 设置音频的播放地址和标题:
backgroundAudioManager.title = '音频标题'; backgroundAudioManager.src = '音频地址';
3. 监听音频播放事件,更新进度条和时长:
backgroundAudioManager.onPlay(() => { // 音频开始播放时触发的事件 // 更新进度条和时长的状态 }); backgroundAudioManager.onTimeUpdate(() => { // 音频播放进度更新时触发的事件 // 更新进度条和时长的状态 });
4. 在页面中显示进度条和时长:
<view>当前播放进度:{{currentTime}}</view> <view>总时长:{{duration}}</view>
5. 在页面的生命周期函数中监听音频的播放状态:
onShow: function () { backgroundAudioManager.onPlay(() => { // 音频开始播放时触发的事件 // 更新进度条和时长的状态 }); backgroundAudioManager.onTimeUpdate(() => { // 音频播放进度更新时触发的事件 // 更新进度条和时长的状态 }); }, onHide: function () { // 页面隐藏时暂停音频的播放 backgroundAudioManager.pause(); }
效果:
以上代码仅为示例,具体实现方式可能根据你的需求有所差异。你可以根据自己的实际情况进行调整和完善