react-mp3 v0.1.2

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

Improvements

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