Question

当我在 codeandbox 上运行我的应用程序时，我的音频播放得很好，但是现在我已经在本地导入了我的 React 应用程序，每次在我的程序中触发音频播放提示时我都会遇到此错误消息：

DOMException: Failed to load because no supported source was found.

我的 audio_clips 文件夹是我的 public 文件夹中的一个直接子文件夹，其中包含我的 index.html 文件，所以我不相信网址路径是问题。我尝试使用 encodeERIComponent 以防每个 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);
    });
  }
}

Answer 1

我的解决方案是只使用我在互联网上找到的音频剪辑的源网址，而不是试图让它们在本地工作。

Answer 2

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

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

2 个答案: