Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/madzadev/audio-player
🎵 Music player with custom controls, playlist, filters, and search.
https://github.com/madzadev/audio-player
audio mp3 music nextjs player react
Last synced: about 1 month ago
JSON representation
🎵 Music player with custom controls, playlist, filters, and search.
- Host: GitHub
- URL: https://github.com/madzadev/audio-player
- Owner: madzadev
- Created: 2021-02-15T18:19:38.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-03-13T01:29:36.000Z (4 months ago)
- Last Synced: 2024-05-13T07:22:00.879Z (about 2 months ago)
- Topics: audio, mp3, music, nextjs, player, react
- Language: JavaScript
- Homepage: https://audioplayer.madza.dev
- Size: 31.5 MB
- Stars: 316
- Watchers: 5
- Forks: 45
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Lists
- awesome-stars - madzadev/audio-player - 🎵 Music player with custom controls, playlist, filters, and search. (JavaScript)
- awesome-stars - madzadev/audio-player - 🎵 Music player with custom controls, playlist, filters, and search. (JavaScript)
- docsify-awesome-stars - madzadev/audio-player - 🎵 Music player with custom controls, playlist, filters, and search. (JavaScript)
- awesome-jekyll - madzadev/audio-player - 🎵 Music player with custom controls, playlist, filters, and search. (JavaScript)
README
# React/NextJS Audio Player
[](https://github.com/madzadev/audio-player/graphs/commit-activity)
[](https://github.com/madzadev/audio-player/issues/)
[](http://makeapullrequest.com)
[](https://choosealicense.com/licenses/mit/)
### Demo: [https://audioplayer.madza.dev](https://audioplayer.madza.dev)
---
## Requirements
Node.js 18.x / 20+ is required.
Tested on React 18.2.0 and NextJS 14.1.0.
## Installation
```javascript
npm install @madzadev/audio-player
```
## Usage
```javascript
import Player from "@madzadev/audio-player";
import "@madzadev/audio-player/dist/index.css";
```
```javascript
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"],
},
];
```
```javascript
```
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.
```javascript
```
## 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.
```javascript
const colors = {
tagsBackground: "#9440f3",
tagsText: "#ffffff",
tagsBackgroundHoverActive: "#2cc0a0",
tagsTextHoverActive: "#ffffff",
searchBackground: "#18191f",
searchText: "#ffffff",
searchPlaceHolder: "#575a77",
playerBackground: "#18191f",
titleColor: "#ffffff",
timeColor: "#ffffff",
progressSlider: "#9440f3",
progressUsed: "#ffffff",
progressLeft: "#151616",
bufferLoaded: "#202222",
volumeSlider: "#9440f3",
volumeUsed: "#ffffff",
volumeLeft: "#151616",
playlistBackground: "#18191f",
playlistText: "#575a77",
playlistBackgroundHoverActive: "#18191f",
playlistTextHoverActive: "#ffffff",
};
```
```javascript
```
## 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!