Safari 在使用 <amp-audio> 时只播放一次音频答案

【问题标题】：Safari plays audio only once when using <amp-audio>Safari 在使用 <amp-audio> 时只播放一次音频
【发布时间】：2023-03-27 08:40:02
【问题描述】：

我正在尝试通过 AMP 上的播放按钮制作一个可以播放多次的短声音。在 Safari（桌面和移动设备）上，声音只会播放一次。

声音应该在用户点击按钮时触发。

我遵循了amp-audio 和audio events 的放大器文档

<amp-audio preload="none" id="audio" controlslist="nodownload" hidden>
<div fallback><p>Your browser doesn't support HTML5 audio</p></div>
    <source type="audio/mpeg" src="/media/shortSound.mp3">
    <source type="audio/ogg" src="/media/shortSound.ogg">
</amp-audio>

“原生”音频按钮被隐藏，通过点击以下按钮触发（带有 on:tap 事件）

<div class="button" on="tap: audio.play" role="button" tabindex="0"></div>

我也尝试过使用absolute URLs，但在播放前使用暂停功能，但无济于事。

注意：不幸的是，没有 .load 事件来规避 Safari 上的 HTML5 等问题（这就是我在非 amp 版本的 Safari 上播放它的方式）

实际结果：声音播放一次（我第一次单击它时）。其余时间什么都没有发生，控制台中也没有消息。我做错了什么？

【问题讨论】：

标签： safari html5-audio amp-html

【解决方案1】：

我发现问题在于我的文件的 mp3 编码。它使用 VBR 而不是 CBR，使用 CBR 编码的 mp3 文件时不会发生此问题。要检查您的编码，我建议使用https://checkmate.gissen.nl/download.php

编辑：这实际上是因为 Safari 使用 HTTPRange 来获取其资源，而不是经典的 get 方法。

【讨论】：

【解决方案2】：

希望<amp-audio> 上的loop 属性可以在这里提供帮助：https://amp.dev/documentation/components/amp-audio/?format=websites

【讨论】：