uni-app实现类似喜马拉雅的锁屏控制逻辑

雨芳吖_6367

雨芳吖_6367

2026-08-15

864人浏览

原创

锁屏后音频继续播放需用uni.createinneraudiocontext并配置autoplay=false、显式play(),android需启用后台运行,ios需配置requiredbackgroundmodes=["audio"];锁屏控制失效需原生设置audio session;进度同步须在canplay后seek并持久化状态。

uni-app实现类似喜马拉雅的锁屏控制逻辑

锁屏后音频继续播放必须开启后台音频能力

uni-app 默认情况下,iOS 和 Android 应用在进入后台或锁屏时会暂停 Webview 中的 <audio></audio> 播放,这是系统级限制。单纯靠 JS 控制 play() 无法绕过。关键前提是:你得让音频真正走系统原生音频通道,而不是仅依赖 H5 <audio></audio> 标签。

实际做法是用 uni.createInnerAudioContext() 创建上下文,并配合以下配置:

  • 设置 context.autoplay = false(避免 iOS 启动即播被拦截)
  • 调用 context.src 后必须显式触发 context.play()
  • Android 需在 manifest.json 中勾选「启用后台运行」;iOS 需在 manifest.json → "mp-weixin" → "requiredBackgroundModes" 添加 ["audio"](仅 App 平台有效,H5 不支持锁屏控制)

锁屏界面媒体控制按钮不响应?检查 audioSession 配置

即使音频在后台跑起来了,锁屏界面的播放/暂停/上一首等按钮仍可能灰掉或无反应——这通常是因为没正确设置音频会话(audio session)行为。uni-app 自身不暴露底层 session API,需通过原生插件或条件编译补充。

Android 方面,需确保 AndroidManifest.xml 中声明了 android.permission.FOREGROUND_SERVICE,并在启动音频时调用 startForeground();iOS 方面,除了前面提到的 requiredBackgroundModes,还需在 App.vueonShow 中调用原生桥接方法设置 AVAudioSessionCategoryPlayback 和激活 session。

常见错误现象:MediaControl not available 或锁屏按钮点击无日志输出。此时检查是否漏掉 iOS 的 AVAudioSession 激活,或 Android Service 未提升为前台服务。

监听锁屏/唤醒事件只能靠平台原生能力

uni-app 的 onHide/onShow 在锁屏时并不可靠:iOS 上锁屏大概率不触发 onHide,Android 行为也不一致。不能依赖这些生命周期做状态同步。

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

可行方案是通过条件编译接入原生模块:

  • iOS:用 UNNotificationServiceExtension + MPNowPlayingInfoCenter 更新当前播放信息,并监听 UIApplication.willResignActiveNotificationUIApplication.didBecomeActiveNotification
  • Android:用 AudioManager 监听 AudioManager.ACTION_AUDIO_BECOMING_NOISY,或注册 Intent.ACTION_SCREEN_OFF/Intent.ACTION_SCREEN_ON(需动态权限)

注意:H5 环境完全无法监听锁屏事件,visibilitychange 只能判断页面是否被切换,不能区分锁屏和切应用。

进度同步与状态持久化容易断连

用户锁屏后切到其他 App,再回来时经常发现播放进度“跳回开头”或状态错乱。这不是 UI 渲染问题,而是音频上下文在后台被系统回收后重建导致的。

解决思路不是“保存播放时间”,而是“恢复播放上下文”:

  • 每次调用 context.play() 前,先记录当前 srccurrentTimevolumeuni.setStorageSync
  • onShow 或原生唤醒回调中,重新创建 uni.createInnerAudioContext(),然后 context.src = savedSrc,再 context.seek(savedTime),最后 context.play()
  • 特别注意:iOS 上 seek() 必须在 canplay 事件后执行,否则无效;建议加 context.onCanPlay(() => { context.seek(...) })

真正的难点不在代码逻辑,而在于不同机型对后台音频资源的回收策略差异极大——有些 Android 机型锁屏 10 秒就 kill audio context,这时候光靠 JS 层保存状态根本来不及恢复。

相关文章

喜马拉雅
喜马拉雅

喜马拉雅听书是一款优秀的听书工具,软件内有超多优秀的有声小说资源可以免费听,还有很多丰富的音乐电台可以选择,并且非常省流量,可以随时随地在线听书。有需要的小伙伴快来保存下载体验吧!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2023

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

4323

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5430

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

4878

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

683

5

NumPy随机数文件读写与dtype数据类型
NumPy随机数文件读写与dtype数据类型

本专题整理 NumPy 随机数、文件读写与 dtype 数据类型相关教程,覆盖 Generator/random、随机数种子、正态分布采样、npy/npz/CSV/TXT 保存读取、loadtxt/savetxt、memmap、大文件处理、astype 类型转换、结构化 dtype、整数溢出和精度丢失等场景。

2026.09.21

0

24

NumPy矩阵运算与线性代数计算
NumPy矩阵运算与线性代数计算

本专题整理 NumPy 矩阵运算与线性代数计算相关教程,覆盖矩阵乘法、dot 与 @ 运算符、逆矩阵、行列式、特征值与特征向量、SVD、线性方程组、欧氏距离、矩阵分解和大规模矩阵性能优化等内容,帮助读者掌握 np.linalg 与矩阵计算实战。

2026.09.21

0

20

NumPy广播机制数学运算与统计分析
NumPy广播机制数学运算与统计分析

本专题整理 NumPy 广播机制、数组数学运算与统计分析相关教程,覆盖广播规则、维度对齐、矩阵与数组加减除法、向量化计算、均值方差、分位数、中位数、直方图和 unique 频次统计等场景,帮助读者掌握 ndarray 高效计算与统计处理方法。

2026.09.21

0

17

NumPy数组创建索引切片与数据选择
NumPy数组创建索引切片与数据选择

本专题整理 NumPy 数组创建、索引、切片与数据选择相关教程,覆盖 np.array、zeros/ones、多维数组形状、基础切片、花式索引、布尔索引、条件筛选、视图与副本等常用场景,帮助读者系统掌握 ndarray 数据构造与高效提取方法。

2026.09.21

0

12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习