Web Audio API声音交互在一段时间后停止工作

Question

我正在为我的javascript项目使用Web Audio API，我遇到了一个问题，我似乎找不到任何地方的答案。

我添加了事件监听器来响应keydown事件—每次用户按下键盘上的某个键时，都会播放声音。这可以工作一段时间，但在按下按键大约6秒后，发生了一些事情使声音停止-按键可能在半秒内不会发出声音，然后它们将重新开始工作。有人知道为什么会发生这种情况，我该如何解决吗?

下面是我的事件监听器代码:

import Audio from './scripts/audio'
document.addEventListener('keydown', (e) => {
const audio = new Audio();
let key = e.key;
audio.createNotes(key);
})

下面是我的音频代码:

class Audio {
constructor() {
// instantiate web audio api object 
this.audioContext = new AudioContext();
// create gain node, gain corresponds with volume
this.gainNode = this.audioContext.createGain();
this.gainNode.gain.setValueAtTime(0.08, 0);
// allows volume to decrease with time
this.gainNode.gain.exponentialRampToValueAtTime(0.001, this.audioContext.currentTime + 1.5);

}
createNotes(key) {
// C4 to C5 scale, attach frequencies to corresponding keyboard value
const notes = {
's': 261.63,
'd': 293.66,
'f': 329.63,
'g': 349.23,
'h': 392.00,
'j': 440.00,
'k': 493.88,
'l': 523.25,
'e': 587.33,
'r': 659.25,
't': 698.46,
'y': 783.99,
'u': 880.00,
'i': 987.77,
'o': 1046.50,
'p': 1174.66
}

// if e.key corresponds with notes key, we want to play sound

if (notes[key]) {
// oscillator corresponds with frequency, 
// create oscillator node to attach frequency from notes object
let oscillator = this.audioContext.createOscillator();
oscillator.frequency.setValueAtTime(notes[key], this.audioContext.currentTime);
// lower gain for higher frequency notes
if (notes[key] > 699) {
this.gainNode.gain.setValueAtTime(0.03, this.audioContext.currentTime);
}
// connect oscillator node to volume node
oscillator.connect(this.gainNode);
// connect gain node to destination (speakers)
this.gainNode.connect(this.audioContext.destination);
oscillator.start(0);
// tone will play for 1.5 seconds 
oscillator.stop(this.audioContext.currentTime + 1.5)
}
}

}
export default Audio;

Answer 1

问题是您创建了太多的AudioContext实例。这不是API的预期用途。为什么要创建这么多实例?你应该重用它们。

通常你只需要一个AudioContext。在mozzila开发者页面上，它清楚地说明了一些Chrome版本只支持6.

https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/AudioContext google_chrome

这里有一个问题/答案可以进一步解释这个问题。Chrome在达到50个音频输出流后不产生音频

要解决你的问题，基本上是创建一个AudioContext，并使其可以全局访问，像这样:

let globalAudioContext = new AudioContext();
class Audio
{
constructor()
{
// instantiate web audio api object 

// create gain node, gain corresponds with volume
this.gainNode = globalAudioContext.createGain();
this.gainNode.gain.setValueAtTime(0.08, 0);
// allows volume to decrease with time
this.gainNode.gain.exponentialRampToValueAtTime(0.001, globalAudioContext.currentTime + 1.5);

}
createNotes(key)
{
// C4 to C5 scale, attach frequencies to corresponding keyboard value
const notes = {
's': 261.63,
'd': 293.66,
'f': 329.63,
'g': 349.23,
'h': 392.00,
'j': 440.00,
'k': 493.88,
'l': 523.25,
'e': 587.33,
'r': 659.25,
't': 698.46,
'y': 783.99,
'u': 880.00,
'i': 987.77,
'o': 1046.50,
'p': 1174.66
}
// if e.key corresponds with notes key, we want to play sound
if (notes[key]) {
// oscillator corresponds with frequency, 
// create oscillator node to attach frequency from notes object
let oscillator = globalAudioContext.createOscillator();
oscillator.frequency.setValueAtTime(notes[key], globalAudioContext.currentTime);
// lower gain for higher frequency notes
if (notes[key] > 699) {
this.gainNode.gain.setValueAtTime(0.03, globalAudioContext.currentTime);
}
// connect oscillator node to volume node
oscillator.connect(this.gainNode);
// connect gain node to destination (speakers)
this.gainNode.connect(globalAudioContext.destination);
oscillator.start(0);
// tone will play for 1.5 seconds 
oscillator.stop(globalAudioContext.currentTime + 1.5);
}
}

}
document.addEventListener('keydown', (e) =>
{
const audio = new Audio();
let key = e.key;
console.log(e.keyCode);
audio.createNotes(key);
})

如果你想做一个键盘钢琴，你应该把每个键绑定到一个预初始化的图形节点(增益节点)，并重复使用它们。

它重新开始工作的原因是因为垃圾收集器需要时间来启动。