Nice-audio-Player

A React component which is an improved version of the standard HTML5 media player that replaces the progress bar with a visual representation of the audio waveform & displays more useful information of the audio file.

Installation

$ npm install nice-audio-player

Import

import React from "react";
import { WavePlayer } from "nice-audio-player";

function App(props) {
  return (
    <>
      <WavePlayer
        track={props.track}
        handleSkipNext={props.handleNext}
        handleSkipPrevious={props.handlePrevious}
      />
    </>
  );
}

export default App;

Props

The Nice Audio Player pkg exposes the <WavePlayer> component which takes 3 props:

• handleSkipNext & handleSkipPrevious are props which take a helper function passed by reference to handle the logic for selecting the next audio file in the cue.
• track - Object containing all the information necessary to play the audio.

const track = {
  url: "/link-to-audio.mp3",
  albumCover: "jpeg || png",
  album: "",
  artist: "",
  trackTitle: "",
};