philnash/react-web-audio

A small example React app that listens to the microphone and visualises the audio

React + Web Audio

This is an example application that shows how to visualise audio from the microphone using the Web Audio API in React.

How to build the app

If you're interested in how to build a visualiser like this in React, check out the blog post Audio visualisation with the Web Audio API and React.

For more on the canvas and React, check out the post Techniques for animating on the canvas in React.

How to run the app

You need Node.js installed to run the application.

Clone or download the project from GitHub, change into the directory and install the dependencies.

git clone https://github.com/philnash/react-web-audio.git
cd react-web-audio
npm install

Start the application:

npm start

And open the browser to http://localhost:3000/.

react-web-audio's Issues

Using embedded <audio> instead of microphone

Hey Phil, love this app. I'm attempting to use this to create a 3D audio analyser. However I'm using an embedded piece of audio instead the microphone. I'm having trouble passing the mediaStream to the Analyser and I was wondering if you could help me.

my modified code in App.js is attached.

import React, { Component } from "react";
  import AudioAnalyser from "./audioAnalyser";

import song from './Teehee.mp3';
class Audio extends Component {
  constructor(props) {
    super(props);
    this.state = {        
        audio : null
    };
    this.audioEle = document.getElementById('audio-element');
    this.songName = 'Blues in A';
    this.audioStatus = 'PAUSED';
    this.toggleMusic = this.toggleMusic.bind(this);
  }
  async startMusic() {   
    var mediaStream = this.audioEle.captureStream();
    console.log(mediaStream);
    this.setState({ mediaStream });
  }
  stopMusic() {
    this.state.audio.getTracks().forEach(track => track.stop());
    this.setState({ audio: null }); 
  }
  toggleMusic() {
    if (this.state.audio) {
      this.stopMusic();
    } else {
      this.startMusic();
    }
  }
  render() {
    return (
      <div className="AudioPlayer">        
        <audio id="audio-element" preload="true" src={`${song}`} crossorigin="anonymous" ></audio>
        <div className="controls">
          <button onClick={this.toggleMusic}>
           {this.state.audio ? 'Pause' : 'Play'}
          </button>
        </div>
        {this.state.audio ? <AudioAnalyser audio={this.state.audio} /> : ''}
      </div>
    );
  }
}
export default Audio;

however I get this error "Cannot read property 'captureStream' of null"

How come the stream I'm capturing is null? Do I need to start the stream somehow?

Thanks for the tutorial, it's brought me really far.

Trying to convert class to hook style components

I've taken a wack at trying to convert AudioAnalyser.js to a Hook style Component. I got stuck on one error

The Code

import React, { Component, useRef, useEffect, useState } from 'react';
import AudioVisualiser from './AudioVisualiser';

export const AudioAnalyser = ( { audio } ) => {
  // constructor(props) {
  //   super(props);
  //   this.state = { audioData: new Uint8Array(0) };
  //   this.tick = this.tick.bind(this);
  // }
  const isMounted = useRef()

  const [audioData, setAudioData] = useState(new Uint8Array(0))
  // const [audioContext, setaudioContext] = useState()
  // const [analyser, setAnalyser] = useState()
  // usest
  const audioContext = useRef(null)
  const analyser = useRef(new Uint8Array(0))
  const dataArray = useRef(null)
  const source = useRef(null)
  let rafId = useRef(null)

  useEffect(() => {
    if(!isMounted.current){
      handleMount() // mount logic
      isMounted.current = true 

    } else {
      if(!analyser.current) return 
      tick() // update logic
    }
  
    // return () => {
    //   cancelAnimationFrame(rafId.current);
    //   analyser.current.disconnect();
    //   source.current.disconnect();
    // }
  })
  

  async function handleMount() {
    try {
      // this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
      const newAudCtx = new (window.AudioContext || window.webkitAudioContext)()
      audioContext.current = newAudCtx

      const newAnlyzer = newAudCtx.createAnalyser()
      analyser.current = newAnlyzer

      const newDtArr = new Uint8Array(newAnlyzer.current.frequencyBinCount)
      dataArray.current = newDtArr

      const newSrc = audioContext.current.createMediaStreamSource(audio);
      source.current = newSrc

      newSrc.connect(newAnlyzer)
      const newRafId = requestAnimationFrame(tick())
      rafId.current = newRafId
      
    } catch (error) {
      console.warn('audio analyser mount fail');
    }
  }

  function tick() {
    if(!analyser.current) return 
    analyser.current.getByteTimeDomainData(dataArray.current);
    // setState({ audioData: this.dataArray });
    setAudioData(dataArray.current)
    rafId.current = requestAnimationFrame(tick());
  }



  return <AudioVisualiser audioData={audioData} />
}

export default AudioAnalyser;

The Error

[!error] TypeError: Failed to execute 'getByteTimeDomainData' on 'AnalyserNode': parameter 1 is not of type 'Uint8Array'.

function tick() {
  67 |   if(!analyser.current) return 
> 68 |   analyser.current.getByteTimeDomainData(dataArray.current);
     |                   ^
  69 |   // setState({ audioData: this.dataArray });
  70 |   setAudioData(dataArray.current)
  71 |   rafId.current = requestAnimationFrame(tick());

The Question

can't tell if this is an initialization issue or a order of operations issue. Any guidance on how to correct is greatly appreciated.