Build a Music Player in React JS with react-h5-audio-player

Home
Blog
How to Build a Music...

TL;DR

Use react-h5-audio-player — the best package for music players in React JS.
Install quickly with npm install react-h5-audio-player and import styles.
Provides ready-to-use controls (play, pause, skip, volume, seek bar).
Fully customizable UI with events for playlists, analytics, and branding.
Perfect for podcasts, e-learning, meditation apps, portfolios, and music streaming.

Introduction

Audio content is everywhere today—podcasts, guided meditations, background music, and online courses are all driving user engagement across the web. For modern applications, having an integrated, smooth, and responsive music player isn’t just a nice-to-have, it’s often essential.

React JS, with its reusable components and dynamic UI capabilities, makes adding audio features straightforward. However, building a fully functional music player from scratch can quickly become time-consuming and complex. This is where react-h5-audio-player shines: a ready-to-use, highly customizable component that comes with built-in functionality and strong developer adoption.

And if you’re looking to take things further—whether that’s scaling your project, adding custom audio features, or ensuring top performance—you can always partner with an experienced ReactJS Development Company to bring your vision to life faster and more efficiently.

Best Package for Music Player in React JS

The most widely used and highly rated package among React developers is:

react-h5-audio-player

Why is it the best?

Over 200k+ weekly downloads
Simple API and default controls
Mobile responsive out of the box
Highly customizable with your own UI components and CSS
Active maintenance and large community support

It allows you to easily add play/pause, skip, volume, seek bar, and more — with the option to override everything if you want a custom design.

How to Implement with React JS (Step-by-Step + Code Example)

1. Install the package

npm install react-h5-audio-player

yarn add react-h5-audio-player

2. Add styles

import 'react-h5-audio-player/lib/styles.css';

You can also create your own custom styles later.

3. Basic Usage

Here’s a simple music player example:

// components/MusicPlayer.jsx

import React from 'react';

import AudioPlayer from 'react-h5-audio-player';

import 'react-h5-audio-player/lib/styles.css';

const MusicPlayer = () => {

  return (

    <AudioPlayer

      autoPlay

      src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"

      onPlay={e => console.log("Playing...")}

    />

  );

};

export default MusicPlayer;

4. Embed it in your app

// App.jsx

import React from 'react';

import MusicPlayer from './components/MusicPlayer';

function App() {

  return (

    <div className="App">

      <h2>React Music Player</h2>

      <MusicPlayer />

    </div>

  );

}

export default App;

5. Embed it in your app

You can fully control or hide elements like forward, rewind, volume, etc.

<AudioPlayer

  src="your-audio-source.mp3"

  showJumpControls={false}

  customAdditionalControls={[]}

  customVolumeControls={[]}

  layout="horizontal-reverse"

/>

You can even hook into events like:

onPlay
onPause
onEnded
onSeeked
onVolumeChange

This gives you full control if you want to build a playlist or analytics feature.

6. Adding a Playlist (Bonus)

You can create a simple playlist logic with React state:

const playlist = [

  { title: 'Song 1', src: 'url1.mp3' },

  { title: 'Song 2', src: 'url2.mp3' },

];

const MusicPlayer = () => {

  const [currentTrack, setCurrentTrack] = React.useState(0);

  const handleEnd = () => {

    setCurrentTrack((prev) => (prev + 1) % playlist.length);

  };

  return (

    <AudioPlayer

      src={playlist[currentTrack].src}

      onEnded={handleEnd}

    />

  );

};

Benefits of Using react-h5-audio-player

Quick Setup
Just install and go — no need to build controls from scratch.
Fully Responsive
Mobile-ready, works well in React Native Web too (with tweaks).
Customizable UI
Use your own icons, layout, or replace parts of the UI with props.
Event Handling
Access to playback events gives you control over user behavior.
Active Development
Frequent updates and GitHub issues actively resolved.

Use Cases

Music streaming apps (like SoundCloud clones)
Podcast players inside blogs or news websites
Educational platforms with audio lessons
Meditation apps that play ambient tracks
Portfolio websites with voiceovers or sound samples

Case Study: Meditation App

A small team wanted to build a meditation app where users could choose ambient music to play during sessions. Instead of investing weeks in building an audio UI, they used react-h5-audio-player:

Integrated audio for 50+ ambient tracks
Added custom branding over the player
Used onPlay and onEnded to sync with timers

Result: Delivered a polished app in under 3 weeks, saved 40+ hours of UI development.

Conclusion

Building a music player in React JS has never been simpler, thanks to react-h5-audio-player. With just a few lines of setup, you can implement a powerful, customizable, and production-ready component that drastically cuts down development time while still delivering a polished audio experience.

Whether you’re creating a podcast platform, an e-learning portal, or a personal website with background tracks, this package provides everything you need. And because React’s component-driven model is so flexible, you can easily expand your player with playlists, analytics, or user preferences.

For teams looking to go beyond the basics and build a scalable, feature-rich application, working with experienced ReactJS developers can help accelerate development and ensure best practices are followed.

💡 Pro Tip: Book a free 30-minute consultation with our experts to discuss how we can bring your React-based project to life with the right mix of speed, quality, and scalability.

FAQs

1. Is react-h5-audio-player suitable for production?

Yes. It’s stable, well-maintained, and used by thousands of projects in production.

2. Can I use my own buttons and icons?
Absolutely. You can customize almost every control or hide them and build your own on top of the component.

3. Does it support streaming URLs?
Yes, you can stream audio directly from external URLs like AWS S3, Firebase, or any CDN.

4. How can I implement playlists?

You can manage the playlist using an array of track URLs and update the src prop based on onEnded or user actions.

5. What browsers are supported?
All modern browsers — Chrome, Firefox, Safari, Edge — support HTML5 Audio and work well with this package.

React JS