DEV Community

loading...
Cover image for I Created an Open-Source Music Player 🎵🎶

I Created an Open-Source Music Player 🎵🎶

madza profile image Madza Originally published at madza.dev ・2 min read

Some days ago I made a post about how I created madza.dev. One of the most exciting parts was to create an Audio player for the Music section.

I've been receiving some PMs about it, so I decided to elaborate a bit.

As a music producer, I started it as a component to play my own tracks. Tho, the more I worked on it, the more I knew I should turn it into something the community could benefit from, as well.

So I made an open-source package from it. The one that you can install, set up the source for tracks, and customize the looks.

Audio Player

Links: 💻 Demo 📦 NPM package 💿 GitHub Source


Features

  1. Play / Pause
  2. Next / Previous
  3. Repeat / Loop
  4. Progress slider
  5. Time left / Total
  6. Volume slider
  7. Search track
  8. Filter by genre
  9. Playlist items

Install

 npm install @madzadev/audio-player
Enter fullscreen mode Exit fullscreen mode

Usage

import Player from "@madzadev/audio-player";
import "@madzadev/audio-player/dist/index.css";
Enter fullscreen mode Exit fullscreen mode
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"],
  },
];
Enter fullscreen mode Exit fullscreen mode
<Player trackList={tracks}>
Enter fullscreen mode Exit fullscreen mode

trackList is the mandatory prop and requires to pass in an array consisting of objects with url, title and tags keys.

Options

The default values of available options props are displayed.

<Player
  trackList={tracks}
  includeTags={true}
  includeSearch={true}
  showPlaylist={true}
  autoPlayNextTrack={true}
/>
Enter fullscreen mode Exit fullscreen mode

Color schemes

You can further customize the player UI by editing the color 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;
      }`;
Enter fullscreen mode Exit fullscreen mode
<Player trackList={tracks} customColorScheme={colors} />
Enter fullscreen mode Exit fullscreen mode

Final notes

It's recommended to use CMS like Contentful or DatoCMS to manage your audio files and access them via API.

The project is open source and any feature requests or issues are welcomed in the Github repo. Take a look and give it a ⭐ if you liked it.


Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on Twitter, LinkedIn and GitHub!
Visit my Blog for more articles.

Discussion (10)

pic
Editor guide
Collapse
rahxuls profile image
Rahul

this is so simple and amazing

Collapse
madza profile image
Madza Author

Thank you so much! 🙏💖

Collapse
renas63 profile image
Renas

Well done!

Collapse
madza profile image
Madza Author

Thanks a lot 🙏💖

Collapse
kvanrooyen profile image
Keagan Van Rooyen

Love the music player and your music!

Collapse
madza profile image
Madza Author

Thank you so much 🙏❤

Collapse
funbeedev profile image
Fum

Thanks for sharing this. When I looked at your portfolio I did take notice of how cool the music player looked so nice to know you've made it available as open source :)

Collapse
madza profile image
Madza Author

Awesome to hear! 😉 Hopefully you will find it useful 🙏💖

Collapse
artydev profile image
artydev

Great, thank you

Collapse
madza profile image
Madza Author

Thanks a lot! 🙏💖