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

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LineSpectrumVisualizer = 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 LineSpectrumVisualizer = function (_a) {
    var numBars = _a.numBars, color = _a.color, lowFrequency = _a.lowFrequency, highFrequency = _a.highFrequency;
    var _b = (0, react_audio_visualizers_core_1.useAudioVisualizerContext)(), audioContext = _b.audioContext, analyser = _b.analyser;
    var _c = (0, fiber_1.useThree)().viewport, viewportWidth = _c.width, viewportHeight = _c.height;
    var spectrumWidth = viewportWidth - SpectrumVisualizer_1.DEFAULT_MARGIN_WIDTH;
    var halfSpectrumWidth = spectrumWidth / 2;
    var halfSpectrumHeight = viewportHeight / 2;
    var nPoints = numBars || Math.round(viewportWidth * SpectrumVisualizer_1.DEFAULT_NUM_BARS / SpectrumVisualizer_1.REFERENCE_SPECTRUM_WIDTH);
    var spacing = spectrumWidth / nPoints;
    var dataArray = new Uint8Array(analyser ? analyser.frequencyBinCount : 0);
    var interval = react_audio_visualizers_core_1.AudioVisualizerUtils.getFrequencyInterval(lowFrequency, highFrequency, nPoints, dataArray, audioContext === null || audioContext === void 0 ? void 0 : audioContext.sampleRate);
    var ref = (0, react_1.useRef)();
    var line = (0, react_1.useMemo)(function () { return ((0, jsx_runtime_1.jsxs)("line", { 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]);
    (0, react_1.useEffect)(function () {
        var _a;
        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.setFromPoints(Array.from(Array(nPoints), function (_, i) {
            var x = spacing * i - halfSpectrumWidth;
            var y = -halfSpectrumHeight + SpectrumVisualizer_1.DEFAULT_MARGIN_HEIGHT_BOTTOM;
            return new three_1.Vector2(x, y);
        }));
    }, [nPoints, spacing, halfSpectrumWidth, halfSpectrumHeight]);
    (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 < nPoints; i++) {
                var height = react_audio_visualizers_core_1.AudioVisualizerUtils.map(filteredData[i * interval], SpectrumVisualizer_1.MIN_DECIBEL, SpectrumVisualizer_1.MAX_DECIBEL, SpectrumVisualizer_1.MIN_BAR_HEIGHT, viewportHeight - SpectrumVisualizer_1.DEFAULT_MARGIN_HEIGHT_TOP) || SpectrumVisualizer_1.MIN_BAR_HEIGHT;
                ref.current.attributes.position.setY(i, height - halfSpectrumHeight);
                ref.current.attributes.position.needsUpdate = true;
            }
        }
    });
    return line;
};
exports.LineSpectrumVisualizer = LineSpectrumVisualizer;