无法访问来自特定URL的本地声音

时间:2018-08-21 19:14:06

标签: reactjs react-router html5-audio

我在使用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');

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

1 个答案:

答案 0 :(得分:0)

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

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

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