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>

但是，我发现我的键盘上有一个start/stop audio/video键（某些键盘中的F8键），如果用户按下这个键，就会播放打字音频。 “

有什么方法可以避免这种情况发生？

感谢任何回复！

Answer 1

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

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

首先获取音频源数据，将其解码为PCM缓冲区，然后通过AudioBufferSourceNode. Untested code, but try something like this in an 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() 与用户交互。这是避免自动播放政策问题所必需的

希望这能让你入门！

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

How to avoid keyboard control to audio in JS

javascript

audio

mediaelement

html5-audio

web-audio-api