阻止响应音频播放

Question

在我的反应代码的返回代码中，我这样说：

 {NOTES.map((note, index) => {
        return (
          <audio
            id={index}
            key={index}
            src={`../../assets/pianoSounds/${index + 1}.mp3`}
          />
        );
      })}

我只是在 HTML 中创建了一堆音频对象。然后在我的代码中我说：

const noteAudio = new Audio(document.getElementById(index).src);   
noteAudio.play();

因此代码从 HTML 音频对象中获取音频源并播放它。但是，我在 Chrome 控制台中收到以下错误，并且我的音频无法播放：

现在经过一番搜索，我来到了这个 StackOverFlow question。然而，他们的解决方案实际上并没有播放声音，它只是说有一个错误。我如何让声音播放？有没有更好的方法来做到这一点？