Releasing react-modern-audio-player v2.0.0 - Lighter, Waveforms, and Truly Customizable

MUSGRAVTE — Sat, 11 Apr 2026 14:48:50 +0000

slash9494 / react-modern-audio-player

🔊 Simple, accessible and flexible audio player

React Modern Audio Player

DEMO

https://codesandbox.io/p/sandbox/basic-nfrpfq

Flexible and Customizable UI

Waveform progress with `wavesurfer.js`

Customizable layout and placement — with light & dark themes

Full View

Position Change

Particular View

Installation

npm install --save react-modern-audio-player

Requirements

React 18.0.0 or higher
react-dom 18.0.0 or higher

For React 16/17 projects, use v1.x of this library.

Quick Start

import AudioPlayer from "react-modern-audio-player";

const playList = [
  {
    name: "name",
    writer: "writer",
    img: "image.jpg",
    src: "audio.mp3",
    id: 1,
  },
];
function Player() {
  return <AudioPlayer playList={playList} />;
}

Next.js / Server Components

This library includes the 'use client' directive and can be imported directly in Next.js App Router.

Server Component — render <AudioPlayer> with static props (no hooks, no compound components):

// app/page.tsx — Server Component,

…

View on GitHub

Hi Dev Community! 👋

I'm excited to announce the v2.0.0 release of react-modern-audio-player.
This release comes three years after the initial release.

After listening to feedback from users and community members, I’ve spent the last few months refactoring the library to be more efficient and developer-friendly.

🔗 Quick Links

GitHub: https://github.com/slash9494/react-modern-audio-player
Live Demo: [https://codesandbox.io/p/sandbox/basic-nfrpfq]
NPM: npm install react-modern-audio-player

🚀 Why v2.0.0?

Most React audio players are either too rigid or have confusing APIs that make styling a nightmare. I built this library to solve one specific problem: providing a modern audio player that stays out of your way and lets you customize it intuitively.

In this major update, I focused on three main pillars:

1. ⚡ Extreme Optimization (Bundle Size)

I’ve audited every dependency and refactored the core logic.

Result: The bundle size has been drastically reduced, making it one of the lightest feature-rich audio players available for React today.
Your users get a faster experience, and you get a cleaner dependency tree.

2. 🛠 Intuitive Customization

Stop fighting with CSS overrides.

v2.0.0 introduces a more transparent and logical API structure.
Whether you want to change the layout or apply a custom theme, the props and state management are designed to be predictable and easy to follow.

3. 🐛 Stability & Community Feedback

I’ve cleared out a long list of accumulated issues.

Fixed various playback edge cases.
Improved accessibility and keyboard support.
Enhanced overall stability across different browsers.

📦 How to get started?

Getting started is as simple as:

npm install react-modern-audio-player

import { AudioPlayer } from 'react-modern-audio-player';

const playList = [/* your tracks */];

const App = () => (
  <AudioPlayer playList={playList} />
);

💬 I’d love your feedback!
As an open-source maintainer, your feedback is what keeps this project growing.

What features are you looking for in an audio player?

Did you find the customization as intuitive as I intended?

Check it out on GitHub and if you find it useful, a ⭐ would mean a lot!

Happy coding! 🎧

DEV Community: MUSGRAVTE