react-audio-visualizers/dist/WaveformVisualizer/LineWaveformVisualizer.js

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LineWaveformVisualizer = 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 WaveformVisualizer_1 = require("./WaveformVisualizer");
var clock = new three_1.Clock();
var LineWaveformVisualizer = function (_a) {
    var color = _a.color, pointSpacing = _a.pointSpacing, refreshRate = _a.refreshRate;
    var _b = (0, react_audio_visualizers_core_1.useAudioVisualizerContext)(), audioContext = _b.audioContext, analyser = _b.analyser, status = _b.status;
    var _c = (0, fiber_1.useThree)().viewport, viewportWidth = _c.width, viewportHeight = _c.height;
    var halfVisualizerWidth = viewportWidth / 2;
    var halfVisualizerHeight = viewportHeight / 2;
    var nPoints = Math.round(viewportWidth / pointSpacing) + 1;
    var dataArray = new Uint8Array(analyser ? analyser.frequencyBinCount : 0);
    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 = halfVisualizerWidth - pointSpacing * i;
            var y = -halfVisualizerHeight + WaveformVisualizer_1.DEFAULT_MARGIN_HEIGHT_BOTTOM;
            return new three_1.Vector2(x, y);
        }));
    }, [nPoints, pointSpacing, halfVisualizerWidth, halfVisualizerHeight]);
    (0, fiber_1.useFrame)(function () {
        if (analyser
            && audioContext
            && status === react_audio_visualizers_core_1.AudioVisualizerStatus.playing
            && clock.getElapsedTime() > refreshRate
            && ref.current) {
            analyser.getByteTimeDomainData(dataArray);
            var height = react_audio_visualizers_core_1.AudioVisualizerUtils.map(Math.max.apply(Math, Array.from(dataArray)), WaveformVisualizer_1.MIN_DECIBEL, WaveformVisualizer_1.MAX_DECIBEL, -halfVisualizerHeight + WaveformVisualizer_1.DEFAULT_MARGIN_HEIGHT_BOTTOM, halfVisualizerHeight - WaveformVisualizer_1.DEFAULT_MARGIN_HEIGHT_TOP);
            for (var i = nPoints - 1; i >= 0; i--) {
                if (i === 0) {
                    ref.current.attributes.position.setY(i, height);
                }
                else {
                    ref.current.attributes.position.setY(i, ref.current.attributes.position.getY(i - 1));
                }
                ref.current.attributes.position.needsUpdate = true;
            }
            clock.start();
        }
    });
    return line;
};
exports.LineWaveformVisualizer = LineWaveformVisualizer;