Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zhangwei900808/react-cd-player
React-based music player
https://github.com/zhangwei900808/react-cd-player
audio audio-player cd cd-player music-player react
Last synced: 2 months ago
JSON representation
React-based music player
- Host: GitHub
- URL: https://github.com/zhangwei900808/react-cd-player
- Owner: zhangwei900808
- Created: 2017-08-09T04:05:19.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-04T08:31:03.000Z (almost 6 years ago)
- Last Synced: 2024-09-30T18:37:22.198Z (4 months ago)
- Topics: audio, audio-player, cd, cd-player, music-player, react
- Language: JavaScript
- Homepage: http://awbeci.xyz/react-cd-player/
- Size: 29.4 MB
- Stars: 8
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-CD-Player
test
## Installation
```js
npm install --save react-cd-player
yarn add react-cd-player
```
## Usage
```js
import React, { Component } from 'react';
import CdPlayer from 'react-cd-player'
class App extends Component {
onPlay=()=>{
console.log('App onplay')
}
onPause=()=>{
console.log('App onPause')
}
render() {
const musicList =[{
"id": 1,
"title": "追光者",
"artist": "岑宁儿",
"cover": require('./assets/images/01.jpg'),
"mp3": 'http://cdn.awbeci.com/music/react-cd-player/01.mp3'
}, {
"id": 2,
"title": "被风吹过的夏天",
"artist": "林俊杰-金纱",
"cover": require('./assets/images/02.jpg'),
"mp3": 'http://cdn.awbeci.com/music/react-cd-player/02.mp3'
}, {
"id": 3,
"title": "小酒窝",
"artist": "林俊杰-阿sa",
"cover": require('./assets/images/03.jpg'),
"mp3": 'http://cdn.awbeci.com/music/react-cd-player/03.mp3'
}]
return (
);
}
}
export default App;
```
## property
### musicList:array
```
[{
"id": 1,
"title": "追光者",
"artist": "岑宁儿",
"cover": require('./assets/images/01.jpg'),
"mp3": 'http://cdn.awbeci.com/music/react-cd-player/01.mp3'
}]
```
## methods & events
### onPlay
### onPause
## reference
[pixiv](https://github.com/LoveLiveSunshine/pixiv.moe)
[LoveLiveSunshine](https://github.com/LoveLiveSunshine/LoveLiveSunshine.github.io)
[material-ui](https://github.com/callemall/material-ui)
[material-ui-icons](https://github.com/MODX-Club/material-ui-icons)