iOS 12 静音模式下 AudioContext 无法正常播放的 Bug
栏目: JavaScript · 发布时间: 5年前
内容简介:最近收到用户反馈,网页的背景音乐播放没有声音。然后我们就按照正常的流程 Debug 。但是我拿到我的 iPhone 7 测试的时候,但是发现是可以正常播放的,但是 iPhone XS 确没有办法播放。 而且这次非常悬疑的是,iPhone XS 的又是可以正常播放虾米音乐的的歌曲。此时此刻,宝宝的心情,只能用如下图表示:
最近收到用户反馈,网页的背景音乐播放没有声音。
然后我们就按照正常的流程 Debug 。但是我拿到我的 iPhone 7 测试的时候,但是发现是可以正常播放的,但是 iPhone XS 确没有办法播放。 而且这次非常悬疑的是,iPhone XS 的又是可以正常播放虾米音乐的的歌曲。
此时此刻,宝宝的心情,只能用如下图表示:
随后开始看代码,项目的背景音乐是启用了 AudioContext 。这个时候我们强制设置 AudioContext 的音量来,看下是不是 iPhone XS 的问题;
const audioCtx = new AudioContext(); let source = aCtx.createBufferSource(); let buf; const gainNode = aCtx.createGain(); // Create a gainNode reference. gainNode.connect(aCtx.destination); // Add context to gainNode fetch('./test.mp3') // can be XHR as well .then(resp => resp.arrayBuffer()) .then(buf => aCtx.decodeAudioData(buf)) // can be callback as well .then(decoded => { source.buffer = buf = decoded; source.loop = true; source.connect(gainNode); //Connecting gain to source gainNode.gain.value = 1; // 100% VOLUME RANGE OF VALUE IS 0-1 });
可是还是没有效果啊~
自己随后想到是不是 Safari 的 Media Policy 的控制,嗯,一搜果真搜到了,
https://gist.github.com/kus/3f01d60569eeadefe3a1
我们需要在用户点击屏幕的时候将 AudioContext 激活,使它的状态由 suspended 变为 running 。
if (context.state === 'suspended' && 'ontouchstart' in window) { var unlock = function() { context.resume(); }; document.body.addEventListener('touchstart', unlock, false); }
这个时似乎感觉离新大陆近了,
然而测试下来,还是没有声音。。。。
这个时候楼主,默默拿起了 iPhone 7 和 XS 看了下,发现XS 的左边的静音键按下了。。。。
取消静音模式,音频正常播放了,因此如果要解决这个问题,建议大家还是用 Audio 元素来弄, AudioContext 应该是 Safari 保持的一个 Media 策略。
扩展阅读
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Vivaldi 2.7 发布:静音网站、全局控制 Flash 和加载时显示状态信息等
- Windows 10 解决无法完整下载安装语言包(日语输入法无法下载使用)
- ruby-on-rails – 无法推送到github,ssh:无法解析主机名
- erlang节点无法连接问题?
- erlang节点无法连接问题?
- 如何编写无法维护的代码
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
电商运营之道:策略、方法与实践
吴伟定、姚金刚、周振兴、郑琰 / 机械工业出版社 / 2015-9-1 / 49
电商运营之道:策略、方法与实践是一本电商的运营指南,适合所有的电商从业人员阅读,也适合打算进入或打算在电商行业创业的读者朋友阅读。分别从策略、方法与实践三个方面全景式展示电商运营的内在商业规律与管理逻辑。一起来看看 《电商运营之道:策略、方法与实践》 这本书的介绍吧!