Question

我正在使Web服务器在网站上输出图形的压力值。如果压力太低/太高，我想播放声音警告用户。我似乎找不到解决方法，因为我有一个独特的问题：我的html代码中必须有<meta http-equiv="refresh" content="1" />。当然，这会每秒刷新一次页面，因此，即使我有一个按钮供用户在第一次压力太低时单击，该页面也会立即重新加载，并且在控制台中出现“未捕获（承诺）的DOMException”下次应该播放音频。这是我到目前为止的代码，已简化为显示必要的部分：

HTML：

<audio id="alert_sound" controls>
  <source src="chime.mp3" type="audio/mp3">
  <source src="chime.ogg" type="audio/ogg">
</audio>

Javascript：

var arduino = [2.11,2.07,2.06,08,1.82,2.00,2.13,1.85,2.15,1.73]
var sound = document.getElementById("alert_sound");
if (Math.min(...arduino) < 5) {
    const playPromise = sound.play();
    if (playPromise !== null) {
        playPromise.catch(() => { sound.play(); })
    };

我在我认为可行的其他地方找到了js的最后4行作为答案，但结果也无济于事。

Answer 1

这是因为Chrome浏览器的新音频政策。

如您在下面的示例中看到的那样，只有单击无意义的 click me 按钮，音频才会真正开始播放。 Google Chrome浏览器的新音频播放政策规定，用户首先必须与文档互动才能播放音频。进一步了解here。

var sound = document.getElementById("sound");

setInterval(() => sound.play(), 3000)

<audio id="sound" controls>
   <source src="https://www.w3schools.com/jsref/horse.ogg" type="audio/ogg">
</audio>    

<button>click me</button>

如何在特定条件下播放声音？

1 个答案: