React-musiio-player NPM

First steps

npm install --save react-musiio-player
wrap your root component with

import { PlayerProvider } from "react-musiio-player";

<PlayerProvider>
  <Root />
</PlayerProvider>;

Usage

import {
  useMusicPlayer,
  useMusicPlayerUi,
  Duration,
  PlayPauseButton,
  SeekSlider,
} from "react-musiio-player";

const { onTrackLoad } = useMusicPlayer();
const { trackData } = useMusicPlayerUi();

<div>
  <div>
    <div>{trackData.title}</div>
    <div>{trackData.artist}</div>
  </div>
  <PlayPauseButton />
  <div
    id="play-next-track-button"
    onClick={() =>
      onTrackLoad({
        id: newTrack.id,
        url: newTrack.link,
        title: newTrack.title,
        artist: newTrack.artist,
        isAutoPlay: true,
      })
    }
  />
  <div>
    <SeekSlider />
    <Duration />
  </div>
</div>;

API

`1. useMusicPlayer`

React hook that lets you get parameters that are related to audio playing.

const { seekTo, onTrackLoad, onTrackPlay, onTrackPause } = useMusicPlayer();

`seekTo` - seek to a specific time in seconds

`onTrackLoad` - load new track into player. Accepted arguments:

id,
url,
title,
artist,
isAutoPlay (if true track will automatically play after it was loaded)

`onTrackPlay` - play loaded track

`onTrackPause` - pause current track

`2. useMusicPlayerUi`

React hook that lets you get parameters that are related to player UI.

const { trackData, isPlaying, player } = useMusicPlayerUi();

`trackData` - has loaded track data inside. Fields:

id,
url,
title,
artist,

`isPlaying` (bool) - is current track playing or on pause

`player` (bool) - player instance

`3. CurrentTime`

Component that has current time of track that currently playing. You can wrap it with your own component to customize style.

<CurrentTime />

`4. Duration`

Component that has duration of loaded track. You can wrap it with your own component to customize style.

<Duration />

`5. SeekSlider`

Component that shows track seek slider. You can customize colors with trackColor and fillColor props.

<SeekSlider trackColor={"#ffe29e"} fillColor={"#dc9300"} />

`6. VideoFrame`

Component that shows music video. (works only with youtube links) You can customize size with width and height props.

<VideoFrame width={100} height={100} />

`7. PlayerProvider`

Provider component. Wrap your root component with it.

<PlayerProvider>
  <Root />
</PlayerProvider>

`8. PlayPauseButton`

Play/Pause button component. You can customize it by using playButtonClass and pauseButtonClass props, that should have your own css class. Button will play or pause track depending on isPlaying state.