philnash/react-web-audio

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

react-web-audio's Issues

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.

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.