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

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

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

效果:

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

相关文章
|
8月前
|
存储 缓存 运维
微信读书十周年,后台架构的技术演进和实践总结
微信读书经过了多年的发展,赢得了良好的用户口碑,后台系统的服务质量直接影响着用户的体验。团队多年来始终保持着“小而美”的基因,快速试错与迭代成为常态。后台团队在日常业务开发的同时,需要主动寻求更多架构上的突破,提升后台服务的可用性、扩展性,以不断适应业务与团队的变化。
326 0
|
12月前
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
6473 38
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
|
8月前
|
监控 数据可视化 BI
微信计数器统计工具,QQ统计器手机APP,通过autojs实现后台
这是一款基于AutoJS的微信/QQ新增好友监控脚本,具备后台运行、自动统计每日新增好友数量、生成简单报表及定时提醒功能。
|
小程序
小程序提交数据到后台做加法运算
小程序提交数据到后台做加法运算
146 0
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
3580 12
|
存储 自然语言处理 小程序
微信小程序多语言切换神器:简繁体切换功能完全指南
随着全球化的发展,支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能,以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数,开发者可以方便地实现语言切换,从而提升用户体验。文章中还附带了示例代码和效果图,帮助读者更好地理解和应用这一功能。
899 0
微信小程序多语言切换神器:简繁体切换功能完全指南
|
小程序 JavaScript Java
小程序访问java后台
小程序访问java后台
155 1
|
小程序 安全 数据库连接
为什么已经提交的小程序无法连接后台服务?
【10月更文挑战第17天】为什么已经提交的小程序无法连接后台服务?
1596 0
|
小程序 Java
小程序通过get请求提交数据到java后台
小程序通过get请求提交数据到java后台
145 0
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
596 0

热门文章

最新文章