Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including muse-player with all npm packages installed. Try it out:

var musePlayer = require("muse-player")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

muse-player v5.7.5

Just a simple and dilligent HTML5 Audio Player written in React.

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!

  • 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

IEChromeFirefoxOperaSafari
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):

| [
吟夢ちゃん](https://kirainmoe.com/)
[💻](https://github.com/kirainmoe/muse/commits?author=kirainmoe "Code") [🎨](#design-kirainmoe "Design") [📖](https://github.com/kirainmoe/muse/commits?author=kirainmoe "Documentation") [💡](#example-kirainmoe "Examples") [🤔](#ideas-kirainmoe "Ideas, Planning, & Feedback") [👀](#review-kirainmoe "Reviewed Pull Requests") [⚠️](https://github.com/kirainmoe/muse/commits?author=kirainmoe "Tests") | [
そら](http://kokororin.github.io)
[🐛](https://github.com/kirainmoe/muse/issues?q=author%3Akokororin "Bug reports") [💻](https://github.com/kirainmoe/muse/commits?author=kokororin "Code") [🤔](#ideas-kokororin "Ideas, Planning, & Feedback") [🔌](#plugin-kokororin "Plugin/utility libraries") [🌍](#translation-kokororin "Translation") | [
Frank Deng](http://frank-deng.github.io)
[🐛](https://github.com/kirainmoe/muse/issues?q=author%3Afrank-deng "Bug reports") [💻](https://github.com/kirainmoe/muse/commits?author=frank-deng "Code") [🤔](#ideas-frank-deng "Ideas, Planning, & Feedback") | | :---: | :---: | :---: |

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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free