How to import mp3 files with next.js?

Question

I'm trying to import mp3 files to my next.js project -

I want to access the file 'DRUMS.mp3' from AudioPlayer.js so I wrote

import drums from '../resources/DRUMS.mp3';

but this comes up:

I've also installed - 'npm install file-loader --save-dev' but that didn't help.

Thanks to all responders!

Answer 1

You could just use an html audio tag to play it - place it in the public folder and then reference them directly, i.e

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

If you want to further interact with the audio api, you could use the webaudio API - https://www.html5rocks.com/en/tutorials/webaudio/intro/