0.0.6 • Published 6 years ago
@fiveem/react-music-player v0.0.6
React Music Player
Simple react music player.
Screenshots
Install
npm i @fiveem/react-music-playerUsage
import MusicPlayer from '@fiveem/react-music-player'
<MusicPlayer playlist={this.state.playlist}
playClicked={this.playClicked}
pauseClicked={this.pauseClicked}
previousClicked={this.previousClicked}
nextClicked={this.nextClicked}
backgroundColor={this.backgroundColor}
activeButtonColor={this.activeButtonColor}
inactiveButtonColor={this.inactiveButtonColor}
buttonTextColor={this.buttonTextColor}
textColor={this.textColor}
activeTrackColor={this.activeTrackColor}
progressBarColor={this.progressBarColor} />API
| name | type | default value | description |
|---|---|---|---|
| playlist | Array (Required) | [] | The playlist for the music player |
| playClicked | Function | Function that is called when the play button is clicked | |
| pauseClicked | Function | Function that is called when the pause button is clicked | |
| previousClicked | Function | Function that is called when the previous button is clicked | |
| nextClicked | Function | Function that is called when the next button is clicked | |
| backgroundColor | String | #fcfcfc | Background color of the music player |
| inactiveButtonColor | String | #8a8a8a | Color of the inactive buttons (the inactive button are the next and previous buttons) |
| buttonTextColor | String | #000 | Color of the text/icon that is displayed on the buttons |
| textColor | String | #000 | Color of the music player text |
| activeTrackColor | String | #f0f0f0 | Highlight color of the active track |
| progressBarColor | String | #111111 | Color of the progress bar |
JSON
const playlist = [
{
name: 'One Last Time',
author: 'South London HiFi',
image: 'theImage',
file: 'file_name.mp3'
}, {
name: 'Sunshine Samba',
author: 'Chris Haugen',
image: 'theImage',
file: 'file_name.mp3'
},
]License
react-music-player is released under the MIT license.