react-hifi
Version:
A set of react components wich provides simple abstraption to manipulate HTML5 AudioContext API (Equalizer, visualisation, stereo, basic controls)
72 lines • 3.58 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var plugin_factory_1 = require("../_lib/plugin-factory");
var type_1 = require("../_lib/type");
var AnalyserByFrequencyPlugin = /** @class */ (function () {
function AnalyserByFrequencyPlugin() {
this.createNode = this.createNode.bind(this);
this.updateNode = this.updateNode.bind(this);
this.handleVisualizationChange = this.handleVisualizationChange.bind(this);
}
AnalyserByFrequencyPlugin.prototype.formatDataVizByFrequency = function (data, frequencies) {
var values = [];
var HERTZ_ITER = 23.4;
var currentIndex = 0;
for (var i = 0; i <= frequencies[frequencies.length - 1] + HERTZ_ITER; i = i + HERTZ_ITER) {
var freq = frequencies[currentIndex];
if (i > freq && i < freq + HERTZ_ITER) {
currentIndex++;
values.push(data[Math.round(i / HERTZ_ITER)]);
}
}
return values;
};
AnalyserByFrequencyPlugin.prototype.handleVisualizationChange = function () {
this.animationFrame = requestAnimationFrame(this.handleVisualizationChange);
this.node.getByteFrequencyData(this.frequencyData);
this.onVisualisationData(this.formatDataVizByFrequency(this.frequencyData, this.frequencies));
};
AnalyserByFrequencyPlugin.prototype.shouldNotUpdate = function (prevProps, nextProps) {
return !!nextProps.audioContext && nextProps.audioContext.state !== type_1.ContextState.RUNNING;
};
AnalyserByFrequencyPlugin.prototype.createNode = function (audioContext, props) {
this.node = audioContext.createAnalyser();
this.onVisualisationData = props.onVisualisationData;
this.frequencies = props.frequencies;
this.node.fftSize = 32768;
this.frequencyData = new Uint8Array(this.node.frequencyBinCount);
return this.node;
};
AnalyserByFrequencyPlugin.prototype.updateNode = function (node, props, audioContext) {
if (!this.onVisualisationData && props.onVisualisationData) {
this.onVisualisationData = props.onVisualisationData;
this.handleVisualizationChange();
return;
}
else if (this.onVisualisationData && !props.onVisualisationData) {
this.onVisualisationData(props.frequencies.map(function () { return 0; }));
this.onVisualisationData = props.onVisualisationData;
this.animationFrame && cancelAnimationFrame(this.animationFrame);
return;
}
if (this.previousContextState !== audioContext.state) {
this.previousContextState = audioContext.state;
switch (audioContext.state) {
case type_1.ContextState.SUSPENDED:
this.animationFrame && cancelAnimationFrame(this.animationFrame);
break;
case type_1.ContextState.CLOSED:
this.animationFrame && cancelAnimationFrame(this.animationFrame);
this.onVisualisationData(props.frequencies.map(function () { return 0; }));
break;
case type_1.ContextState.RUNNING:
this.onVisualisationData && this.handleVisualizationChange();
break;
}
}
};
return AnalyserByFrequencyPlugin;
}());
exports.AnalyserByFrequencyPlugin = AnalyserByFrequencyPlugin;
exports.default = plugin_factory_1.pluginFactory(new AnalyserByFrequencyPlugin());
//# sourceMappingURL=index.js.map