react-rhythm-play

React Rhythm Play

Visualization of music playback on react. Provides an audio player component with audio visualization.

Demo

Installation

npm install react-rhythm-play -D

Usage

Dafault:

import { AudioWave } from "react-rhythm-play";
import audio from "./audio_path.ogg";

const Component = () => {
  return <AudioWave audioSource={audio} height={400} width={750} />;
};

export default Component;

With custom audio bar:

import { useRef } from "react";
import { AudioWave, useAudio } from "react-rhythm-play";
import audio from "./audio_path.ogg";

const Component = () => {
  const audioWaveRef = useRef();

  const { togglePlayPause } = useAudio(audioWaveRef);

  return (
    <div>
      <AudioWave
        ref={audioWaveRef}
        height={400}
        width={750}
        audioSource={audio}
        isCustomAudioBar
      />
      <button onClick={togglePlayPause}>play/pause</button>
    </div>
  );
};

export default Component;

Props