是否可以使用 Web Auido API 在不扭曲声音的情况下向 MediaElementAudioSourceNode 添加效果？

Question

我正在尝试通过连接 MediaElementAudioSourceNode and a GainNode 来操纵音量。
下面是它的演示。
CodeSandBoxs

如果您按下播放按钮，音乐会正常播放。
但是，操纵 input type=range 来改变音量会使您正在播放的声音失真。（如果您尝试，请调低音量。）

有没有办法在不失真的情况下改变音量？
或者，如果您使用 MediaElementAudioSourceNode，这是不可避免的事情吗？
找了一篇提到声音失真现象的文章，没找到

在demo中我们只是为了改变音量，但我们还想添加混响，延迟等

演示代码如下

let audio, gainNode;

const App = () => {
  const [playing, setPlaying] = useState(false);
  useEffect(() => {
    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    audio = new Audio("/piano.mp3");
    audio.crossOrigin = "anonymous"
    const sourceNode = audioCtx.createMediaElementSource(audio);
    gainNode = audioCtx.createGain();
    sourceNode.connect(gainNode);
    gainNode.connect(audioCtx.destination);
    return () => audioCtx.close();
  }, []);

  const playPause = () => {
    if (playing) {
      audio.pause();
      setPlaying(false);
      return;
    }
    audio.play();
    setPlaying(true);
  };

  const cahngeVolume = (e) => (gainNode.gain.value = e.target.value);

  return (
    <>
      <button onClick={playPause} style={{ display: "block" }}>
        {playing ? "Pause" : "Play"}
      </button>
      <div>
        <span>Volume</span>
        <input type="range" onChange={cahngeVolume} step="any" />
      </div>
    </>
  );
};

Answer 1

失真的原因可能是 GainNode 的范围并没有真正映射到您的输入范围。默认情况下，范围输入的 min/max 值为 0 和 100。但是 GainNode 会将信号乘以其增益值。这意味着理想情况下，滑块的最大值应为 1。

<input type="range" onChange={cahngeVolume} step="any" max="1" />

滑块从 0（无声音）到 1（无放大）的方式。

是否可以使用 Web Auido API 在不扭曲声音的情况下向 MediaElementAudioSourceNode 添加效果？

Is it possible to add effects to the MediaElementAudioSourceNode without distorting the sound, using the Web Auido API?

javascript

reactjs

web-audio-api