react-audio-visualizers/dist/SpectrumVisualizer/RadialSquaredBarsSpectrumVisualizer.js

<h1 align="center">React Audio Visualizers</h1>

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RadialSquaredBarsSpectrumVisualizer = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var fiber_1 = require("@react-three/fiber");
var react_audio_visualizers_core_1 = require("react-audio-visualizers-core");
var SpectrumVisualizer_1 = require("./SpectrumVisualizer");
var SquaredBar_1 = require("../shared/components/SquaredBar");
var DEFAULT_BAR_WIDTH = 14;
var DEFAULT_NUM_BARS = 75;
var RadialSquaredBarsSpectrumVisualizer = function (_a) {
    var _b = _a.numBars, numBars = _b === void 0 ? DEFAULT_NUM_BARS : _b, radius = _a.radius, customBarWidth = _a.barWidth, _c = _a.startingAngle, startingAngle = _c === void 0 ? SpectrumVisualizer_1.DEFAULT_STARTING_ANGLE : _c, colors = _a.colors, 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 barWidth = customBarWidth || Math.round(viewportWidth * DEFAULT_BAR_WIDTH / SpectrumVisualizer_1.REFERENCE_SPECTRUM_WIDTH);
    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 _f = (0, react_1.useState)([]), bars = _f[0], setBars = _f[1];
    var positions = 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 };
    });
    var ninetyDegrees = (0, react_1.useMemo)(function () { return Math.PI / 2; }, []);
    var smallerAxis = viewportWidth < viewportHeight ? viewportWidth : viewportHeight;
    var maxBarHeight = smallerAxis - (smallerAxis / 2 + r);
    var maxIndex = mirror ? halfBars : Infinity;
    (0, fiber_1.useFrame)(function () {
        if (analyser && audioContext) {
            analyser.getByteFrequencyData(dataArray);
            var bars_1 = [];
            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], x = _a.x, y = _a.y, angle = _a.angle;
                bars_1.push((0, jsx_runtime_1.jsx)(SquaredBar_1.SquaredBar, { height: height, width: barWidth, position: [x, y], rotation: angle - ninetyDegrees, colors: colors }, i));
            }
            setBars(bars_1);
        }
    });
    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: bars }, void 0);
};
exports.RadialSquaredBarsSpectrumVisualizer = RadialSquaredBarsSpectrumVisualizer;