Question

我想知道是否有可能确定页面上音轨（而不是设备）的当前音量。

我的页面上有一个音频播放器，用户可以设置音量，我的问题是如何获取JavaScript以检测音量的变化并在音量变化时做些什么？

例如，在音量过高或过低时创建一个弹出窗口。

注意：：我是JavaScript的初学者，所以请多加注意。

Answer 1

您可以通过HTML onvolumechange事件或使用以下命令来执行此操作：

addEventListener('volumechange', () => {
  // do stuff...
}) ;

我对the API并不太熟悉，尽管我想如果您记录该事件，则会发现可以作为函数基础的卷的值。

Answer 2

audio元素是一个HTMLAudioElement，它扩展了HTMLMediaElement接口，该接口具有一个volumechange事件，您可以按照通常的方式进行钩接（addEventListener等）。

Answer 3

这是一个简单的<audio>元素，其类名为player：

<audio class="player" controls="true">
  <source src="path/to/audio/track.mp3" type="audio/mpeg" />
  <source src="path/to/audio/track.ogg" type="audio/ogg" />
  <source src="path/to/audio/track.wav" type="audio/wav" />
  <p class="fallback">ERROR: Your browser doesn't HTML5 audio.</p>
</audio>

然后，您将为volumechange事件创建一个事件侦听器，并将其绑定到上面的<audio>元素，如下所示：

const PLAYER = document.querySelector("audio.player");
PLAYER.addEventListener("volumechange", () => {
  console.log("The volume has changed.");
});

我不确定您是否使用jQuery，但是如果您使用的话，可以改用以下代码：

$("audio.player").on("volumechange", () => {
  console.log("The volume has changed.");
});

注意：：controls属性指定您希望音频播放器的控件（播放，暂停，停止，音量等）可见。

如果您想隐藏控件和/或创建自己的自定义控件，则必须删除controls属性并使用CSS隐藏音频播放器：

audio.player { 
  display: none !important;
}

祝你好运。

如何获取JavaScript以检测音量变化并在变化时做些什么？

3 个答案: