javascript - 我需要做什么才能使用 createMediaElementSourceNode 播放音乐？

Question

我正在尝试连接 aMediaElementAudioSourceNode和 againNode以更改 mp3 文件的音量。
CodeSandBox
代码是参考以下页面创建的。
AudioContext.createMediaElementSource() - Web API | MDN

但音乐不会播放。
我的代码中缺少什么？

下面是源代码。

---

let audio, gainNode;

const App = () => {
  const [playing, setPlaying] = useState(false);
  useEffect(() => {
    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    audio = new Audio("/piano.mp3");
    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>
    </>
  );
};

---

去掉 useEffect 中的以下代码，就可以播放音频了。

const sourceNode = audioCtx.createMediaElementSource(audio);
sourceNode.connect(gainNode);

标签： javascriptreactjsweb-audio-api

Answer 1

audio.crossOrigin = "anonymous";

感谢凯多。