CODEWITHSUNDEEP
reactjsaudionext.jsmp3
Nadav Holtzman
Nadav Holtzman

Reputation: 278

How to import mp3 files with next.js?

I'm trying to import mp3 files to my next.js project - enter image description here

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

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

but this comes up:

enter image description here

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

Thanks to all responders!

Upvotes: 5

Views: 16287

Answers (1)

Ramakay
Ramakay

Reputation: 3135

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/

Upvotes: 7

Related Questions