如何在next.js中导入mp3文件？

Question

我正在尝试将mp3文件导入到我的next.js项目中 - 我想从AudioPlayer.js访问文件'DRUMS.mp3'，所以我写了： import drums from '../resources/DRUMS.mp3'; 但是出现了这个错误： 我还安装了 'npm install file-loader --save-dev'，但没有帮助。

感谢所有回答者！

- Nadav Holtzman

Answer 1

你可以使用HTML的audio标签来播放它 - 将它放在public文件夹中，然后直接引用它们，例如：

 <audio
        controls
        src="/DRUMS.mp3">
            Your browser does not support the
            <code>audio</code> element.
    </audio>

如果你想进一步与音频api进行交互，可以使用webaudioAPI - https://www.html5rocks.com/en/tutorials/webaudio/intro/

- Ramakay

---

它仍然显示找不到文件DRUMS.mp3。 我也尝试了- src =“../resources/DRUMS.mp3” - Nadav Holtzman

资源是否在“public”目录下？ - Ramakay

不，应该吗？ - Nadav Holtzman

是的，将它放在 public 文件夹中，即 public/resources，然后引用为 /resources/DRUMS.mp3。 - Ramakay