react-audio-illustrator v1.0.1

Basic Usage

Setting up an Illustrator is very quick:

import React from 'react'
import Illustrator, { LinearBars } from 'react-audio-illustrator'

export class Demo extends React.Component {
  state = {
    song: ''
  }

  componentDidMount() {
    // fetch song from somewhere
  }

  render() {
    return (
      <Illustrator
        audioRef={this.audio}
        render={({ audioData, startAnimation, stopAnimation }) => (
          <React.Fragment>
            <audio
              ref={e => (this.audio = e)}
              src={this.state.song ? this.state.song : undefined}
              onPlay={this.state.song ? startAnimation : undefined}
              onPause={stopAnimation}
            />

            <LinearBars bars={22} audioData={audioData} />
          </React.Fragment>
        )}
      />
    )
  }
}

Documentation

<Illustrator />

This is the most important component: it provides the data got from the current playing audio. It uses the 'render prop' / 'facc' technique for sharing this data through props:

• props.audioData: array of numbers between 0 and 255
• props.startAnimation: function to start receiving data
• props.stopAnimation: function to stop receiving data

Available properties

<LinearBars />

This is the most basic visualizer: it renders some straight bars.

Available properties

<PulsingCircles />

This visualizer renders circles from the center of the svg.

Available properties