Using React H5 Audio Player

As I get further into my journey as a software engineer, I have spent more time trying to utilize and understand how to use many different npm packages. They can be super useful and really streamline the development process, saving you time from building something by scratch and troubleshooting.

I recently came across the React H5 Audio Player package when planning a project for users to upload and playback music. This package takes care of all the dirty work necessary in building your own media player and also allows for some customization and options. I'm going to discuss how to install, and incorporate this package in your next project

To start, you need to either list this package inside the package.json file OR in a terminal within your project directory - you can run the command to install it. I'll go over each of those steps:

Inside package.json file:

each of these items listed under "dependencies" is a package that can be utilized when building your code. You can list your Audio Player package in this section by writing

"react-h5-audio-player": "3.8.6"

and then once you go begin to build your project, you will run in the terminal

npm install

which will go through that package.json file and install all dependencies listed.

Install from the terminal

If you would rather just install this package directly from the terminal instead, heres how you would do that.

go to the project directory within your terminal, once inside it write the command

npm i react-h5-audio-player

this will install the "react-h5-audio-player", and list in as a dependency in your package.json file for you. Once that is done you will have access to that package within your project.

Using the audio player

theres many different ways you can configure this audio player based on your needs, its worth reading the documentation or look through this Storybook demo and interact with it or read more information on configurations by clicking the "doc" tab at the top of the page.

There are tens of thousands of packages from npm that can streamline your development process and make your life as a programmer easier, because why reinvent the wheel, right? I encourage you to look through all the possible packages out there that you may already exist before starting a project and trying to build something from scratch. Happy Coding!