Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

🎵 🎼 MPlayer 🎵

devDependencies Status dependencies Status PRs Welcome License: MIT

MPlayer Demo

Project Information

A HTML Music Player for the Web. Rebuilt in order to be modular and able to be imported with different projects easily.

Technologies Used

Technology Description Link ↘️
HTML5 Hyper Text Markup Language ----
CSS3 Cascading Style Sheets ----
JavaScript High Level, Dynamic, Interpreted Language ----
SASS Syntactically Awesome Style Sheets
Babel Javascript Compiler
Webpack Javascript Module Bundler
Browser Sync Synchronised Browser Testing
NodeJS Open Source, Javascript Run Time Environment, Execute Javascript code for server side

Development Setup Process

npm install

npm run dev - Run webpack in development mode

npm run build - Run webpack in production mode

Setup / Usage

Using Import or Require

// Using Import
import MPlayer from 'path/to/mplayer.min.js';

// Using Require
const MPlayer = require('path/to/mplayer.min.js');

Using Link and Script Tags

<link rel="stylesheet" href="path/to/mplayer.min.css">

<script src="path/to/mplayer.min.js"></script>

Initialize the music player

const mplayer = new MPlayer(options);

Options Object Format Example

new MPlayer({
	songList: [{}],
	container: document.getElementById('mp'),
	fixed: false,
	theme: false,
	position: false,
	hideCoverArt: false,
	mini: false,
	volume: 0.5,

Song List Object Format

songList = {
	name: 'songName',
	artist: 'songArtist',
	cover: 'songCover',
	url: 'songPath',

Options / Properties

Option Name Description Default Required
theme Choose a specified theme false No
mini Remove playlist showing and shrinks the player false No
fixed Make this a fixed music player (Mini needs to be enabled for this to work) false No
position Choose a position for the player if it's mini and fixed ('TOP_LEFT', 'TOP_RIGHT', 'BOTTOM_LEFT', 'BOTTOM_RIGHT') false && centered No
container Element container for the player - Yes
hideCoverArt Disable the cover art from showing in the player false No
volume Set Volume for the player (Values between 0 - 1) 0.5 No
song list Array of song objects - Yes

Available Themes

By Default: 'mp'
Black & Red: 'mp--black-red'
Materialistic: 'mp--materialistic'
Light Theme: 'mp--light'

Custom Theme Development

In the options pass in your own custom theme name:

new MPlayer({
	theme: 'custom_theme--name'

Create your own theme file under 'scss/themes' folder: ie. '_custom-theme.scss'

##  Look at the theme layout file for references ##

Build the project using "npm run build" after SCSS editing is complete

Import into main.scss: @import 'themes/custom-theme.scss'

Additional / Caveat

  • Song Names must be unique

FAQ / Contact

  • Feel free to submit pull requests and issues! Always looking for improvements and fixes
  • Email: