react-audio-visualizers
Version:
<h1 align="center">React Audio Visualizers</h1>
51 lines (50 loc) • 3.81 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RadialLineSpectrumVisualizer = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var fiber_1 = require("@react-three/fiber");
var three_1 = require("three");
var react_audio_visualizers_core_1 = require("react-audio-visualizers-core");
var SpectrumVisualizer_1 = require("./SpectrumVisualizer");
var DEFAULT_NUM_BARS = 75;
var RadialLineSpectrumVisualizer = function (_a) {
var _b = _a.numBars, numBars = _b === void 0 ? DEFAULT_NUM_BARS : _b, radius = _a.radius, _c = _a.startingAngle, startingAngle = _c === void 0 ? SpectrumVisualizer_1.DEFAULT_STARTING_ANGLE : _c, color = _a.color, lowFrequency = _a.lowFrequency, highFrequency = _a.highFrequency, mirror = _a.mirror;
var _d = (0, react_audio_visualizers_core_1.useAudioVisualizerContext)(), audioContext = _d.audioContext, analyser = _d.analyser;
var _e = (0, fiber_1.useThree)().viewport, viewportWidth = _e.width, viewportHeight = _e.height;
var halfBars = Math.round(numBars / 2);
var dataArray = new Uint8Array(analyser ? analyser.frequencyBinCount : 0);
var angleInterval = 2 * Math.PI / numBars;
var r = radius || Math.sqrt(Math.pow(viewportWidth, 2) + Math.pow(viewportHeight, 2)) / 8;
var interval = react_audio_visualizers_core_1.AudioVisualizerUtils.getFrequencyInterval(lowFrequency, highFrequency, mirror ? halfBars : numBars, dataArray, audioContext === null || audioContext === void 0 ? void 0 : audioContext.sampleRate);
var smallerAxis = viewportWidth < viewportHeight ? viewportWidth : viewportHeight;
var maxBarHeight = smallerAxis - (smallerAxis / 2 + r);
var maxIndex = mirror ? halfBars : Infinity;
var ref = (0, react_1.useRef)();
var line = (0, react_1.useMemo)(function () { return ((0, jsx_runtime_1.jsxs)("lineLoop", { children: [(0, jsx_runtime_1.jsx)("bufferGeometry", { ref: ref }, void 0), (0, jsx_runtime_1.jsx)("lineBasicMaterial", { color: color }, void 0)] }, void 0)); }, [ref, color]);
var positions = (0, react_1.useMemo)(function () { return (Array.from(Array(numBars), function (_, i) {
var angle = i * angleInterval + startingAngle;
var x = r * Math.cos(angle);
var y = r * Math.sin(angle);
return { x: x, y: y, angle: angle };
})); }, [numBars, startingAngle, angleInterval, r]);
(0, react_1.useEffect)(function () {
var _a;
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.setFromPoints(Array.from(Array(numBars), function (_, i) { return new three_1.Vector2(positions[i].x, positions[i].y); }));
}, [numBars, positions]);
(0, fiber_1.useFrame)(function () {
if (analyser && audioContext && ref.current) {
analyser.getByteFrequencyData(dataArray);
var filteredData = react_audio_visualizers_core_1.AudioVisualizerUtils.filterFrequencies(lowFrequency, highFrequency, dataArray, audioContext.sampleRate);
for (var i = 0; i < numBars; i++) {
var height = react_audio_visualizers_core_1.AudioVisualizerUtils.map(filteredData[i % maxIndex * interval], SpectrumVisualizer_1.MIN_DECIBEL, SpectrumVisualizer_1.MAX_DECIBEL, SpectrumVisualizer_1.MIN_BAR_HEIGHT, maxBarHeight - SpectrumVisualizer_1.DEFAULT_MARGIN_HEIGHT_TOP) || SpectrumVisualizer_1.MIN_BAR_HEIGHT;
var _a = positions[i], angle = _a.angle, x = _a.x, y = _a.y;
ref.current.attributes.position.setX(i, height * Math.cos(angle) + x);
ref.current.attributes.position.setY(i, height * Math.sin(angle) + y);
ref.current.attributes.position.needsUpdate = true;
}
}
});
return line;
};
exports.RadialLineSpectrumVisualizer = RadialLineSpectrumVisualizer;