Visualizing Audio as a Waveform in React

npx create-react-app audio-visualizercd audio-visualizernpm install

// App.jsimport { useRef, useState } from "react";import "./styles.css";import WaveForm from "./WaveForm";export default function App() {  const [audioUrl, setAudioUrl] = useState();  const [analyzerData, setAnalyzerData] = useState(null);  const audioElmRef = useRef(null);  // audioAnalyzer function analyzes the audio and sets the analyzerData state  const audioAnalyzer = () => {    // create a new AudioContext    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();    // create an analyzer node with a buffer size of 2048    const analyzer = audioCtx.createAnalyser();    analyzer.fftSize = 2048;    const bufferLength = analyzer.frequencyBinCount;    const dataArray = new Uint8Array(bufferLength);    const source = audioCtx.createMediaElementSource(audioElmRef.current);    source.connect(analyzer);    source.connect(audioCtx.destination);    source.onended = () => {      source.disconnect();    };    // set the analyzerData state with the analyzer, bufferLength, and dataArray    setAnalyzerData({ analyzer, bufferLength, dataArray });  };  // onFileChange function handles the file input and triggers the audio analysis  const onFileChange = (e) => {    const file = e.target.files?.[0];    if (!file) return;    setAudioUrl(URL.createObjectURL(file));    audioAnalyzer();  };  return (    <div className="App">      <h1>Audio Visualizer</h1>      {analyzerData && <WaveForm analyzerData={analyzerData} />}      <div        style={{          height: 80,          display: "flex",          justifyContent: "space-around",          alignItems: "center"        }}      >        <input type="file" accept="audio/*" onChange={onFileChange} />        <audio src={audioUrl ?? ""} controls ref={audioElmRef} />      </div>    </div>  );}

// useSize.jsimport { useCallback, useEffect, useState } from 'react';// custom hook to get the width and height of the browser windowconst useSize = () => {  // initialize width and height to 0  const [width, setWidth] = useState(0);  const [height, setHeight] = useState(0);  // setSizes callback function to update width and height with current window dimensions  const setSizes = useCallback(() => {    setWidth(window.innerWidth);    setHeight(window.innerHeight);  }, [setWidth, setHeight]);  // add event listener for window resize and call setSizes  useEffect(() => {    window.addEventListener('resize', setSizes);    setSizes();    return () => window.removeEventListener('resize', setSizes);  }, [setSizes]);  // return width and height  return [width, height];};export default useSize;

// This function takes in the audio data, analyzes it, and generates a waveform// that is visualized on a canvas element.function animateBars(analyser, canvas, canvasCtx, dataArray, bufferLength) {  // Analyze the audio data using the Web Audio API's `getByteFrequencyData` method.  analyser.getByteFrequencyData(dataArray);  // Set the canvas fill style to black.  canvasCtx.fillStyle = '#000';  // Calculate the height of the canvas.  const HEIGHT = canvas.height / 2;  // Calculate the width of each bar in the waveform based on the canvas width and the buffer length.  var barWidth = Math.ceil(canvas.width / bufferLength) * 2.5;  // Initialize variables for the bar height and x-position.  let barHeight;  let x = 0;  // Loop through each element in the `dataArray`.  for (var i = 0; i < bufferLength; i++) {    // Calculate the height of the current bar based on the audio data and the canvas height.    barHeight = (dataArray[i] / 255) * HEIGHT;    // Generate random RGB values for each bar.    const maximum = 10;    const minimum = -10;    var r = 242 + Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;    var g = 104 + Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;    var b = 65 + Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;    // Set the canvas fill style to the random RGB values.    canvasCtx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';    // Draw the bar on the canvas at the current x-position and with the calculated height and width.    canvasCtx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);    // Update the x-position for the next bar.    x += barWidth + 1;  }}

// WaveForm.jsximport { useRef, useEffect } from "react";// Function to animate the barsfunction animateBars(analyser, canvas, canvasCtx, dataArray, bufferLength) {  // ...}// Component to render the waveformconst WaveForm = ({ analyzerData }) => {  // Ref for the canvas element  const canvasRef = useRef(null);  const { dataArray, analyzer, bufferLength } = analyzerData;  // Function to draw the waveform  const draw = (dataArray, analyzer, bufferLength) => {    const canvas = canvasRef.current;    if (!canvas || !analyzer) return;    const canvasCtx = canvas.getContext("2d");    const animate = () => {      requestAnimationFrame(animate);      canvas.width = canvas.width;      animateBars(analyzer, canvas, canvasCtx, dataArray, bufferLength);    };    animate();  };  // Effect to draw the waveform on mount and update  useEffect(() => {    draw(dataArray, analyzer, bufferLength);  }, [dataArray, analyzer, bufferLength]);  // Return the canvas element  return (    <canvas      style={{        position: "absolute",        top: "0",        left: "0",        zIndex: "-10"      }}      ref={canvasRef}      width={window.innerWidth}      height={window.innerHeight}    />  );};export default WaveForm;