{"id":19174415,"url":"https://github.com/moefront/muse","last_synced_at":"2025-12-25T23:43:17.983Z","repository":{"id":3399725,"uuid":"49352751","full_name":"moefront/muse","owner":"moefront","description":"🎧 All you need is a simple and diligent HTML 5 music player written in React.","archived":false,"fork":false,"pushed_at":"2025-03-15T06:40:31.000Z","size":5765,"stargazers_count":88,"open_issues_count":33,"forks_count":14,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-07T18:08:57.854Z","etag":null,"topics":["audio","html5","mobx","muse","player","react","redux","typescript"],"latest_commit_sha":null,"homepage":"https://github.com/moefront/muse","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/moefront.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-01-10T04:06:35.000Z","updated_at":"2024-10-25T22:11:26.000Z","dependencies_parsed_at":"2024-06-19T01:52:04.114Z","dependency_job_id":"bfff0e4f-ac58-4d9b-a4fe-3876b7f3cbd8","html_url":"https://github.com/moefront/muse","commit_stats":null,"previous_names":["kirainmoe/ymplayer"],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moefront%2Fmuse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moefront%2Fmuse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moefront%2Fmuse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moefront%2Fmuse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/moefront","download_url":"https://codeload.github.com/moefront/muse/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252931555,"owners_count":21827112,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","html5","mobx","muse","player","react","redux","typescript"],"created_at":"2024-11-09T10:17:44.744Z","updated_at":"2025-12-25T23:43:12.952Z","avatar_url":"https://github.com/moefront.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg src=\"favicon.png\" alt=\"MUSE\" /\u003e\n\u003c/h1\u003e\n\n[![Build Status](https://travis-ci.org/moefront/muse.svg?branch=master)](https://travis-ci.org/moefront/muse)\n[![Coverage Status](https://coveralls.io/repos/github/moefront/muse/badge.svg?branch=master)](https://coveralls.io/github/moefront/muse?branch=master)\n[![npm](https://img.shields.io/npm/v/muse-player.svg?style=flat)]()\n![npm download](https://img.shields.io/npm/dm/muse-player.svg)\n[![devDependencies](https://img.shields.io/david/dev/moefront/muse.svg?style=flat)]()\n[![license](https://img.shields.io/github/license/moefront/muse.svg?style=flat)]()\n![built by](https://img.shields.io/badge/built_by-MoeFront-ff69b4.svg)\n\n\nMUSE is a simple and diligent HTML5 audio player made with ❤ :)\n\n[中文文档](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)\n\nTable of Contents\n=================\n\n  * [Demo](#demo)\n  * [Tech Stack](#tech-stack)\n  * [Installation](#installation)\n    * [Install via Package Manager](#install-via-package-manager)\n    * [Install via Git](#install-via-git)\n    * [Download ZIP directly](#download-zip-directly)\n  * [Usage](#usage)\n    * [Easily render player for single page](#easily-render-player-for-single-page)\n      * [Generating music JSON from Netease Cloud Music automatically](#generating-music-json-from-netease-cloud-music-automatically)\n    * [Using MUSE in your own project](#using-muse-in-your-own-project)\n      * [in React Project with webpack bundling](#in-reactjs-project-with-webpack-bundling)\n      * [RequireJS or other AMD module loader](#requirejs-or-other-amd-module-loader)\n      * [Others](#others)\n  * [Features](#features)\n  * [Commands](#commands)\n  * [Related Projects](#related-projects)\n  * [Troubleshooting](#troubleshooting)\n  * [Contributing](#contributing)\n  * [Docs](#developing-docs)\n  * [Browser Supports](#browser-supports)\n  * [Todo](#todo-list)\n  * [License](#license)\n  * [Contributors](#contributors)\n\n\n## Demo\n\nHave a look at [here](https://moefront.github.io/muse/dist).\n\n## Tech Stack\n\n - React 16\n - TypeScript\n - MobX\n - mobx-react\n - Stylus\n\n## Installation\n\n### Install via Package Manager\n\nMUSE is available in [npmjs](https://www.npmjs.com/package/muse-player). You can install it by both **npm** and **yarn**.\n\n```shell\n$ yarn add muse-player  # using yarn\n$ npm install --save-dev muse-player # using npm\n```\n\n### Install via Git\n\n```shell\n$ git clone https://github.com/moefront/muse\n$ cd muse\n$ yarn install  # or: npm install\n```\n\n### Download ZIP Directly\n\nClick ```Clone or download``` then choose ```Download ZIP```, or redirect to release page to download a release version.\n\n## Features\n\n - Build with React.js and Mobx\n - Both Mobx version(main) \u0026 Redux version(before 5.2.7)\n - Full lyric support\n - Lyric offset fixing\n - Right-click menu is finally supported\n - Fullscreen mode\n - Middlewares and Custom layouts (new)\n - Responsive design\n - Better mobile side experience\n - ...\n\n## Usage\n\n### Easily render player for single page\n---\nFirstly, import **./dist/assets/muse-player.js** to your own page (Stylesheet has been injected in this Javascript file):\n```html\n\u003cscript type=\"text/javascript\" src=\"./dist/assets/muse-player.js\"\u003e\u003c/script\u003e\n```\n\nWe recommend that you import ```muse-player.js``` from unpkg, where you can get the latest version of MUSE:\n```javascript\n\u003cscript src=\"https://unpkg.com/muse-player/dist/assets/muse-player.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n```\n\nSecondly, use ```MUSE.render()``` method to render player to your page.\n\n\u003e 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:\n\n```javascript\n/**\n * use MUSE.render() or YMPlayer.render() to \n * render a MUSE Player component on your page.\n *\n * @param data {Array}  Musics' detail\n * @param node {Object} HTML element in which new player will be put.\n * @param opt  {Object} Player options\n *\n * @return {Object}\n */\n\nMUSE.render([{\n  title: '',\n  artist: '',\n  cover: '',\n  src: '',\n  lyric: '',\n  translation: ''     // if you do not need translation, delete this row.\n}, {\n  // ......\n}], document.getElementById('player'));\n```\n\n---\n\n### Generating music JSON from Netease Cloud Music automatically\n\nFirst 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.\n\n```shell\n$ npm install -g muse-json-generator\n$ muse 2333666 id1 id2 ...\n```\n\nThen you will find a ```playlist.json``` on your workspace, which contains the details(title, artist, lyric, cover, src, translation) of your target.\n\nFor more detail, see https://github.com/moefront/muse-json-generator .\n\n---\n\n### Using MUSE in your own project\n\n---\n\nYou must have muse-player already installed.\n\n#### in React.js Project with webpack bundling\n\n```javascript\nimport React from 'react';\nimport { render } from 'react-dom';\n\nimport { MuseDOM as MUSE } from 'muse-player';\n\nconst playList = [{\n  // ...\n}];\n\n// MUSE.render() will returns a object with React Component and Player ID wrapped\n// player { component: ReactComponent, ref: undefined, id }\nconst player = MUSE.render(playList); \n\nconst node = document.getElementById('app');    // DOM\n\nrender(\n  \u003cplayer.component /\u003e,\n  node\n);\n\n```\n\n#### RequireJS or other AMD module loader\n\n```javascript\nrequire(['muse-player'], function(MuseDOM) {\n  MuseDOM.render(...);\n});\n```\n\n#### Others\n\n```html\n\u003cscript text=\"text/javascript\" src=\"./dist/assets/muse-player.js\"\u003e\u003c/script\u003e\n```\n\nThis will export MuseDOM instance to ```window```:\n```javascript\nwindow.MuseDOM.render();\n```\n\n## Commands\n\n - Run server in dev mode: ```yarn serve```\n - Run server in production mode: ```yarn serve:dist```\n - Build a dist: ```yarn dist```\n\n## Related Projects\n\nProjects related to MUSE below can help you construct MUSE Player on your site easily. Thanks for their hard working!\n\n - **muse-json-generator** by [@kokororin](https;//github.com/kokororin): https://github.com/moefront/muse-json-generator\n - **typecho-plugin-ymplayer** by [@kokororin](https;//github.com/kokororin): https://github.com/kokororin/typecho-plugin-ymplayer\n - **muse-plugin-desktop-lyric**: https://github.com/kirainmoe/muse-plugin-desktop-lyric\n\n## Troubleshooting\n\nYou 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.\n\n## Contributing\n\nBoth contributing code to this project and telling us your suggestion and ideas are welcomed.\n\nThanks those who contributed to MUSE Player: [@kokororin](https://github.com/kokororin), [@frank-deng](https://github.com/frank-deng).\n\n## Developing Docs\n\nYou can find a detailed documentation about APIs, methods, specification, etc. on WiKi.\n\n## Browser supports\n\n![IE](https://github.com/alrra/browser-logos/raw/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/chrome_12-48/chrome_12-48_48x48.png) | ![Firefox](https://github.com/alrra/browser-logos/raw/master/src/archive/firefox_3.5-22/firefox_3.5-22_48x48.png) | ![Opera](https://github.com/alrra/browser-logos/raw/master/src/archive/opera_15-32/opera_15-32_48x48.png) | ![Safari](https://github.com/alrra/browser-logos/raw/master/src/archive/safari_1-7/safari_1-7_48x48.png)\n--- | --- | --- | --- | --- |\nIE 10+ ✔ | Chrome 24.0+ ✔ | Firefox 24.0+ ✔ | Opera 15.0+ ✔ | Safari 7.0+ ✔ |\n\n## Todo list\n\n - [x] Custom layouts full support\n - [ ] Documents for developing (plugins, themes...)\n\n## License\n\n\u0026copy; 2017 MoeFront Studio, MUSE Player is MIT licensed.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n| [\u003cimg src=\"https://avatars0.githubusercontent.com/u/12712012?v=4\" width=\"80px;\"/\u003e\u003cbr /\u003e\u003csub\u003e吟夢ちゃん\u003c/sub\u003e](https://kirainmoe.com/)\u003cbr /\u003e[💻](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, \u0026 Feedback\") [👀](#review-kirainmoe \"Reviewed Pull Requests\") [⚠️](https://github.com/kirainmoe/muse/commits?author=kirainmoe \"Tests\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/10093992?v=4\" width=\"80px;\"/\u003e\u003cbr /\u003e\u003csub\u003eそら\u003c/sub\u003e](http://kokororin.github.io)\u003cbr /\u003e[🐛](https://github.com/kirainmoe/muse/issues?q=author%3Akokororin \"Bug reports\") [💻](https://github.com/kirainmoe/muse/commits?author=kokororin \"Code\") [🤔](#ideas-kokororin \"Ideas, Planning, \u0026 Feedback\") [🔌](#plugin-kokororin \"Plugin/utility libraries\") [🌍](#translation-kokororin \"Translation\") | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/8265668?v=4\" width=\"80px;\"/\u003e\u003cbr /\u003e\u003csub\u003eFrank Deng\u003c/sub\u003e](http://frank-deng.github.io)\u003cbr /\u003e[🐛](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, \u0026 Feedback\") |\n| :---: | :---: | :---: |\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoefront%2Fmuse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoefront%2Fmuse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoefront%2Fmuse/lists"}