![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
* Tech Stack
* Installation
* Install via Package Manager
* Install via Git
* Download ZIP directly
* Usage
* Easily render player for single page
* Generating music JSON from Netease Cloud Music automatically
* Using MUSE in your own project
* in React Project with webpack bundling
* RequireJS or other AMD module loader
* Others
* Features
* Commands
* Related Projects
* Troubleshooting
* Contributing
* Docs
* Browser Supports
* Todo
* License
* Contributors

Demo

Have a look at here.

Tech Stack

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

Installation

$3

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

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

$3

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

$3

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

$3


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

`

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

`

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:

`javascript
/**
* 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'));
`

---

$3

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.

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

---

$3

---

You must have muse-player already installed.

#### in React.js Project with webpack bundling

`javascript
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(
,
node
);

`

#### RequireJS or other AMD module loader

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

#### Others

`html

`

This will export MuseDOM instance to `window`:
`javascript
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!

- muse-json-generator by @kokororin: https://github.com/moefront/muse-json-generator
- typecho-plugin-ymplayer by @kokororin: https://github.com/kokororin/typecho-plugin-ymplayer
- muse-plugin-desktop-lyric: https://github.com/kirainmoe/muse-plugin-desktop-lyric

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

- [x] 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!