DEV Community

MUSGRAVTE
MUSGRAVTE

Posted on

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

#webdev #opensource #react #showdev

GitHub logo slash9494 / react-modern-audio-player

🔊 Simple, accessible and flexible audio player

rm-audio-player

React Modern Audio Player

License Version Download BundleSize

DEMO

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

Flexible and Customizable UI

Waveform progress with wavesurfer.js

Waveform view

Customizable layout and placement — with light & dark themes

Full View

Full view — light Full view — dark

Position Change

Position change — light Position change — dark

Particular View

Particular view — compact compound Particular view — play button only

Installation

npm install --save react-modern-audio-player
Enter fullscreen mode Exit fullscreen mode

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} />;
}
Enter fullscreen mode Exit fullscreen mode

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,
…
Enter fullscreen mode Exit fullscreen mode
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

🚀 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
Enter fullscreen mode Exit fullscreen mode 
import { AudioPlayer } from 'react-modern-audio-player';

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

const App = () => (
  <AudioPlayer playList={playList} />
);
Enter fullscreen mode Exit fullscreen mode

💬 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! 🎧

Top comments (0)