小程序开发API之背景音频BackgroundAudioManager

最新推荐文章于 2025-01-15 11:40:15 发布
最新推荐文章于 2025-01-15 11:40:15 发布
阅读量6.3k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： ONE PIECE--小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/JackJia2015/article/details/86712676
本文介绍了小程序的旧版背景音频API的使用，包括playBackgroundAudio、pauseBackgroundAudio等，并强调这些接口已停止维护，推荐使用wx.getBackgroundAudioManager()获取全局唯一的背景音频管理器。在新版API中，详细讲解了BackgroundAudioManager的属性和方法，如play、pause、seek等，以及如何在app.json中配置以支持后台播放。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

playBackgroundAudio、stopBackgroundAudio、pauseBackgroundAudio、seekBackgroundAudio、onBackgroundAudioStop、onBackgroundAudioPlay、onBackgroundAudioPause、getBackgroundAudioPlayerState、接口停止维护，请使用 wx.getBackgroundAudioManager 代替

旧背景音频

wx.playBackgroundAudio(Object object)

使用后台播放器播放音乐。对于微信客户端来说，只能同时有一个后台音乐在播放。当用户离开小程序后，音乐将暂停播放；当用户在其他小程序占用了音乐播放器，原有小程序内的音乐将停止播放。本接口停止维护，请使用 wx.getBackgroundAudioManager 代替
参数Object object
在这里插入图片描述

wx.pauseBackgroundAudio(Object object)

暂停播放音乐。本接口停止维护，请使用 wx.getBackgroundAudioManager 代替
参数Object object在这里插入图片描述

wx.stopBackgroundAudio(Object object)

停止播放音乐。本接口停止维护，请使用 wx.getBackgroundAudioManager 代替
参数Object object在这里插入图片描述

最低0.47元/天 解锁文章

