moefront / muse

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

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

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 [email protected].

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

muse's Issues

Cannot render after MUSE.destroy()

( *・ω・)✄╰ひ╯

Steps to Reproduce

Open http://moefront.github.io/muse/dist/
Type MUSE.destroy($('.muse-player').id) in console
Type MUSE.render(playList, $('#app')) in console
Then it will produce a ReferenceError like

ControlContainer.js:22 
Uncaught TypeError: Cannot read property 'paused' of null

Player suport lyric ball (same version 4)

I like lyric display in version 4 (via image bellow)

I edit code support show time duration for song and support playlist format from mp3.zing.vn

歌词不以时间开头时无法加载(￣ε(#￣) Σ

比如錯覚CROSSROADS
去掉歌词中[al:錯覚CROSSROADS]\n[by:菜籽酱]\n[00:00.42]\n后正常
(:з」∠)

移动端微信内点击进度条无法正确匹配歌词

iOS 最新系统，微信也是最新，一个小项目中用到了 up 主的 ymplayer，但是发现多次点击滚动条后，就出现无法正确匹配歌词的状况了。

[Bug]重新播放时歌词无法滑动

重现方法：

1. 随便开一个有MUSE的页面（我只试过列表里只有一首歌的情况）
2. 把歌放完（不开循环）
3. 再点一次播放键
4. 可以观察到音频已经开始播放，但是歌词没有随之滑动。

Firefox 进度条

点击进度条没反应 _ (:з」∠) _
Chrome没有问题呢

ReferenceError: event is not defined
...getElementsByClassName("ym-played")[0],clickarea=event.clientX,awayleft=audioEle...

Element not found

Found in your blog when switch pages, a compatiblity problem with PJAX? 😂

Player can support file lyric .lrc And show button Pre, Next

Player is very well but If support lyric .lrc and show button Pre, Next. Use can change list, loop, repeat, Repeat all

Fullscreen mode problem

Press ESC to exit FullScreen mode works well.
But the message on ContextMenu is still 退出全屏模式.
Thanks for the work !

Repeating music items are rendered after switching pages using pushState

When switching from a page which has rendered MUSE to another (pushState), switch back to this page(or other pages that have another instance) and re-render MUSE, the playlist will have repetitions (previous playlist items + current playlist items).

Maybe there are some problems with MUSE.destroy() method.

not working on iOS in a particular situation

Interesting (
Register more than two setInterval before MUSE.render() is called.
And on iOS, muse-player not working at all. (Clicking play button or dragging progress bar)
There are no errors in console.
After clear the timers and call MUSE.destroy() & MUSE.render(), it reborned.

Here is a demo url

The above steps work well in PC and Android Browsers.

Demo中部分歌曲无法播放

Demo中以下歌曲无法播放

• 僕たちはひとつの光
• これから
• Kira-Kira Sensation!