时间戳

首页 > 解决方案 > 如何在特定条件下播放声音？

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

问题描述

我正在制作一个 Web 服务器来输出网站上图形的压力值。如果压力太低/太高，我想播放声音警告用户。我似乎找不到这样做的方法，因为我有一个独特的问题：我<meta http-equiv="refresh" content="1" />的 html 代码中必须有。这当然每秒刷新一次页面，所以即使我有一个按钮让用户在第一次压力太低时单击，页面也会立即重新加载，并且我会在控制台中收到“Uncaught (in promise) 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 行作为我认为可行的答案，但结果也没有结果。

标签： javascripthtml5-audio

解决方案

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

正如您在下面的示例中看到的那样，在您单击那个无意义的单击我按钮之前，音频不会真正开始播放。谷歌浏览器的新音频播放政策规定，用户首先必须与文档交互才能播放音频。在此处阅读更多相关信息。

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>

推荐阅读