Skip to content

🎵 Music player with custom controls, playlist, filters, and search.

Notifications You must be signed in to change notification settings

madzadev/audio-player

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React/NextJS Audio Player

Maintenance GitHub issues PRs Welcome MIT license

Player Preview


Requirements

Node.js 18.x / 20+ is required.

Tested on React 18.2.0 and NextJS 14.1.0.

Installation

 npm install @madzadev/audio-player

Usage

import Player from "@madzadev/audio-player";
import "@madzadev/audio-player/dist/index.css";
const tracks = [
  {
    url: "https://audioplayer.madza.dev/Madza-Chords_of_Life.mp3",
    title: "Madza - Chords of Life",
    tags: ["house"],
  },
  {
    url: "https://audioplayer.madza.dev/Madza-Late_Night_Drive.mp3",
    title: "Madza - Late Night Drive",
    tags: ["dnb"],
  },
  {
    url: "https://audioplayer.madza.dev/Madza-Persistence.mp3",
    title: "Madza - Persistence",
    tags: ["dubstep"],
  },
];
<Player trackList={tracks} />

The only mandatory prop is trackList for audio source.

It requires to pass in an array consisting of objects with url, title and tags keys.

Options

There are multiple optional props you can use to configure the player.

The default values of them are displayed below.

<Player
  trackList={tracks}
  includeTags={true}
  includeSearch={true}
  showPlaylist={true}
  sortTracks={true}
  autoPlayNextTrack={true}
/>

Color schemes

You can customize the design of the player by editing the colors object below.

Include only those properties, that you want to customize.

const colors = {
  tagsBackground: "#3e32e4",
  tagsText: "#ffffff",
  tagsBackgroundHoverActive: "#6e65f1",
  tagsTextHoverActive: "#ffffff",
  searchBackground: "#18191f",
  searchText: "#ffffff",
  searchPlaceHolder: "#575a77",
  playerBackground: "#18191f",
  titleColor: "#ffffff",
  timeColor: "#ffffff",
  progressSlider: "#3e32e4",
  progressUsed: "#ffffff",
  progressLeft: "#151616",
  bufferLoaded: "#1f212b",
  volumeSlider: "#3e32e4",
  volumeUsed: "#ffffff",
  volumeLeft: "#151616",
  playlistBackground: "#18191f",
  playlistText: "#575a77",
  playlistBackgroundHoverActive: "#18191f",
  playlistTextHoverActive: "#ffffff",
};
<Player trackList={tracks} customColorScheme={colors} />

Final notes

The audio files can be stored and accessed both locally in your project via file path (e.g., public/yourtrack.mp3) or using external host and providing direct URL to the source (e.g., https://website.com/yourtrack.mp3).

This project is under MIT license, so be free to check it out and contribute!

About

🎵 Music player with custom controls, playlist, filters, and search.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published