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

Question

我正在尝试读取本地.wav文件并与Howler一起播放。

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

我得到一个错误：http://localhost:3000/doremi.wav 即使声音文件与代码文件位于同一目录中。咆哮正在向我的应用程序发起获取请求，但我只希望它可以在本地文件中读取。为什么要执行获取请求？

谢谢。

Answer 1

  

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

它在哪个目录中都没有关系。仍然必须发出HTTP请求。如果没有完整的URL，则您指定的内容是相对于当前页面基本URL的。如果是http://localhost:3000/，则尝试加载doremi.wav将加载http://localhost:3000/doremi.wav。

  

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

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