Recently, while working on a 3D web app that involves positional 3D audio, I encountered an issue with crackling noise in the output as the sound source changes position. At first, I suspected it could be related to programming or library problems (specifically using howler.js).
To investigate further, I created a basic example using plain JS and the Webaudio API. The code snippet can be found below:
// Insert code snippet here The sample project showcases setting up audio elements like panner, listener, and oscillator within the Web Audio context.
Interestingly, after testing the application by changing the xPosition slider, the annoying crackling sound became more evident, particularly when using headphones. Despite my attempts to modify value ranges for the position change rate, the issue persisted even with minor adjustments.
It seems that maintaining a slow rate of change for the panner's position might not be practical for real-world scenarios. Even utilizing timers to update the position or requestAnimationFrame() didn't resolve the problem.
If anyone has insights into the root cause of this distortion and potential solutions, your input would be greatly appreciated!
You can view the complete example here.