Javascript 在本地主机上运行时，无法在React应用程序上播放音频

在codesandbox上运行应用程序时，我的音频播放正常，但现在我已在本地导入了React应用程序，每次在程序中触发音频播放提示时都会遇到以下错误消息：

DOMException:未能加载，因为找不到支持的源。

我的

audio\u clips

文件夹是我的

public

文件夹中的一个直接子文件夹，其中包含我的

index.html

文件，因此我认为url路径不是问题所在。我尝试使用encoderComponent，以防每个URL中的下划线引起任何问题，但这没有什么区别

以下是问题产生的文件：

const KEY_TO_CLIP_URL_MAP = {
  Q: "./audio_clips/808sub.wav",
  W: "./audio_clips/iELECTRIBE-kick-10.wav",
  E: "./audio_clips/iELECTRIBE-kick-7.wav",
  A: "./audio_clips/lowerthud.wav",
  S: "./audio_clips/schumacher2.wav",
  D: "./audio_clips/snappy-clappy.wav",
  Z: "./audio_clips/spindown.wav",
  X: "./audio_clips/synth-blobble-zap.wav",
  C: "./audio_clips/whuuup.wav"
};

export function playAudioClip(keyPressed) {
  const audioURL = KEY_TO_CLIP_URL_MAP[keyPressed];
  let audioElement = new Audio(audioURL);
  const audioPromise = audioElement.play();

  if(audioPromise !== undefined) {
    audioPromise.then(() => {

    }).catch(error => {
      console.log(error);
      console.log(audioURL);
      console.log(audioElement);
    });
  }
}

---

我的解决方案是只使用我在internet上找到的音频片段的源URL，而不是尝试让它们在本地工作。

尝试将您的路径包装在require（'path_string'）中，Webpack将为您解析这些路径