200万优质内容无限畅学
小程序框架背景音频管理：音乐播放器实现
小程序开发
05-29 745
在短视频和音频内容爆发的时代，小程序作为“即用即走”的轻应用，需要支持用户在退出页面甚至小程序后继续播放音频（如音乐、有声书）。本文聚焦“背景音频管理”这一小程序开发的核心场景，覆盖从基础概念到实战开发的全流程，帮助开发者解决“如何让音频在后台持续播放”“如何同步UI状态”“如何处理小程序前后台切换”等关键问题。本文从“为什么需要背景音频管理”入手，通过生活案例类比核心概念，结合微信小程序API讲解技术细节，最后通过完整的音乐播放器实战代码，带读者从理论到实践掌握核心技能。背景音频管理器。
微信小程序wx.getBackgroundAudioManager()背景音频播放
林啾啾的博客
12-16 6280
显现的功能： 开始播放、暂停播放、停止播放、进度条显示（没有做拖拽进度条） 效果 播放状态是个动图（图是网上随便找的，如侵删） 暂停状态是静态图片： app.json设置 首先要在app.json里设置： "requiredBackgroundModes":["audio","backgroundAudioManager"] 目的是使播放器可以息屏播放。 wxml页面显示设置 <view class="spotAudio"> <image src="https://
微信小程序自定义音频组件，自定义滚动条，单曲循环，循环播放
weixin_30677617的博客
07-26 1221
小程序自定义音频组件，带滚动条 摘要：首先自定义音频组件，是因为产品有这样的需求，需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能，所以我们不考虑小程序的 audio 组件，即使官方推荐更强大的 wx.createInnerAudioContext 但是不符合需求，所以这里用到的是 backgroundAudioManager()...
微信小程序BackgroundAudioManager使用中的问题
dbeidouxingf的博客
12-31 751
BackgroundAudioManager设置了src后就会自动播放。点击浮窗关闭按钮时会触发。关闭后再次play无效，需要重新设置src。音频播放结束后会触发。end之后就无法播放，需要重新设置src。想要跳转到指定位置，可以使用seek方法跳转到指定位置。在音频最开始可以播放时候，会触发这个事件，即可以。在音频播放结束end后，也会触发一次事件。时间变化函数，调用频率250ms。后，再调用play方法。
微信小程序BackgroundAudioManager播放m3u8格式音频
小周sri的码农
07-08 4054
小程序中实现背景音乐播放。在这个项目中，也踩了很多坑，记录一下。由于后台给我返回的音频流是m3u8格式的，没有得办法，安全性高，由于实现背景音乐播放，但是设置了backgroundAudioManager.protocol = 'hls';这个，导致，backgroundAudioManager.onEnded这个api，在ios无法检测到，从18年到现在微信至今没有解决，所留下的坑。 实现功能 切换上下首 播放暂停 列表播放 随机播放 单曲播放 定时播放 拖拽播放 定位播放当前.
微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）
程序员战胜
01-27 4724
一、转发分享功能 onShareAppMessage(Object object) Button <button open-type="share" class="item btn"> <text class="iconfont icon-gengduo"></text> </button> /** * 用户点击右上角分享 */ onShareAppMessage: function ({from}) { // f
微信小程序中使用 BackgroundAudioManager 判断是否在播放音乐并实现全局状态监控
qqsgcyd的博客
01-15 687
通过上述步骤，可以轻松地在微信小程序中实现对后台音频播放状态的监控，并且可以在整个小程序生命周期内访问这一状态。这种方法不仅简化了代码逻辑，还提高了用户体验，更加灵活地根据播放状态执行相应的操作。无论是显示播放/暂停按钮，还是在不同页面间共享播放状态，这种做法都提供了一个简单而有效的解决方案。希望本文能帮助您更好地理解和使用接口，提升您的微信小程序开发体验。
小程序 播放音乐 backgroundAudioManager 保护
uygurjan2008的专栏
08-02 324
小程序播放音乐 资源被盗 问题 补漏洞 方案
小程序背景音乐api
big_borther6的博客
01-19 954
1.constbgMusic=wx.getBackgroundAudioManager()//创建背景音乐 退到主屏还用继续播放，ios系统面板可以控制 2.constinnerAudioContext=wx.createInnerAudioContext() 退出就关闭了 用法： 第一个 constbgMusic=wx.getBackgroundAu...
详解小程序BackgroundAudioManager踩坑之旅
12-13
由于贵公司业务发展需要，切图仔开始写起了小程序啦（兴奋地搓小手手） 贵公司是知识付费平台，需要音频播放课程，同时希望用户在退出小程序后依然可以听课。在这种情况下，小程序的API——BackgroundAudioManager就派得上用场啦。 在看完官方文档，信心满满地写完提测后，测试小姐姐找出的bug比我的工资还多！！（:loudly_crying_face::loudly_crying_face::loudly_crying_face:）因此有了本篇文章。 本篇涉及到的几个坑（以下BAM为BackgroundAudioManager的缩写） 一个误区 BAM.onStop() 与 BAM.onEnded() 的坑 BAM.seek() 与 BAM.onSeeked() 的坑 BAM.on
UniApp中的背景音频播放：深入理解uni.getBackgroundAudioManager()
况老师话竞赛&blog
10-29 2590
在移动应用开发中，背景音频播放是一个常见需求，比如音乐播放器、有声读物等应用场景。UniApp提供了强大的背景音频管理器API：uni.getBackgroundAudioManager()，本文将深入探讨如何使用这个API来实现完整的背景音频播放功能。
微信小程序API 背景音频播放管理 wx.getBackgroundAudioManager()
吾行远方
07-02 7891
1、官方文档及注意事项 官方文档 退出当前页面或者小程序，背景音乐继续播放 与pages同级： "requiredBackgroundModes": ["audio"] 2、BackgroundAudioManager 实例，可通过 wx.getBackgroundAudioManager 获取。 // pages/test/test.js const backgroundAudioManag...
php背景音乐合成,录音加背景音乐要怎么做 如何将两个音乐融合
weixin_28754395的博客
03-26 664
点击下载安装软件，安装后打开软件，点击“文件—打开”将两个音频文件添加到软件，这里其实可以直接将音频拖到软件界面的点击“打开”后就直接选中要操作的两个音频文件，一次选中两个文件，然后点击“打开”接可以添加到软件界面了，但是我还是喜欢直接讲将文件拉进来。拉进去后，点击“多轨”模式，右边可以看到会有很多的音轨，将两个音频文件风别拖到两个音轨上(下图是已将一个音轨拖入进去)在拖到第二个音轨的时候会出现以...
微信小程序开发笔记⑩——音频与录音api、背景音频组件api、图片api、加载外部字体和文件api
ww0peo的博客
02-05 789
音频和录音 官方描述 https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/api-limit.html#录音 https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/api-limit.html#音频播放控制 下面实现了一个简单的ktv的功...
音频播放 ios 和 安卓的兼容 wx.getBackgroundAudioManager()
qq_37449852的博客
12-12 1928
由于公司小程序 ‘蜗牛亲子英语’ 涉及到音频播放这一块，写的时候 遇到很多坑， 所以在这里总结一下， 希望能够为 同样在写音频播放这一块的 童鞋解解惑 自行查看 微信官方相关API wx.playBackgroundAudio 这个API官方已经不做更新了，所以你就不用继续研究这个了，可以使用最新功能更强横的 wx.getBackgroundAudioManager() let Backgrou...
ios端微信小程序背景音频调用stop或自然播放结束后无法重新播放bug
飞鱼日记的博客
08-24 2040
问题：微信小程序背景音频BackgroundAudioManager调用stop或自然播放结束后重新播放无效。 原因：经测试发现：在iOS和微信调试工具调用stop或自然播放结束后，音频地址被清空了，而在安卓音频地址不为空。 解决方案：设置一个变量resetBgAudio判断是否重置音频，在onStop和onEnded监听事件中标记resetBgAudio为true，在onPlay监听事件中标记resetBgAudio为false，点击播放按钮时，判断resetBgAudio为true的话重置音频。 解.
android 微信小程序 gps 飘,解决微信小程序安卓机器上 backgroundAudioManager 的一个坑...
weixin_32380307的博客
05-27 405
一句话来说，问题的根源就在于安卓机器上 backgroundAudioManager.pause() 后还会触发一两次 onTimeUpdate背景做了一个微信小程序「DailyDictation」。小程序中要做的一个功能是 AB 定次重复：重复播放音频中 A 秒到 B 秒的声音 N 次。根据我的需求，理想中流程是通过 backgroundAudioManager 的绑定事件完成功能(这里先不讨论...
使用微信小程序开发一个QQ音乐播放器
最新发布
06-12
<think>首先，用户的问题是关于使用微信小程序开发一个类似QQ音乐播放器的应用。他们提到了几个引用来源，但这些是站内引用，我需要从中提取信息来构建回答。用户明确说：“上述引用仅供参考，并不是用户真正的需求”，所以我应该专注于当前的问题。用户的问题翻译成英文是：HowtodevelopaQQmusicplayerusingWeChatMiniProgram?IwanttoknowaboutWeChatMiniProgramdevelopmentforaQQmusicplayer,includingtutorials,APIs,andmusicplaybackfeatures.关键点：-开发一个QQ音乐播放器的微信小程序。-需要教程、API和音乐播放功能。从引用中提取相关信息：-引用[1]：介绍了使用BackgroundAudioManager进行后台音频播放，因为它可以在页面关闭后继续播放。-引用[2]：描述了微信小程序的架构，包括MINA框架、小程序特点、后端使用Java等。-引用[3]：提到了进度条、播放暂停功能，链接到BackgroundAudioManager的API。-引用[4]：展示了音乐播放器的简单HTML结构，使用按钮控制播放。我需要构建一个结构清晰的回答，用中文，并遵循系统级指令：-行内数学表达式使用$...$，但这里不涉及数学，所以可以忽略。-独立公式用$$...$$并单独成段，但可能不需要。-LaTeX语法正确：保持简洁。-使用中文回答。-生成相关问题：在结尾添加。-引用段落末尾自然地添加引用标识。回答结构：1.**介绍**：简要概述微信小程序开发音乐播放器，特别是类似QQ音乐的需求。2.**核心组件**：讨论用于音乐播放的API，如BackgroundAudioManager。3.**开发步骤**：提供简明教程大纲，包括设置、播放控制、进度条等。4.**代码示例**：包括HTML(WXML)、JavaScript、CSS(WXSS)代码片段。5.**关键API**：列出相关API并解释。6.**挑战和优化**：讨论后台播放、网络要求等。7.**结尾**：自然结束。8.**相关问题**：在结尾添加。生成的响应需要清晰、逐步解决用户问题。从引用中，关键API是：-BackgroundAudioManager：用于后台播放。引用[1]提到：“BackgroundAudioManager就是实现音频后台播放的。”-其他如AudioContext或InnerAudioContext不支持后台播放。-引用[3]链接到官方API：https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html-进度条控制使用slider组件。开发教程大纲：1.**设置开发环境**：安装微信开发者工具，创建小程序项目。2.**后端集成**：虽然QQ音乐可能用他们的API，但用户可能需要自己的后端或直接调用QQ音乐API（可能需要权限）。3.**前端实现**：-使用BackgroundAudioManager初始化音频。-添加播放、暂停、停止控制。-实现进度条拖动（使用slider组件）。-显示播放状态。4.**UI设计**：类似于QQ音乐的界面。5.**测试**：真机测试音频播放。引用标识：-在相关段落末尾添加[^1],[^2],[^3],[^4]自然引用来源。生成相关问题：-例如：如何优化后台播放？如何集成QQ音乐API？等等。最终响应结构：-开头回答问题。-主体分节。-结尾添加相关问题。</think> ### 如何开发微信小程序版QQ音乐播放器 您好！要使用微信小程序开发一个类似QQ音乐播放器的应用，核心在于音乐播放功能的实现，包括后台播放、进度控制等。我会根据微信小程序的API和开发框架，逐步解释关键步骤、API使用，并提供简洁教程。开发中，推荐优先使用微信小程序的`BackgroundAudioManager` API（适用于后台播放），而非`AudioContext`或`InnerAudioContext`（仅支持前台播放）。下面是我的详细解答，基于微信官方文档和参考引用中的实践经验。 #### 1. **核心API：音乐播放功能的关键** 微信小程序提供`BackgroundAudioManager` API，用于实现类似QQ音乐的后台播放功能（即应用最小化后音乐继续播放）。此API支持播放、暂停、进度条控制等。主要属性和方法包括： - **创建实例**：在JavaScript中初始化音频管理器。 - **方法**：`play()`、`pause()`、`seek(position)`（跳转到指定位置）。 - **属性**：`src`（音频URL）、`currentTime`（当前播放时间）、`duration`（总时长）。 - **事件监听**：如`onPlay`、`onPause`、`onEnded`、`onTimeUpdate`（实时更新进度）。 官方API文档参考：[BackgroundAudioManager API](https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html)。注意，`BackgroundAudioManager`必须用于后台播放场景，因为它独立于页面生命周期；QQ音乐的播放列表、歌词同步等功能可基于此扩展[^1][^3]。 #### 2. **开发教程大纲：步骤式实现QQ音乐播放器** 以下是一个简明教程，使用微信小程序的开发框架（基于MINA架构，视图层用WXML/WXSS，逻辑层用JavaScript）。假设您已安装微信开发者工具，且了解基础小程序开发。开发环境要求：Node.js、微信开发者工具。 **步骤1: 项目设置与音频管理器初始化** - 创建新小程序项目，在`app.js`中全局初始化音频管理器，确保音乐可在不同页面共享。 ```javascript // app.js App({ globalData: { backgroundAudioManager: null // 全局音频管理器实例 }, onLaunch: function() { const bgm = wx.getBackgroundAudioManager(); // 获取实例 this.globalData.backgroundAudioManager = bgm; } }); ``` 这允许音乐在后台持续播放，类似QQ音乐体验[^1]。 **步骤2: 实现播放控制和进度条** - 在页面WXML文件中，添加播放按钮、暂停按钮、进度条slider组件。进度条使用`slider`组件结合`BackgroundAudioManager`的事件。 ```html <!-- index.wxml --> <view class="player-controls"> <button bindtap="playMusic">播放</button> <button bindtap="pauseMusic">暂停</button> <slider min="0" max="{{duration}}" value="{{currentTime}}" bindchange="seekPosition" activeColor="#409EFF" /> <text>当前进度: {{currentTime}}秒 / 总时长: {{duration}}秒</text> </view> ``` 这里的`slider`组件支持拖动控制进度；`max`设置为音频总时长（需动态获取）[^3][^4]。 - 在JavaScript文件中，实现播放逻辑。添加事件监听，更新进度条状态。 ```javascript // index.js const app = getApp(); Page({ data: { currentTime: 0, // 当前播放时间 duration: 0, // 音频总时长 audioUrl: 'https://your-qq-music-url.mp3' // 替换为QQ音乐API返回的音频URL }, onLoad: function() { const bgm = app.globalData.backgroundAudioManager; this.setAudioManager(bgm); }, setAudioManager: function(bgm) { // 设置音频源 bgm.src = this.data.audioUrl; bgm.title = 'QQ音乐播放'; // 监听事件 bgm.onPlay(() => { console.log('播放中'); }); bgm.onTimeUpdate(() => { // 实时更新进度条 this.setData({ currentTime: bgm.currentTime, duration: bgm.duration }); }); }, playMusic: function() { const bgm = app.globalData.backgroundAudioManager; bgm.play(); }, pauseMusic: function() { const bgm = app.globalData.backgroundAudioManager; bgm.pause(); }, seekPosition: function(e) { // 拖动进度条跳转 const position = e.detail.value; const bgm = app.globalData.backgroundAudioManager; bgm.seek(position); } }); ``` 在这个示例中，音频URL需替换为QQ音乐的真实资源（可能需要获取API密钥）。进度条拖动通过`bindchange`事件触发，结合`seek()`方法实现平滑控制[^3][^4]。 **步骤3: 集成QQ音乐API获取数据** QQ音乐提供开放API（如获取歌曲列表、播放地址），但需要申请授权（参考[QQ音乐开发者平台](https://y.qq.com/portal/api_center.html)）。典型集成流程： - 小程序后端（可用Node.js或Java开发）调用QQ音乐API获取数据。 - 前端通过小程序API（如`wx.request`）请求后端接口。 例如，在`index.js`中添加函数获取歌曲信息： ```javascript // index.js（续） fetchSongList: function() { wx.request({ url: 'https://your-backend-api/songs', // 后端服务地址 method: 'GET', success: (res) => { const songList = res.data; // 假设返回歌曲列表 this.setData({ audioUrl: songList[0].url }); // 设置首首歌URL } }); } ``` 这体现了小程序C/S架构：视图层渲染前端，逻辑层处理数据绑定，后端服务可部署在云服务器上[^2]。 **步骤4: UI优化和测试** - 样式文件（WXSS）设计类QQ音乐界面： ```css /* index.wxss */ .player-controls { display: flex; flex-direction: column; align-items: center; padding: 20rpx; } button { margin: 10rpx; padding: 10rpx 20rpx; background-color: #07C160; color: white; } slider { width: 80%; } ``` - 测试：在微信开发者工具中模拟运行，并进行真机测试（开启调试模式）。注意，后台播放功能需在小程序后台配置权限[^1]。 #### 3. **开发挑战与优化建议** - **网络要求**：播放音频需稳定网络，QQ音乐资源可能受防盗链限制，建议通过后端代理获取URL。 - **性能优化**：`BackgroundAudioManager`可能因系统资源限制被中断，监听`onError`事件处理异常[^3]。 - **完整音乐播放器**：添加歌词同步（基于`onTimeUpdate`事件）、播放列表管理（使用小程序页面跳转数据传递），参考引用中的实例实现后台播放控制[^1][^4]。 - **法律合规**：直接调用QQ音乐API需授权；若无权限，使用公开测试数据或自建后端。小程序特点如“内嵌微信、免下载”有利于快速部署，但音频资源占用需优化以确保流畅运行[^2]。 #### 4. **总结和后续步骤** 通过`BackgroundAudioManager`API，您可以在微信小程序中实现类似QQ音乐的核心播放功能。核心开发流程：初始化音频管理器→绑定进度条事件→集成后端API。建议从官方文档入手，逐步添加高级功能。我提供的代码示例是一个基础起点，您可调整URL和事件逻辑适配QQ音乐场景。如果有具体实现问题（如API密钥获取），欢迎提供更多细节继续探讨。 ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值