在ReactJS中使用Howler读取本地声音文件

Posted 2021-03-28

我试图在本地.wav文件中读取并使用Howler播放它。

var sound = new Howl({
    src: ['doremi.wav']
})
sound.play()

我收到一个错误：http://localhost:3000/doremi.wav即使声音文件与代码文件在同一目录中。 Howler正在向我的应用发起get请求，但我只是想让它在本地文件中读取。为什么要提出请求？

谢谢。

答案

即使声音文件与代码文件位于同一目录中。

它所在的目录无关紧要。仍然需要进行HTTP请求。如果没有完整的URL，您指定的内容是相对于当前页面基本URL的。如果那是http://localhost:3000/，那么尝试加载doremi.wav将加载http://localhost:3000/doremi.wav。

但我只想让它在本地文件中读取

浏览器并不真正知道或关心localhost恰好是在同一台机器上运行的Web服务器。它只是一个像example.com这样的主机名。此URL上加载的所有内容都来自您计算机上运行的Web服务器。您的浏览器无法在本地为此页面加载文件，除非用户将它们拖到页面中或将它们放入文件输入中。