[](https://travis-ci.org/moefront/muse) [](https://coveralls.io/github/moefront/muse?branch=master) []()  []() []()  MUSE is a simple and diligent HTML5 audio player made with ❤ :) [中文文档](https://github.com/moefront/muse/wiki/MUSE-5:-Getting-Start) / [Redux build](https://github.com/moefront/muse/tree/v5-redux) / [Old version](https://github.com/moefront/muse/tree/v4-legacy) Table of Contents ================= * [Demo](#demo) * [Tech Stack](#tech-stack) * [Installation](#installation) * [Install via Package Manager](#install-via-package-manager) * [Install via Git](#install-via-git) * [Download ZIP directly](#download-zip-directly) * [Usage](#usage) * [Easily render player for single page](#easily-render-player-for-single-page) * [Generating music JSON from Netease Cloud Music automatically](#generating-music-json-from-netease-cloud-music-automatically) * [Using MUSE in your own project](#using-muse-in-your-own-project) * [in React Project with webpack bundling](#in-reactjs-project-with-webpack-bundling) * [RequireJS or other AMD module loader](#requirejs-or-other-amd-module-loader) * [Others](#others) * [Features](#features) * [Commands](#commands) * [Related Projects](#related-projects) * [Troubleshooting](#troubleshooting) * [Contributing](#contributing) * [Docs](#developing-docs) * [Browser Supports](#browser-supports) * [Todo](#todo-list) * [License](#license) * [Contributors](#contributors) ## Demo Have a look at [here](https://moefront.github.io/muse/dist). ## Tech Stack - React 16 - TypeScript - MobX - mobx-react - Stylus ## Installation ### Install via Package Manager MUSE is available in [npmjs](https://www.npmjs.com/package/muse-player). You can install it by both **npm** and **yarn**. ```shell $ yarn add muse-player # using yarn $ npm install --save-dev muse-player # using npm ``` ### Install via Git ```shell $ 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): ```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')); ``` --- ### 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. ```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 . --- ### Using MUSE in your own project --- 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/kokororin): https://github.com/moefront/muse-json-generator - **typecho-plugin-ymplayer** by [@kokororin](https;//github.com/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](https://github.com/moefront/muse). 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](https://github.com/kokororin), [@frank-deng](https://github.com/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 - [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://github.com/kentcdodds/all-contributors#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](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!