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

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

效果:

以上代码仅为示例,具体实现方式可能根据你的需求有所差异。你可以根据自己的实际情况进行调整和完善

相关推荐
山东布谷科技官方20 小时前
高并发视频直播系统源码:从直播架构设计开发到搭建部署上线
音视频·直播并发
B站_计算机毕业设计之家1 天前
基于大数据的短视频数据分析系统 Spark哔哩哔哩视频数据分析可视化系统 Hadoop大数据技术 情感分析 舆情分析 爬虫 推荐系统 协同过滤推荐算法 ✅
大数据·hadoop·爬虫·spark·音视频·短视频·1024程序员节
星光一影1 天前
Java医院管理系统HIS源码带小程序和安装教程
java·开发语言·小程序
毕设源码-郭学长1 天前
【开题答辩全过程】以 基于微信小程序的个性化饮品定制点餐系统设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
音视频牛哥1 天前
低空经济的实时神经系统:空地一体化音视频架构的技术演进
机器学习·计算机视觉·音视频·低空经济·人工智能+·evtol·ai感知网络
马尚道1 天前
uniapp陪诊小程序
微信小程序
北极糊的狐1 天前
用狸窝转换器转换视频后文件变大的问题排查
microsoft·音视频
碧海银沙音频科技研究院1 天前
ES7243E ADC模拟音频转i2S到 BES I2S1 Master输出播放到SPK精准分析
人工智能·算法·音视频
音视频牛哥1 天前
从“十五五”规划看中国视频基础设施的下一个五年:SmartMediaKit 的战略跃迁与时代机遇
人工智能·音视频·大牛直播sdk·十五五规划具身智能·十五五规划音视频·低空经济低延迟音视频方案·具身智能rtsp rtmp
eguid_11 天前
【HLS】Java实现统计HLS的m3u8清单中所有ts切片的视频持续时长
java·音视频·hls·1024程序员节·m3u8·ts时长