Skip to content
Switch branches/tags

Latest commit


Git stats


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


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


Have a look at here.

Tech Stack

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


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


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


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="" 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}

  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 .

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

  <player.component />,

RequireJS or other AMD module loader

require(['muse-player'], function(MuseDOM) {


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

This will export MuseDOM instance to window:



  • 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!


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


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


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


Thanks goes to these wonderful people (emoji key):


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


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

Frank Deng

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

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