无法从特定 URL 访问本地声音

Question

我在使用 React Router 的 React 应用程序中访问本地声音时遇到问题。声音都位于 public/sounds/SFX 文件夹中。

我是这样玩的：

let audio = new Audio(audio_object.path);
audio.play();

路径是这样的： “sounds/SFX/sfx_error.mp3” 要么 “sounds/SFX/sfx_sparkle.mp3”

应用程序中的所有其他声音都能正常播放，但是如果我在 url： http://localhost:3000/childSelector/menu 它失败并显示消息：

http://localhost:3000/childSelector/sounds/SFX/sfx_modal_window_opening.mp3 404（未找到）。未捕获（承诺）DOMException：加载失败，因为未找到受支持的源。

特定声音没有问题 b/c 我可以从其他 url 播放它。问题是它试图查看不存在的 childSelector 文件夹。但是我不知道为什么这个 url 只是附加了那个位。

如果我在路线上高一层 (http://localhost:3000/childSelector/) 并且我从那里播放声音，那么它就可以正常工作。它似乎能够剥离路径的一层，但如果我进一步向下一层，它就会失败。这是我的假设，因为这是此 url 与应用程序中其他人之间的唯一区别。如果重要的话，我是通过直接进入历史来到达这条路线的：

this.props.history.push('/childSelector/menu');

但我已经在应用程序的其他地方这样做了，它没有影响音频。

Answer 1

所以我找到了解决方案，但我认为我想多了。

let audio = new Audio(document.location.origin +"/"+ audio_object.path);

现在，许多未从基础 url 触发的声音在此修复之前播放正常，我不能说为什么 - 它只在 url 被破坏两层深，但使用此解决方案，所有 url 都按预期播放。

无法从特定 URL 访问本地声音

Unable to access local sound from a particular URL

html5-audio

reactjs

react-router