javascript - html5 audio 延时获取播放路径播放失败-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - html5 audio 延时获取播放路径播放失败

怪我咯 2017-04-11 11:43:44

[JavaScript讨论组]

1719

为什么audio对象在延时1000毫秒之后就不能执行播放呢?
歌曲的路径需要从数据库中获取，所以需要用ajax来交互，但是发现假如时间过长即使获取到路径也不能执行播放。
为方便测试使用setTimeout来模拟




    自动播放音乐测试
    


试试看能不能听到声音。

以上代码在1000毫秒后可以正常播放，但如果超过1000毫秒就不能正常播放了，如下：




    自动播放音乐测试
    


试试看能不能听到声音。

求各位解惑！

怪我咯

走同样的路，发现不同的人生

全部回复(2)

天蓬老师2017-04-11 11:45:44 2楼

首先要了解, 在移动端播放音频视频必须是经过用户的操作才能执行的, 然后下面正式解决问题

引用外国友人(andreybavt)的原话:

I had to experiment with Chrome playing sounds. It turned out that even after a user gesture (such as click) it waits for 1000ms and if no sound was played it throws the exception above. In my case the problem was coming from asynchronous track URL loading.

But it also turned out that after the first track is played chrome doesn't care anymore for this 1000ms delay and you can call play programmatically with any timeout you want.

So the solution was to play a micro almost zero-second long muted sound from static resources after the very first time a user clicks on a track and after that load a desired track URL.

Hope it helps or someone finds other solutions.

大概意思就是如果异步操作1000毫秒内没有收到任何信息, 就会抛出异常(如下), 浏览器就不会把这个操作认为是来自用户的操作, 所以导致无法播放, 但有趣的是只要你的音频播放完一次后刚刚所说的1000毫秒规则就不会重复生效, 所以现在我的解决办法是在用户第一次点击播放的时候先播放一次没有声音且接近0秒的音频(当然你也可以播个几十秒=.=), 然后就可以愉快的异步了.

Uncaught (in promise) DOMException: play() can only be initiated by a user gesture.

详细文章可以参考: 原文传送门

赞 +0

添加回复

ringa_lee2017-04-11 11:45:44 1楼

注册canplay事件，必要的话还需要加上一个autoplay属性。

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>