微信小程序播放背景音乐

原创

已于 2023-05-12 10:42:47 修改 · 2k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

于 2023-05-12 10:37:22 首次发布

本文介绍了如何在微信小程序中实现背景音频的管理和控制，确保音频在小程序切后台时仍能继续播放。通过wx.getBackgroundAudioManager获取后台音频管理器，设置requiredBackgroundModes属性，并在onLoad、onUnload和onHide事件中控制音频的播放和停止，以及利用onEnded事件实现循环播放功能。

1.实现效果

在这里插入图片描述

2.实现原理
1、wx.getBackgroundAudioManager ：
获取全局唯一的背景音频管理器。小程序切入后台，如果音频处于播放状态，可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。

从微信客户端6.7.2版本开始，若需要在小程序切后台后继续播放音频，需要在 app.json 中配置 requiredBackgroundModes 属性。开发版和体验版上可以直接生效，正式版还需通过审核。
2、onUnload和onHide事件中暂停音乐的播放。
3、onShow中调用播放事件
4、在播放结束的事件中，再次播放，以达到循环播放的效果。

3.实现代码

<image src="{
  
  {checked?'../img/stop.png':'../img/play.png'}}" class="music {
  
  {!checked && 'circle'}}" catchtap="checkMusic"></image>
<view catchtap="toNext" class="btn"> 去下一个页面</view>