react-audio-visualizers
Version:
<h1 align="center">React Audio Visualizers</h1>
74 lines (73 loc) • 5.08 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SpectrumVisualizer = exports.SpectrumVisualizerTheme = exports.MIN_BAR_HEIGHT = exports.REFERENCE_SPECTRUM_WIDTH = exports.MAX_DECIBEL = exports.MIN_DECIBEL = exports.DEFAULT_STARTING_ANGLE = exports.DEFAULT_NUM_BARS = exports.DEFAULT_MARGIN_HEIGHT_BOTTOM = exports.DEFAULT_MARGIN_HEIGHT_TOP = exports.DEFAULT_MARGIN_WIDTH = exports.DEFAULT_COLOR = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_audio_visualizers_core_1 = require("react-audio-visualizers-core");
var LineSpectrumVisualizer_1 = require("./LineSpectrumVisualizer");
var RadialLineSpectrumVisualizer_1 = require("./RadialLineSpectrumVisualizer");
var RadialSquaredBarsSpectrumVisualizer_1 = require("./RadialSquaredBarsSpectrumVisualizer");
var RoundBarsSpectrumVisualizer_1 = require("./RoundBarsSpectrumVisualizer");
var SquaredBarsSpectrumVisualizer_1 = require("./SquaredBarsSpectrumVisualizer");
exports.DEFAULT_COLOR = 'white';
exports.DEFAULT_MARGIN_WIDTH = 15;
exports.DEFAULT_MARGIN_HEIGHT_TOP = 10;
exports.DEFAULT_MARGIN_HEIGHT_BOTTOM = 5;
exports.DEFAULT_NUM_BARS = 64;
exports.DEFAULT_STARTING_ANGLE = Math.PI;
exports.MIN_DECIBEL = 0;
exports.MAX_DECIBEL = 255;
// in world units
exports.REFERENCE_SPECTRUM_WIDTH = 1280;
exports.MIN_BAR_HEIGHT = 10;
var SpectrumVisualizerTheme;
(function (SpectrumVisualizerTheme) {
SpectrumVisualizerTheme["roundBars"] = "ROUND_BARS";
SpectrumVisualizerTheme["squaredBars"] = "SQUARED_BARS";
SpectrumVisualizerTheme["line"] = "LINE";
SpectrumVisualizerTheme["radialSquaredBars"] = "RADIAL_SQUARED_BARS";
SpectrumVisualizerTheme["radialLine"] = "RADIAL_LINE";
})(SpectrumVisualizerTheme = exports.SpectrumVisualizerTheme || (exports.SpectrumVisualizerTheme = {}));
var SpectrumVisualizerThemeComponent = function (_a) {
var theme = _a.theme, lowFrequency = _a.lowFrequency, highFrequency = _a.highFrequency, numBars = _a.numBars, radius = _a.radius, barWidth = _a.barWidth, startingAngle = _a.startingAngle, mirror = _a.mirror, _b = _a.colors, colors = _b === void 0 ? [exports.DEFAULT_COLOR] : _b;
switch (theme) {
case SpectrumVisualizerTheme.roundBars:
return (0, jsx_runtime_1.jsx)(RoundBarsSpectrumVisualizer_1.RoundBarsSpectrumVisualizer, { numBars: numBars, lowFrequency: lowFrequency, highFrequency: highFrequency, color: colors[0] }, void 0);
case SpectrumVisualizerTheme.squaredBars:
return (0, jsx_runtime_1.jsx)(SquaredBarsSpectrumVisualizer_1.SquaredBarsSpectrumVisualizer, { numBars: numBars, lowFrequency: lowFrequency, highFrequency: highFrequency, colors: colors }, void 0);
case SpectrumVisualizerTheme.line:
return (0, jsx_runtime_1.jsx)(LineSpectrumVisualizer_1.LineSpectrumVisualizer, { numBars: numBars, lowFrequency: lowFrequency, highFrequency: highFrequency, color: colors[0] }, void 0);
case SpectrumVisualizerTheme.radialSquaredBars:
return (0, jsx_runtime_1.jsx)(RadialSquaredBarsSpectrumVisualizer_1.RadialSquaredBarsSpectrumVisualizer, { numBars: numBars, lowFrequency: lowFrequency, highFrequency: highFrequency, colors: colors, radius: radius, barWidth: barWidth, startingAngle: startingAngle, mirror: mirror }, void 0);
case SpectrumVisualizerTheme.radialLine:
return (0, jsx_runtime_1.jsx)(RadialLineSpectrumVisualizer_1.RadialLineSpectrumVisualizer, { numBars: numBars, lowFrequency: lowFrequency, highFrequency: highFrequency, color: colors[0], radius: radius, startingAngle: startingAngle, mirror: mirror }, void 0);
default:
return null;
}
};
var SpectrumVisualizer = function (props) {
var theme = props.theme, lowFrequency = props.lowFrequency, highFrequency = props.highFrequency, audioVisualizerCommonProps = __rest(props, ["theme", "lowFrequency", "highFrequency"]);
return ((0, jsx_runtime_1.jsx)(react_audio_visualizers_core_1.AudioVisualizer, __assign({ canvasProps: { orthographic: true } }, audioVisualizerCommonProps, { children: (0, jsx_runtime_1.jsx)(SpectrumVisualizerThemeComponent, __assign({}, props), void 0) }), void 0));
};
exports.SpectrumVisualizer = SpectrumVisualizer;