I Created an Open-Source Music Player 🎵🎶
Tags: showdev, webdev, react, music
Published: 2021-04-08 23:30:17

---
title: I Created an Open-Source Music Player 🎵🎶
published: true
description: 
tags: showdev, webdev, react, music
cover_image: https://images.ctfassets.net/zlsyc9paq6sa/4WZ30vxAhkA0uJ2vhIcJ0r/d375184bf3fbd8ee8b06057146a0cbef/1617922900_1171x509.png
canonical_url: https://madza.dev/blog/i-created-an-open-source-music-player
---
Some days ago I made a [post](https://dev.to/madza/hooray-i-created-my-first-portfolio-36li) about how I created [madza.dev](https://madza.dev). One of the most exciting parts was to create an Audio player for the [Music section](https://madza.dev/music).

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

As a [music producer](https://soundcloud.com/999madza), 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](https://cdn.madza.dev/uploads/2021/04/1617835662_1090x521.gif)

Links: 💻 [Demo](https://audioplayer.madza.dev/)  📦 [NPM package](https://www.npmjs.com/package/@madzadev/audio-player) 💿 [GitHub Source](https://github.com/madzadev/audio-player)

---

### 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

```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
<Player trackList={tracks}>
```

`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.

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

### Color schemes

You can further customize the player UI by editing the color variable below. Pre-defined color schemes are planned in the future.

```javascript
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;
      }`;
```

```javascript
<Player trackList={tracks} customColorScheme={colors} />
```

## Final notes

It's recommended to use CMS like [Contentful](https://www.contentful.com) or [DatoCMS](https://www.datocms.com/) 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](https://github.com/madzadev/audio-player). Take a look and give it a ⭐ if you liked it. 

<hr>

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](https://twitter.com/madzadev), [LinkedIn](https://www.linkedin.com/in/madzadev/) and [GitHub](https://github.com/madzadev)!
Visit my [Blog](https://madza.dev/blog) for more articles.