【问题标题】:Audio Tag Autoplay Not working in mobile音频标签自动播放在移动设备中不起作用
【发布时间】:2016-04-22 15:10:51
【问题描述】:

我正在使用此代码,当我看到 controls 时,我发现自动播放不起作用。

<audio autoplay="true" src="music/lathe_di_chadar.mp3" type="audio/mp3" loop></audio>

它不能在移动设备上工作,但在网站上工作得很好。 谁能告诉我这里面的问题?

谢谢,非常感谢

【问题讨论】:

  • opera mini in ios 默认支持自动播放,而 chrome、firefox 和 safari 不支持也不提供开启选项。

标签: html audio


【解决方案1】:

无法在移动浏览器中实现自动播放。 (这是不允许的)

但是有些技巧可以做到这一点。

点击下面的链接查看一些技巧

Autoplay audio on mobile safari

iOS-Specific Considerations | Loop Attribute

【讨论】:

【解决方案2】:

现在是 2020 年

请注意(出于以下原因?)Chrome 已更改其自动播放政策(请参阅https://developers.google.com/web/updates/2017/09/autoplay-policy-changes),因此您现在必须:

  • resume() 用户与页面进行一些(任何)交互后的音频上下文
  • 或“排名靠前”(即相信 Chrome 不会根据用户和世界的行为默认停止音频)
  • 或者(据我所知)用户必须在原点 A 上,然后单击指向同一原点 A 的链接,并且 A 的新页面可以自动播放内容。

您可以使用AudioContext API 播放声音并从任何ArrayBuffer 获取源(即:来自XMLHttpRequestFile

    window.addEventListener('load', function () {
        var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        var source = audioCtx.createBufferSource();
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'audio-autoplay.wav');
        xhr.responseType = 'arraybuffer';
        xhr.addEventListener('load', function (r) {
            audioCtx.decodeAudioData(
                    xhr.response, 
                    function (buffer) {
                        source.buffer = buffer;
                        source.connect(audioCtx.destination);
                        source.loop = false;
                    });
            source.start(0);
        });
        xhr.send();
    });

Live example

适用于移动设备和桌面设备的 Chrome 和 Firefox

重要提示

值得一提的是,IMO,这个“技巧”实际上可以被视为浏览器错误,如果浏览器认为这会破坏用户体验/成为广泛使用的烦恼(如广告),它可能不再起作用.

另外值得一提的是,至少在我的手机和FF 54上,声音还是会播放的,即使你的手机静音了……

还值得一提的是,用户可以通过浏览器的常用选项或通过更高级的about:config 页面(autoplay 行为由 Firefox 的@987654335 设置)来设置autoplay 行为以满足他们的愿望和需要@ 和 media.block-autoplay-until-in-foreground 首选项)。

所以强制使用音频autoplay 是一个糟糕的用户体验想法,无论你怎么做。

【讨论】:

  • 重要的是要提到此解决方案将导致内存泄漏或大于 1 MB 的音频文件占用大量内存。估计是,一个 1 MB 的编码音频文件将是内存中 11MB 的解码数据缓冲区。
  • @FarzadYZ 如果你能证明它们是“内存泄漏”会很有趣(我怀疑这不是执行的 JS 代码的问题,而是浏览器或其他问题,即executor)或“巨大的内存消耗”(与通常的音频标签相比)
  • 加载音频,使用网络音频 API 的 context.decodeAudioData 对其进行解码,创建一个 AudioBufferSourceNode 并播放它  给你更多的灵活性,但有一个相当重要的警告:它会让你的电话。原因很简单。浏览器需要将整个解码后的音频剪辑存储在内存中, 因为 5Mb mp3 文件通常等同于 55Mb wav 文件 如果您使用大型音频文件,您很快就会发现自己的内存不足。发生这种情况时,您会发现它的整个选项卡都会消失。
  • 都是关于缓冲区的,而不是简单的原始内存数据。因此,Firefox devtools 没有显示 MDN 示例 mdn.github.io/webaudio-examples/decode-audio-data 的大量内存打印,因此经验来源(它试图推广另一个 JS 框架)似乎只是关于“我的手机崩溃并盲目归咎于音频缓冲区”IMO跨度>
【解决方案3】:

我对这个问题有很多经验。它也适用于在用户有机会与页面交互之前加载的 Javascript 音频。

但是,一旦用户完全点击任何内容,游戏就开始了。我个人推荐在首页直接覆盖整页入口:“点击进入我的精彩网站!”如果用户完全进入页面,他们注定会听到你想向他们抛出的任何声音! :D

【讨论】:

  • 不是讽刺——我怎样才能做到这一点?我正在做一个网页游戏,我目前正面临这个问题。我希望用户点击“播放”按钮,让音乐在后台播放。
  • 如果你只是想知道如何播放背景音频,谷歌“用 JavaScript 播放音频”,例如stackoverflow.com/questions/9419263/how-to-play-audio。这个问题的主要内容是你必须知道以下几点:你不能在大多数手机上自动播放音频(“自动播放”标志将被忽略),你不能从文档加载事件开始播放音频,所以你必须在用户事件中开始播放音频(例如单击按钮)。对于游戏,只需确保“开始”按钮处理程序开始播放您的音频就可以了。
  • 我不关注手机,只关注电脑浏览器。我实际上是在连续几个小时弄乱 js 之后让它工作的。我制作了播放按钮,然后是多个 z-index hack。非常感谢♥。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-04-15
  • 2020-04-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-07-27
  • 1970-01-01
相关资源
最近更新 更多