Question

使用 React，我使用 JavaScript (play()) 使两个 audio 标签播放 2 个不同的 .mp3 文件（在完全不同的时间）。 .mp3 文件很短（不到一秒）。

import sound1 from 'sound1.mp3';
import sound2 from 'sound2.mp3';

<audio controls muted>
  <source src={sound1}></source>
</audio>

<audio controls muted>
  <source src={sound2}></source>
</audio>

audio {
  display: none;
}

在 Safari 13.1.2 中，在我的 13 英寸 MacBook Catalina 上，通常其中一种声音播放不完美 - 就好像没有听到声音的开头。这是我的 video 演示，它展示了声音的真实情况和它应该是什么样子的情况。当黑色棋子移动时，您需要一直调高音量才能听到安静的回声。然后我给你播放那个文件的声音。
在我的 iPhoneX 上，在 Chrome 和 Safari 中，相同的声音（似乎）根本无法播放。这可以通过这个 SO answer 来解释，它说除非来自涉及用户物理参与的事件处理程序的回调，否则声音不会播放，例如click。这个理论适合我的情况。

我的问题与此 post 和 this post 类似，但没有得到回应。如果你认为用沙箱重现这个问题对我有用，我可以试试。

个人说明：

在我的 13 英寸 MacBook Catalina 上：

在 Chrome 上，这两种声音都很好。
在 Safari 中，sound2 无法正常工作。

在我的 iPhoneX 上：

在 Chrome 和 Safari 上，声音 2 有时会在稍后听到。

编辑：

在此 video 中，您可以听到我在 Finder 中播放有问题的音频文件。我第一次玩 - 很好；但是第二次以上它会在浏览器中听到同样的错误声音！

用不同的音频文件替换有问题的音频文件会带来成功 - 并表明问题出在音频文件上，而不是我在网站上的实现。我愿意将此问题重新定义为性能不佳的音频文件，但我真的不知道。如果这是问题所在，我唯一能避免的办法就是在 Finder 中重播音频文件并确保它播放一致的声音。

笔记本电脑上 Safari 中音频标签的音频播放不一致

0 个答案: