在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:MUSE开源软件地址:https://gitee.com/kirainmoe/YmPlayer开源软件介绍:MUSE is a simple and diligent HTML5 audio player made with ❤ :) 中文文档 / Redux build / Old version Table of Contents
DemoHave a look at here. Tech Stack
InstallationInstall via Package ManagerMUSE 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 DirectlyClick Features
UsageEasily render player for single pageFirstly, 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 <script src="https://unpkg.com/muse-player/dist/assets/muse-player.js" type="text/javascript"></script> Secondly, use
/** * 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 automaticallyFirst have $ npm install -g muse-json-generator$ muse 2333666 id1 id2 ... Then you will find a For more detail, see https://github.com/moefront/muse-json-generator . Using MUSE in your own projectYou must have muse-player already installed. in React.js Project with webpack bundlingimport 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'); // DOMrender( <player.component />, node); RequireJS or other AMD module loaderrequire(['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.MuseDOM.render(); Commands
Related ProjectsProjects related to MUSE below can help you construct MUSE Player on your site easily. Thanks for their hard working!
TroubleshootingYou 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]. ContributingBoth 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 DocsYou can find a detailed documentation about APIs, methods, specification, etc. on WiKi. Browser supports
Todo list
License© 2017 MoeFront Studio, MUSE Player is MIT licensed. ContributorsThanks goes to these wonderful people (emoji key):
全部评论
专题导读
上一篇:notepad: 基于vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本。兼 ...发布时间:2022-03-25下一篇:flume-hdfs-sink-king: 使用flume1.8的包flume-hdfs-sink源码修改 主要解决滚动文件时 ...发布时间:2022-03-25热门推荐
热门话题
阅读排行榜
|
请发表评论