如何在JS中避免键盘控制音频

Question

我有一个非常简单的应用程序，它会在用户输入内容时显示输入音频，并在用户停止输入时停止音频。

代码如下：

let audio = new Audio('https://www.fesliyanstudios.com/play-mp3/768')
let timeout;
let input = document.querySelector('input')
input.onkeydown=function(){
    window.clearTimeout(timeout)
   audio.play()
   
}
input.onkeyup= function(){
    window.clearTimeout(timeout)
    timeout = setTimeout(()=>{audio.pause()},1000);
}

<input></input>

但是，我发现我的键盘上有一个开始/停止音频/视频键（某些键盘上的 F8 键），如果用户按下此键，将播放打字音频。 "

有没有办法避免这种情况发生？

感谢您的回复！

Answer 1

这是个好问题！答案是浏览器假定标准媒体元素中的任何内容都是可外部控制的，因此播放/暂停控制可以通过键盘、蓝牙控制器、锁屏控制等来完成。

一种解决方案是改用Web Audio API 进行播放。无论如何，这可能更适合您的用例，因为它可以让您更好地控制音频样本的缓冲和计时。

您将首先获取音频源数据，将其解码到 PCM 缓冲区，然后通过AudioBufferSourceNode 播放。未经测试的代码，但在async function 中尝试这样的事情：

// Set up audio context and source node
const audioContext = new AudioContext();
const sourceNode = audioContext.createBufferSource();
sourceNode.connect(audioContext.destination);

// Make HTTP request for audio data
const res = await fetch('https://www.fesliyanstudios.com/play-mp3/768');
if (!res.ok) {
  throw res.status;
}

// Get the raw data and decode it to PCM
sourceNode.buffer = await audioContext.decodeAudioData(
  await res.arrayBuffer()
);

// Start playback
sourceNode.start();

请注意，您应该仅在有用户交互时创建此音频上下文。如果您想尽早创建它，您可以随时致电.resume() 进行用户交互。这是避免自动播放政策问题所必需的

希望这能让你开始！