React-mp3

This is a light blazingly fast, simple audio player for react. Here's a Demo

Installation

npm install --save react-mp3

Quickstart

Provider

Inside your root file App.tsx or App.jsx wrap around app with AudioProvider:

//ES6
import {AudioProvider} from "react-mp3";

//CommonJS
const {AudioProvider} = require("react-mp3");
  ...

export default function App () {
  return (
      <AudioProvider>
          //Rest of the code...
      </AudioProvider>
  )
}

AudioPlayer

Now import AudioPlayer from any of your component.

//ES6
import AudioPlayer from "react-mp3";

//CommonJS
const AudioPlayer = require("react-mp3");
//...

export default function Component () {
//...

return (
    <AudioPlayer src={[
        {
            title: 'Sample',
            artist: 'John Doe',
            url: 'https://filesamples.com/samples/audio/mp3/sample2.mp3',
            artwork: [
              {src: 'https://i.picsum.photos/id/516/200/300.jpg?hmac=hMEuvTcrLNhrMSSGnaRit4YgalzJJ66stNu-UT70DKw'}
              ]
        }
        ]}/>
)
} 

Hooks

Now you can use useAudio hook to change audio track, play, pause and much more from anywhere in your react app. Inside your component file Component.jsx:

import { useAudio } from "react-mp3";

export default function Component() {
  const {
    trackIndex,
    setTrackIndex,
    isPlaying,
    setIsPlaying,
    loop,
    setLoop,
    shuffle,
    setShuffle,
    volume,
    setVolume,
    //etc...
  } = useAudio();

  //....

}

Components

react-mp3 offers usable components.

LoopButton: a react button to loop audios.

NextButton: a button to go to next track. takes total number of audio as an argument.

PlayPauseButton: a button to go to play or pause current track.

PrevButton: a button to go to previous track. takes total number of audio as an argument.

ShuffleButton: a button to shuffle or unshuffle track.

TrackSlider: a range slider.

VolumeButton: a button to mute or unmute track.

Icons

LoopIcon, NextIcon, PlayIcon,PauseIcon, PrevIcon, ShuffleIcon, SpeakerIcon,SpeakerOffIcon.

Props

name | type | default | defination | -----| ----- | ----- | ----------- | src | { title: string; artist?: string; artwork?: { src: string;}[]; url: string;} | undefined | An array of audio urls, titles, artists, and artworks. | volume | number | 1 |Audio volume value between 0 and 1. | loop | "no-repeat \| "repeat-once" \| "repeat-all" | no-repeat | | shuffle | boolean | false | Whether or not to shuffle audios. The default value is false.| trackSliderClassName | string| undefined | If you want to change the style of the trackslider, use className.| showTime | boolean | true| Show the elapsed time and duration. The default value is true. | showVolume | boolean | true | Whether or not to show the volume button. The default value is true.| showPrev | boolean | true | Show the previous button. The default value is true.| showNext | boolean | true | Show the next button. The default value is true.| showShuffle | boolean | true | Show the shuffle button. The default value is true.| showCover | boolean | true |Showcase the title, artist name, and artwork. The default value is true. | trackSliderColor | string | #021C1E | Track sliders color when theres value| trackSliderBg | string | #6FB98F | Background color of the track slider| buttonColor | string | #000 | The color of the audio players buttons| buttonBgColor |string|#6fb98f | background color for buttons. Default is#6fb98f|currentTrackNum |number|0 | The current track number0as the opening track |onError |ReactEventHandler|null | Handle audio player related error withonErrorfunction |flexDirection | flex-direction CSS value |"row" |track slider and controls position. The default value isrow. | textColor |string | "#000" | The default value is #000. |

Improvements

Feel free to update, issue, improve this package. Fork the repo, make your changes and pull request.