0

0

play函数怎么暂停和继续_控制音频播放状态【方法】

雪夜

雪夜

发布时间:2026-02-12 11:35:03

|

355人浏览过

|

来源于php中文网

原创

play() 调用后需监听 playing 事件确认真正播放再暂停,pause() 安全可重调,play() 必须处理 Promise reject,暂停前应缓存 currentTime 并在继续前恢复。

play函数怎么暂停和继续_控制音频播放状态【方法】

play() 调用后无法暂停?先确认是否真在播放中

浏览器里 play() 不是“按下就播”,它可能静默失败,尤其在用户无交互(如点击)后自动调用时。此时 audio.paused 仍是 trueaudio.playing 不存在,直接调 pause() 没效果,还可能抛 DOMException: The element has no supported sources 或静默忽略。

  • 务必在 play() 后监听 playing 事件,确认真正进入播放状态再允许暂停操作
  • 避免在页面加载完成时立即调 play();改用用户点击、触摸等交互事件触发
  • 检查 audio.src 是否已设置且可访问,空 src 或 404 会导致 play() 返回 Promise 并 reject

暂停/继续必须用 pause() 和 play(),没有 toggle 方法

HTMLMediaElement 没有内置的 togglePlay(),也不能靠 audio.muted = !audio.muted 伪装控制。暂停和继续是两个独立动作,状态判断必须依赖 paused 属性,而不是靠变量标记。

  • 暂停:直接调 audio.pause(),无需条件判断;即使已暂停,多次调用也安全
  • 继续:必须用 audio.play(),且它返回 Promise;需处理 reject,否则后续逻辑可能卡住
  • 错误写法:if (audio.paused) audio.play(); else audio.pause(); —— 看似合理,但 play() 失败时 paused 仍为 true,下次点“继续”又会重试失败

play() 继续播放时常见 Promise 错误及应对

play() 在非用户手势上下文或音频被系统中断(如来电、其他音频抢占)后恢复时,大概率 reject,错误信息通常是 "The request is not allowed by the user agent or the platform in the current context.""play() failed because the user didn't interact with the document first."

飞桨PaddlePaddle
飞桨PaddlePaddle

飞桨PaddlePaddle开发者社区与布道,与社区共同进步

下载
  • 必须用 .catch() 捕获失败,不要只写 .then()
  • 失败后别静默,建议 UI 提示“请点屏幕任意位置再试”,并重新绑定一次点击事件监听
  • 部分安卓 WebView 或 iOS Safari 对后台播放限制更严,即使用户点过,切到后台再切回也可能需再次交互才能恢复

audio.currentTime 可能跳变,暂停前最好缓存位置

暂停本身不改变 currentTime,但如果你在暂停后手动修改了 src 或触发了 reload,currentTime 会重置为 0。更隐蔽的问题是:某些低版本 Android 浏览器在 pause() 后读 currentTime 会滞后几毫秒,导致“继续”时听起来像卡了一下。

  • 推荐在调 pause() 前主动记录:const lastTime = audio.currentTime;
  • 继续前先设回:audio.currentTime = lastTime;,再调 play()
  • 避免在 timeupdate 事件里频繁读写 currentTime,尤其在低端设备上可能引发抖动
实际音频控制比看起来琐碎——用户手势时机、Promise 状态、currentTime 的精度、跨平台行为差异,每个点都可能单独出问题。最常被忽略的是:把 play() 当同步函数用,不处理它的异步失败。

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

805

2023.08.22

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

541

2023.09.20

promise的用法
promise的用法

“promise” 是一种用于处理异步操作的编程概念,它可以用来表示一个异步操作的最终结果。Promise 对象有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。Promise的用法主要包括构造函数、实例方法(then、catch、finally)和状态转换。

313

2023.10.12

html文本框类型介绍
html文本框类型介绍

html文本框类型有单行文本框、密码文本框、数字文本框、日期文本框、时间文本框、文件上传文本框、多行文本框等等。详细介绍:1、单行文本框是最常见的文本框类型,用于接受单行文本输入,用户可以在文本框中输入任意文本,例如用户名、密码、电子邮件地址等;2、密码文本框用于接受密码输入,用户在输入密码时,文本框中的内容会被隐藏,以保护用户的隐私;3、数字文本框等等。

416

2023.10.12

android开发三大框架
android开发三大框架

android开发三大框架是XUtil框架、volley框架、ImageLoader框架。本专题为大家提供android开发三大框架相关的各种文章、以及下载和课程。

307

2023.08.14

android是什么系统
android是什么系统

Android是一种功能强大、灵活可定制、应用丰富、多任务处理能力强、兼容性好、网络连接能力强的操作系统。本专题为大家提供android相关的文章、下载、课程内容,供大家免费下载体验。

1787

2023.08.22

android权限限制怎么解开
android权限限制怎么解开

android权限限制可以使用Root权限、第三方权限管理应用程序、ADB命令和Xposed框架解开。详细介绍:1、Root权限,通过获取Root权限,用户可以解锁所有权限,并对系统进行自定义和修改;2、第三方权限管理应用程序,用户可以轻松地控制和管理应用程序的权限;3、ADB命令,用户可以在设备上执行各种操作,包括解锁权限;4、Xposed框架,用户可以在不修改系统文件的情况下修改应用程序的行为和权限。

2075

2023.09.19

android重启应用的方法有哪些
android重启应用的方法有哪些

android重启应用有通过Intent、PendingIntent、系统服务、Runtime等方法。本专题为大家提供Android相关的文章、下载、课程内容,供大家免费下载体验。

278

2023.10.18

2026春节习俗大全
2026春节习俗大全

本专题整合了2026春节习俗大全,阅读专题下面的文章了解更多详细内容。

189

2026.02.11

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号