File size: 3,920 Bytes
1e8f4c6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
import React, { useRef, useEffect, useState, useCallback } from "react";
import { Box } from "@mui/material";
export function MicroIntensity({ numBars = 8 }) {
const [audioContext, setAudioContext] = useState(null);
const [analyser, setAnalyser] = useState(null);
const [intensities, setIntensities] = useState(new Array(numBars).fill(0));
const canvasRef = useRef(null);
const animationRef = useRef(null);
useEffect(() => {
const initAudio = async () => {
const context = new (window.AudioContext || window.webkitAudioContext)();
const analyserNode = context.createAnalyser();
analyserNode.fftSize = 256;
try {
const stream = await navigator.mediaDevices.getUserMedia({
audio: true,
});
const source = context.createMediaStreamSource(stream);
source.connect(analyserNode);
setAudioContext(context);
setAnalyser(analyserNode);
} catch (error) {
console.error("Error accessing the microphone:", error);
}
};
initAudio();
return () => {
if (audioContext) {
audioContext.close();
}
if (animationRef.current) {
cancelAnimationFrame(animationRef.current);
}
};
}, []);
const drawCanvas = useCallback((intensities) => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext("2d");
const width = canvas.width;
const height = canvas.height;
// Clear canvas
ctx.clearRect(0, 0, width, height);
// Draw red circle
ctx.beginPath();
ctx.arc(5, height / 2, 5, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
// Draw intensity bars
const barWidth = 3;
const barSpacing = 1;
const startX = 15; // Start after the red circle
const minBarHeight = 2;
const maxBarHeight = height - 5; // Max height minus some padding
intensities.forEach((intensity, index) => {
const barHeight = Math.max(minBarHeight, intensity * maxBarHeight);
const x = startX + index * (barWidth + barSpacing);
const y = (height - barHeight) / 2;
ctx.fillStyle = "white";
ctx.fillRect(x, y, barWidth, barHeight);
});
}, []);
useEffect(() => {
if (!analyser) return;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
const updateIntensities = () => {
analyser.getByteFrequencyData(dataArray);
let newIntensities = Array.from({ length: numBars }, (_, i) => {
const start = Math.floor((i / numBars) * bufferLength);
const end = Math.floor(((i + 1) / numBars) * bufferLength);
const average =
dataArray.slice(start, end).reduce((sum, value) => sum + value, 0) /
(end - start);
return average / 255;
});
// Sort intensities from highest to lowest
newIntensities.sort((a, b) => b - a);
// Reorder intensities to put highest in the middle and alternate others
const reorderedIntensities = new Array(numBars);
let left = Math.floor(numBars / 2) - 1;
let right = Math.floor(numBars / 2);
newIntensities.forEach((intensity, index) => {
if (index % 2 === 0) {
reorderedIntensities[right] = intensity;
right++;
} else {
reorderedIntensities[left] = intensity;
left--;
}
});
setIntensities(reorderedIntensities);
drawCanvas(reorderedIntensities);
animationRef.current = requestAnimationFrame(updateIntensities);
};
updateIntensities();
return () => {
if (animationRef.current) {
cancelAnimationFrame(animationRef.current);
}
};
}, [analyser, numBars, drawCanvas]);
return (
<Box sx={{ width: 50, height: 40, display: "flex", alignItems: "center" }}>
<canvas ref={canvasRef} width={50} height={40} />
</Box>
);
}
|