- One step to load mp3 in react
1 hour ago·3 min read
Yes, you just need to execute one step to lead mp3 in react application.
Photo by NeONBRAND on Unsplash
I was developing an application that helps to edit audio files for one of my clients. I am developing react application for him and I need to load audio files in it. I googled and get a bunch of packages to load mp3 still my mp3 files from the static folder is not exported or ready to use.
After googling for almost an hour I reach the answer and that is The only single step to load mp3.
Let jump to the example directly, Let say we have audio files in our react application and we need to load them with all the audio file controls such as the play button, pause button and speaker volume range button and so on.
The problem here with react application especially when you were using Next JS that they serve static files in one directory (public for Next.js) and loading static files from the single directory is difficult on Server Side.
If you were new to Server Side then server-side rendering basically running an application on the server instead of locally.
So loading images is quite easy and handles easily on the server-side by Next JS, How?.
Let me explain, Next.js simply loads those static images on the server and after building your application those images were loaded from the Express server created by Next.JS itself we never bundle the application with images in it, just for a performant reason.
The main issue with the mp3 files was that they are not recognised on the server-side, the audio support is the feature of the browser, not the server. So we will face an issue in running mp3 on the server-side.
We need an npm package called url-loader which simply works with HTML files and convert them into data URL base 64 encoded string. Just like when you upload a PDF or image on the browser and convert them to base 64 to send it to the server.
The conversion of HTML files into a data URL is important because the data URL is easily recognised and understood by the server. We don’t need to convert it in real-time on the server instead we can use webpack to do it for us.
You have to follow only one step to configure webpack and use an npm package for serving mp3 files.
Once we configured the webpack with our url-loader package we simply telling our webpack to serve our mp3 files as data URL in the bundle of our whole application.
Webpack will simply bundle our scripts and mp3 files into data URL to understood and load in the browser.
The npm package we are using is url-loader
I am leaving all the basic necessity processes on to you. The process to create Next.js repository and adding some sample mp3 files.
Instead, I am using ready-to-use-example which have those mp3 files in the static folder called public in the root directory.
Once you cloned the repository install the url-loader package using yarn or npm.
yarn add url-loader
Now the only and foremost step for loading mp3 is to configure the webpack. Create next.config.js file in the root directory and add the following lines.
Once added to the next.config.js file we are ready to import our mp3 files from the public folder and use them.
If you look into the code we have mentioned a key-value pair such as test, this is the file format or file extension we will be using.
We simply use webpack and the external loaders to bundle our mp3 files and use them. We can provide more loaders to webpack configuration to bundle our file we basically want such as SVG, js or png or handlebars and so on. We can even use webpack for our server application in Node JS.
Stay tuned, I will cover a complete understanding of webpack in another story.
Until, next time. Have a good day, people.
- Date of publication:
- Sun, 05/02/2021 - 04:06
Click on the link - it will be copied to clipboard