Easy vuMeter

[Aubert-Antoine]

<canvas id="vuMeter"></canvas>
<script>
  var canvas = document.getElementById("vuMeter");
  var ctx = canvas.getContext("2d");

  // Set the dimensions of the canvas
  canvas.width = 200;
  canvas.height = 100;

  // Draw the VU meter bar
  function drawVUMeter(level) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, level, canvas.height);
  }

  // Example usage
  drawVUMeter(50); // Draws a VU meter bar at 50% level
</script>

[Aubert-Antoine]

import React, { useState, useEffect } from 'react';

const VUMeter = () => {
  const [level, setLevel] = useState(0);

  useEffect(() => {
    const updateLevel = () => {
      // Get the current level from your JavaScript script
      const currentLevel = /* Your code here */;
      setLevel(currentLevel);
    };

    // Call updateLevel for the first time to initialize the VU meter
    updateLevel();

    // Set an interval to update the level every 100 milliseconds
    const intervalId = setInterval(updateLevel, 100);

    // Clean up the interval when the component unmounts
    return () => clearInterval(intervalId);
  }, []);

  return (
    <canvas className="h-16 w-full" height="16" width="100">
      <rect
        x={0}
        y={0}
        width={level * 100}
        height={16}
        className="fill-current bg-red-500"
      />
    </canvas>
  );
};

export default VUMeter;