react-audio-visualizers
Version:
<h1 align="center">React Audio Visualizers</h1>
40 lines (39 loc) • 2.83 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RoundBarsSpectrumVisualizer = 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 RoundBar_1 = require("../shared/components/RoundBar");
var DEFAULT_BAR_WIDTH = 12;
var RoundBarsSpectrumVisualizer = 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 nBars = numBars || viewportWidth * SpectrumVisualizer_1.DEFAULT_NUM_BARS / SpectrumVisualizer_1.REFERENCE_SPECTRUM_WIDTH;
var spacing = spectrumWidth / nBars;
var dataArray = new Uint8Array(analyser ? analyser.frequencyBinCount : 0);
var interval = react_audio_visualizers_core_1.AudioVisualizerUtils.getFrequencyInterval(lowFrequency, highFrequency, nBars, dataArray, audioContext === null || audioContext === void 0 ? void 0 : audioContext.sampleRate);
var _d = (0, react_1.useState)([]), bars = _d[0], setBars = _d[1];
(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 < nBars; 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;
var x = spacing * i - halfSpectrumWidth;
var y = -halfSpectrumHeight + SpectrumVisualizer_1.DEFAULT_MARGIN_HEIGHT_BOTTOM;
bars_1.push((0, jsx_runtime_1.jsx)(RoundBar_1.RoundBar, { height: height, width: DEFAULT_BAR_WIDTH, position: [x, y], color: color }, i));
}
setBars(bars_1);
}
});
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: bars }, void 0);
};
exports.RoundBarsSpectrumVisualizer = RoundBarsSpectrumVisualizer;