移动端Chrome Audio问题

作者: 勿以浮沙筑高台 | 来源:发表于2017-04-01 12:47 被阅读653次

错误信息：
Uncaught (in promise) DOMException: play() can only be initiated by a user gesture.

问题描述：
有一个这样的用户需求：用户点击播放按钮后，获取播放资源路径然后再播放音乐。
通过异步网络请求 (axios、XMLHttpRequest) 获取到资源后调用 audio.play() 得到上面的错误信息。

问题原因
移动端播放音频视频必须是经过用户的操作才能执行；如果异步操作超过1000毫秒, 就会抛出上面的异常, 浏览器就不会把这个操作认为是来自用户的操作。

解决方案
使用 xhr 同步请求代替一步请求:

 xhr.open('GET', URL, false);

移动端Chrome Audio问题
错误信息：Uncaught (in promise) DOMException: play() can only ...
移动端APP开发遇到的问题
1，移动端100vh的问题问题描述在移动端使用 100vh 时，发现在 Chrome、Safari 浏览器中，...
移动端深度开发
移动端基本环境测试:chrome模拟的只是尺寸移动端常见的一些问题由于测试环境限制,暂停
遇到的坑（转）
下面，就总结一下移动端遇见的坑。 1.input placeholder问题在chrome 模拟移动端调试时［...
移动端----au
在我们的移动端，如果，我们需要播放audio（音频）和video（视频），是要借助html新增的标签，audio和...
前端疑难杂症
chrome移动端调试 preventDefault() 没有效果。实际上在真正的移动端是有效果的
移动端input 输入唤醒手机键盘闪退
chrome浏览器下无任何问题,移动端就会出现问题话不多说代码看看 $("#typeBox")trigger("...
在 Windows 上真机调试 iPhone(iOS) Safa
在移动端页面开发中，需要处理 Android 和 iOS 的兼容性问题。在 Chrome DevTools 中选择...
移动端网页调试
chrome的inspect 在桌面端chrome输入下列语句并在手机端启动相应页面后,就可以进行移动端调试了:c...
总结移动开发实践中遇到的坑
1.input placeholder问题在chrome 模拟移动端调试时［左边图］，显示的非常正常，但是在真...