当前位置：首页 > news >正文

微信小程序音频后台播放功能

news 2025/7/5 20:49:30

微信小程序在手机息屏后依旧能播放音频，需要使用 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();
}

效果：