为什么tone.js在桌面浏览器中可以播放音符，而在移动浏览器上却不能播放？

Question

我正在尝试使用tone.js 演奏音符。

在我的浏览器（Safari 和 Firefox 上）中，该注释会播放，但在 IOS 上（在 Chrome 和 Safari 上测试）上不会播放。

我正在使用 Tone.start() 并且仅在

then

回调中播放音频，正如文档所述的那样。

startButton.addEventListener('click', _ => {
    box.style.display = 'none';
    stopButton.style.display = 'block';
    Tone.start().then(() => {
        intervalId = setInterval(() => {
            const note = getRandomNote();
            synth.triggerAttackRelease(note + "4", "4n");
        }, 2000)
      
    })

})

为什么会发生这种情况？

Answer 1

所以我把手机调成静音......这就是问题所在。

Answer 2

我遇到了完全相同的问题，当设备静音时，Tone.js 在较新的 iPhone 和 iPad 上不会播放任何声音。我的解决方案是在用户交互时播放无声 mp3，使用本机 HTML 音频元素来激活声音。我在播放我真正想听的声音之前执行此操作。

<audio>
    <source src="/silent.mp3" type="audio/mp3"></source>
</audio>

您可以使用 Javascript 获取音频元素以在用户交互时开始播放。因此，选择音频元素，并在开始播放您真正想听的音频之前调用它的 play() 方法。

audioElement.play();

我在 LambdaTest 上测试了以下设备（如果您没有 iOS 设备，强烈推荐）：

• iPhone 8 13.4
• iPhone 12 17.2
• iPhone 13 迷你 17.2
• iPhone 14 17.2
• iPhone 15 17.2