那个讨厌的 HTML5 音频播放。我哪里错了？

Posted 2023-02-25

【中文标题】那个讨厌的 HTML5 音频播放。我哪里错了？

【英文标题】：That pesky HTML5 audio playback. Where am I going wrong?

【发布时间】：2019-01-15 16:55:00

【问题描述】：

我花了比我应该花更多的时间来修补这个独奏，非常感谢你解决问题并帮助我学习！

我有一个与音乐相关的网站，它应该在加载时自动播放背景氛围，无需控制（我知道这通常很烦人，但我拥有的 JS 使音量非常低，而且声音大多令人愉悦棕色噪音。）

所有这一切的问题在于，尽管如此，播放只能在 Firefox 中完美进行。 Safari 桌面或 IOS 无法播放任何内容。

我在页眉/页脚中有以下语法：

<script>
  var audio = document.getElementById("bgnoise");
  audio.volume = 0.2;
</script>

<iframe src="https://dl.dropboxusercontent.com/s/fs2do1b5g17mqxs/silence.mp3?dl=0" 
allow="autoplay" id="audio" style="display:none">
</iframe>

<audio id="bgnoise"
autoplay 
preload="true" 
style="display:none"> 
enter code here

<source src="https://dl.dropboxusercontent.com/s/j021mggh8g2nh2b/lietoofine_-_03b_-_Get_Over_the_FOMO.ogg?dl=0" type="audio/ogg">
<source src="https://dl.dropboxusercontent.com/s/64i0456kmtsqbpv/lietoofine_-_03_-_Get_Over_the_FOMO.m4a?dl=0" type="audio/x-m4a">
<source src="https://dl.dropboxusercontent.com/s/pwdfzbrh435aaq9/lietoofine_-_03_-_Get_Over_the_FOMO.mp3?dl=0" type="audio/mp3”>

</audio>

——————————— 附加信息：

我没有在 android 或 Chrome 上测试过。我在 Chromium 上进行了测试，并且知道它比 IE 更适合 html5 音频。我猜移动设备充满了更多的 HTML5 支持问题。

我使用 iframe 语法的原因是为了欺骗 Chromium 浏览器以 250 毫秒的静音播放，根据我在网上其他地方找到的一篇高度接受的帖子（尽管我不是 100% 相信它的价值） .

我所有的其他浏览器都可以播放网站上提供的音乐，来自 a soundcloud 在我的页面上嵌入了插件，所以他们可以播放音频。和 Safari 过去使用过的音频播放不一致 这段代码的迭代，现在它根本不播放。

我怀疑可能还有另一个变量，即在 Audacity 中使用 LAME/FFMPEG 对我的文件进行编码（与 iTunes 相比 Fraunhofer）可能有一些苹果没有的元数据/设置 像。但如果是这样的话，人们会认为至少 3 个中的 1 个 我放的资源会成功，不是吗？这些文件托管在我的公共 保管箱文件夹（我测试过它的链接可以正常工作，因为我创建了我的 Dropbox 帐户拒绝向新用户提供公共文件夹）。

我使用 dl.dropboxusercontent.com（而不是 www.dropbox.com）来访问原始文件，而不是重定向到 Dropbox 文件预览/cmets 页面，我在源代码中附加了 ?dl=0 Dropbox URL 只留给浏览器来决定如何处理 文件 (?dl=1 强制调用直接将文件下载到 用户的文件系统，而不是打开它）。

各种源选项文件类型的文件大小范围从 2MB 到 6MB。

我使用 x-m4a 类型而不是 m4a，因为我在某个支持范围更广的地方阅读。我怀疑该文件实际上是 M4A 中包含的 AAC 因为它不是由 iTunes 编码的。我使用文件类型 mp3 作为 mp3 而不是推荐的“mpeg”，因为我将它编码为 MP3 不是 Mpeg。

我正在使用拖放式站点构建器 [支持 HTML/CSS/JS 但不安装库/开发文件]。同样，声音在 Firefox 中运行良好……但只有 Firefox！

等待我们拥有所有浏览器、设备和 HTML 标准/API 普遍支持的 1 种声音格式的那一天。在此之前非常感谢您的帮助！

【问题讨论】：

见***.com/q/13266474/1531971等等。

如果您有多种替代文件格式，则每种格式都需要一个source 标签，而不是一个具有多个src 属性的source标签

谢谢。我已经在上面的 sn-p 以及我的站点中修复了我的 语法，尽管它在实践中被证明有所不同。如果问题在于 Safari 不喜欢的文件编码，我只想排除代码是问题或能够提供解决方案。注：如果您发现我的问题经过充分研究并且写得很清楚，请不要忘记投票，非常感谢！

【参考方案1】：

我去过很多地方，包括您在@jdv 分享的旧帖子。但这确实使我找到了一个很好的解决方法。 最后，我找到了为什么 Firefox 播放声音而 Chrome 和 Safari 没有播放声音的答案。这不是 HTML 语法，也不是文件的编码，可以在这里找到： https://bitmovin.com/play-not-play-new-autoplay-policies-safari-11-chrome-64/