Skip to content

luvuong-le/mplayer

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 

🎵 🎼 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 https://sass-lang.com/
Babel Javascript Compiler https://babeljs.io/
Webpack Javascript Module Bundler https://webpack.js.org/
Browser Sync Synchronised Browser Testing https://www.browsersync.io/
NodeJS Open Source, Javascript Run Time Environment, Execute Javascript code for server side https://nodejs.org/en/

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: lu-vuongle@hotmail.com