React/NextJS Audio Player
Demo: https://audioplayer.madza.dev
Installation
npm install @madzadev/audio-playerIf you are using NPM v7 or above, you need to add --legacy-peer-deps at the end of the command above.
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} />trackList is the mandatory prop and requires to pass in an array consisting of objects with url, title and tags keys.
Config for NextJS
If you are working on NextJS, there are 3 additional steps:
npm i next-images next-transpile-modules- create
next.config.jsin your project's root - paste this in the newly created config file:
const withImages = require("next-images");
const withTM = require("next-transpile-modules")(["@madzadev/audio-player"]);
module.exports = withImages(withTM());Options
The default values of available options props are displayed.
<Player
trackList={tracks}
includeTags={true}
includeSearch={true}
showPlaylist={true}
autoPlayNextTrack={true}
/>Color schemes
You can further customize the player UI by editing the colors variable below.
Pre-defined color schemes are planned in the future.
const colors = `html {
--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;
--volumeSlider: #9440f3;
--volumeUsed: #ffffff;
--volumeLeft: #151616;
--playlistBackground: #18191f;
--playlistText: #575a77;
--playlistBackgroundHoverActive: #18191f;
--playlistTextHoverActive: #ffffff;
}`;<Player trackList={tracks} customColorScheme={colors} />Final notes
It's recommended to use CMS like Contentful or DatoCMS to manage your audio files and access them via API.