/muse

🎧 All you need is a simple and diligent HTML 5 music player written in React.

Primary LanguageTypeScriptMIT LicenseMIT

MUSE

Build Status Coverage Status npm npm download devDependencies license built by

MUSE is a simple and diligent HTML5 audio player made with ❀ :)

δΈ­ζ–‡ζ–‡ζ‘£ / Redux build / Old version

Table of Contents

Demo

Have a look at here.

Tech Stack

  • React 16
  • TypeScript
  • MobX
  • mobx-react
  • Stylus

Installation

Install via Package Manager

MUSE is available in npmjs. You can install it by both npm and yarn.

$ yarn add muse-player  # using yarn
$ npm install --save-dev muse-player # using npm

Install via Git

$ git clone https://github.com/moefront/muse
$ cd muse
$ yarn install  # or: npm install

Download ZIP Directly

Click Clone or download then choose Download ZIP, or redirect to release page to download a release version.

Features

  • Build with React.js and Mobx
  • Both Mobx version(main) & Redux version(before 5.2.7)
  • Full lyric support
  • Lyric offset fixing
  • Right-click menu is finally supported
  • Fullscreen mode
  • Middlewares and Custom layouts (new)
  • Responsive design
  • Better mobile side experience
  • ...

Usage

Easily render player for single page


Firstly, import ./dist/assets/muse-player.js to your own page (Stylesheet has been injected in this Javascript file):

<script type="text/javascript" src="./dist/assets/muse-player.js"></script>

We recommend that you import muse-player.js from unpkg, where you can get the latest version of MUSE:

<script src="https://unpkg.com/muse-player/dist/assets/muse-player.js" type="text/javascript"></script>

Secondly, use MUSE.render() method to render player to your page.

PS: If you are migrating from YMPlayer 4 to MUSE, pay attention that the method of using custom tag to render player has been removed. But you can still use MUSE.render() or YMPlayer.render() to render a player:

/**
 * use MUSE.render() or YMPlayer.render() to 
 * render a MUSE Player component on your page.
 *
 * @param data {Array}  Musics' detail
 * @param node {Object} HTML element in which new player will be put.
 * @param opt  {Object} Player options
 *
 * @return {Object}
 */

MUSE.render([{
  title: '',
  artist: '',
  cover: '',
  src: '',
  lyric: '',
  translation: ''     // if you do not need translation, delete this row.
}, {
  // ......
}], document.getElementById('player'));

Generating music JSON from Netease Cloud Music automatically

First have muse-json-generator installed. You can install it from npm. Also you should know the music's Netease Cloud Music ID that you want to add.

$ npm install -g muse-json-generator
$ muse 2333666 id1 id2 ...

Then you will find a playlist.json on your workspace, which contains the details(title, artist, lyric, cover, src, translation) of your target.

For more detail, see https://github.com/moefront/muse-json-generator .


Using MUSE in your own project


You must have muse-player already installed.

in React.js Project with webpack bundling

import React from 'react';
import { render } from 'react-dom';

import { MuseDOM as MUSE } from 'muse-player';

const playList = [{
  // ...
}];

// MUSE.render() will returns a object with React Component and Player ID wrapped
// player { component: ReactComponent, ref: undefined, id }
const player = MUSE.render(playList); 

const node = document.getElementById('app');    // DOM

render(
  <player.component />,
  node
);

RequireJS or other AMD module loader

require(['muse-player'], function(MuseDOM) {
  MuseDOM.render(...);
});

Others

<script text="text/javascript" src="./dist/assets/muse-player.js"></script>

This will export MuseDOM instance to window:

window.MuseDOM.render();

Commands

  • Run server in dev mode: yarn serve
  • Run server in production mode: yarn serve:dist
  • Build a dist: yarn dist

Related Projects

Projects related to MUSE below can help you construct MUSE Player on your site easily. Thanks for their hard working!

Troubleshooting

You can find solutions of most problems on Wiki. If not, please open an issue whenever you are facing a problem, or contact us at kirainmoe@gmail.com.

Contributing

Both contributing code to this project and telling us your suggestion and ideas are welcomed.

Thanks those who contributed to MUSE Player: @kokororin, @frank-deng.

Developing Docs

You can find a detailed documentation about APIs, methods, specification, etc. on WiKi.

Browser supports

IE Chrome Firefox Opera Safari
IE 10+ βœ” Chrome 24.0+ βœ” Firefox 24.0+ βœ” Opera 15.0+ βœ” Safari 7.0+ βœ”

Todo list

  • Custom layouts full support
  • Documents for developing (plugins, themes...)

License

Β© 2017 MoeFront Studio, MUSE Player is MIT licensed.

Contributors

Thanks goes to these wonderful people (emoji key):


εŸε€’γ‘γ‚ƒγ‚“

πŸ’» 🎨 πŸ“– πŸ’‘ πŸ€” πŸ‘€ ⚠️

そら

πŸ› πŸ’» πŸ€” πŸ”Œ 🌍

Frank Deng

πŸ› πŸ’» πŸ€”

This project follows the all-contributors specification. Contributions of any kind welcome!