无法访问来自特定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，这不是问题。问题是它试图查找不存在的childSelector文件夹。但是我不知道为什么只在此网址后附加该位。

如果我在路线（http://localhost:3000/childSelector/）上处于较高水平，并且从那里播放声音，则说明效果很好。看来它可以剥离路径的上一级，但是如果我走得更远，则下一级会失败。这是我的假设，因为这是此网址与应用程序中其他网址之间的唯一区别。如果重要的话，我直接进入历史就走了这条路：

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

但是我已经在应用程序中的其他地方完成了该操作，它并没有影响音频。

Answer 1

所以我找到了解决方案，但我想我想得太多了。

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

现在，在此修复程序之前，没有从基本URL触发的大量声音可以正常播放，我不能说出原因-仅对于深两个级别的URL才被破坏，但是使用此解决方案，所有URL都可以播放如预期的那样。