This content originally appeared on DEV Community and was authored by amir
Reaplay is React HOC for create your custom music player with any styles you like.
give me your tracks list, and i'll give you must state, functionalities you need for create a music player
Install
npm install --save reaplay
yarn add reaplay
Usage
import React from 'react'
import {Reaplay} from 'reaplay'
export default function App() {
const songList = [
"songSrc", // url song (https://example.com/song.mp3)
"songSrc", // url song
require("./songSrc"), //local song,
]
return (
// optional ↓
<Reaplay tracks={songList} startIndex={2}>
{(player) => {
console.log("loading :", player.isLoading)
return (
// your player
)
}}
</Reaplay>
)
}
"tracks" prop is required but "startIndex" is optional prop
some states of player (example)
player.isLoading
player.duration
player.trackProgress
player.volume
player.isRepeat
and more states for create your dynamically player ui
some functions of player (example)
player.toNextTrack()
player.toPrevTrack()
player.setVolume(70)
player.setIsRepeat(true) | player.setIsRepeat((isRepeat) => !isRepeat)
player.playFast()
and more functionalities you can use for your own player events
example
you can clone this, or use little example in codesandbox
For supporting me, Please click on the Star button on Github and Share this post and finally send the Repo to your friends.
Github Repo:
https://github.com/Amir-Alipour/reaplay
This content originally appeared on DEV Community and was authored by amir
amir | Sciencx (2021-12-22T12:33:02+00:00) React Music Player. Retrieved from https://www.scien.cx/2021/12/22/react-music-player/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.