问题
I am running into an issue when trying to change the underlying buffer data while a looping buffer is being played back.
bufferData = audioContext.bufferSourceNode.buffer.getChannelData(0);
bufferData[100] = newValue;
This kind of behavior seems to work fine in most browsers—I've tested in Chrome, Safari, Opera, Edge, all working fine—but this doesn't seem to be possible in Firefox. This seems like a bug. I read in this StackOverflow question from 2015 that this way of updating a buffer "should not be done this way ..." How should this sort of thing be achieved in firefox?
Attempted workaround:
tempBufferData = bufferSourceNode.buffer.getChannelData(0);
bufferSourceNode.stop();
bufferSourceNode.disconnect();
buffer = audioContext.createNewBuffer();
tempBufferData[10] = newValue;
buffer.copyToChannel(tempBufferData);
bufferSourceNode.buffer = buffer;
bufferSourceNode.connect(gainNode);
bufferSourceNode.start(audioContext.currentTime);
The method of stopping the current buffer, disconnecting, creating a new bufferSourceNode and new buffer, and reconnecting the nodes every time the buffer is updated feels onerous. In my testing of that method so far, there is quite a lot of glitchiness/popping introduced. Is there a refined method for doing this?
Here is a concrete example of the need for this kind of updating buffer: a demo in which you can draw a waveform that is looped, that updates every time you change the drawing. Seems to work except in firefox.
回答1:
I don't think this is the answer you were hoping for as it'll be a fair bit of extra work, but I think the way you 'should' do this in Firefox (that is, the way the web audio API spec intended for these kinds of tasks) is to use an AudioWorklet.
https://developer.mozilla.org/en-US/docs/Web/API/AudioWorklet
来源：https://stackoverflow.com/questions/61567545/web-audio-api-updating-looping-buffer-data-in-real-time-impossible-in-firebox