A library of audio visualizer components for React built with ThreeJS, through react-three-fiber, and the Web Audio API.

Installation

React-audio-visualizers is available as an npm package.

npm install react-audio-visualizers
#or
yarn add react-audio-visualizers

Usage

Here is an example of how to use a visualizer from react-audio-visualizers:

import React from 'react';
import ReactDOM from 'react-dom';
import { SpectrumVisualizer, SpectrumVisualizerTheme } from 'react-audio-visualizers';

function App() {
  return (
    <SpectrumVisualizer
        audio="https://your.domain.com/yourAudioFile.mp3"
        theme={SpectrumVisualizerTheme.radialSquaredBars}
        colors={['#009688', '#26a69a']}
        iconsColor="#26a69a"
        backgroundColor="white"
        showMainActionIcon
        showLoaderIcon
        highFrequency={8000}
    />
  );
}

ReactDOM.render(<App />, document.querySelector('root'));

Demos

Take a look at some demos to see what the visualizers look like.

Documentation

Check out the documentation website.

License

This project is licensed under the terms of the MIT license.