iOS 12 静音模式下 AudioContext 无法正常播放的 Bug

栏目: JavaScript · 发布时间: 5年前

内容简介:最近收到用户反馈,网页的背景音乐播放没有声音。然后我们就按照正常的流程 Debug 。但是我拿到我的 iPhone 7 测试的时候,但是发现是可以正常播放的,但是 iPhone XS 确没有办法播放。 而且这次非常悬疑的是,iPhone XS 的又是可以正常播放虾米音乐的的歌曲。此时此刻,宝宝的心情,只能用如下图表示:

最近收到用户反馈,网页的背景音乐播放没有声音。

然后我们就按照正常的流程 Debug 。但是我拿到我的 iPhone 7 测试的时候,但是发现是可以正常播放的,但是 iPhone XS 确没有办法播放。 而且这次非常悬疑的是,iPhone XS 的又是可以正常播放虾米音乐的的歌曲。

此时此刻,宝宝的心情,只能用如下图表示:

iOS 12 静音模式下 AudioContext 无法正常播放的 Bug

iOS 12 静音模式下 AudioContext 无法正常播放的 Bug

随后开始看代码,项目的背景音乐是启用了 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
      });

可是还是没有效果啊~

iOS 12 静音模式下 AudioContext 无法正常播放的 Bug

自己随后想到是不是 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);
}

这个时似乎感觉离新大陆近了,

iOS 12 静音模式下 AudioContext 无法正常播放的 Bug

然而测试下来,还是没有声音。。。。

这个时候楼主,默默拿起了 iPhone 7 和 XS 看了下,发现XS 的左边的静音键按下了。。。。

iOS 12 静音模式下 AudioContext 无法正常播放的 Bug

取消静音模式,音频正常播放了,因此如果要解决这个问题,建议大家还是用 Audio 元素来弄, AudioContext 应该是 Safari 保持的一个 Media 策略。

扩展阅读


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

马化腾自述-我的互联网思维

马化腾自述-我的互联网思维

赵黎 / 石油工业出版社 / 2014-8-1 / 35

马化腾自述:我的互联网思维》讲述了些人说移动互联网就是加了“移动”两个字,互联网十几年了,移动互联网应该是个延伸。我的感受是,移动互联网远远不只是一个延伸,甚至是一个颠覆。互联网是一个开放交融、瞬息万变的大生态,企业作为互联网生态里面的物种,需要像自然界的生物一样,各个方面都具有与生态系统汇接、和谐、共生的特性。开放和分享并不是一个宣传口号,也不是一个简单的概念。开放很多时候被看作一种姿态,但是我......一起来看看 《马化腾自述-我的互联网思维》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具