@lobehub/tts
Version:
A high-quality & reliable TTS React Hooks library
84 lines • 5.53 kB
JavaScript
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import { throttle } from 'lodash-es';
import { useCallback, useEffect, useRef, useState } from 'react';
export var useAudioVisualizer = function useAudioVisualizer(audioRef, _ref) {
var _audioRef$current;
var _ref$count = _ref.count,
count = _ref$count === void 0 ? 5 : _ref$count;
var barsSet = Array.from({
length: (count + 1) / 2
}).fill(0);
var _useState = useState([0, 0, 0, 0]),
_useState2 = _slicedToArray(_useState, 2),
bars = _useState2[0],
setBars = _useState2[1];
var audioContextRef = useRef(null);
var analyserRef = useRef(null);
var dataArrayRef = useRef(null);
var animationFrameIdRef = useRef(null);
var audioSourceRef = useRef(null);
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
init = _useState4[0],
setInit = _useState4[1];
var renderFrame = throttle(function () {
animationFrameIdRef.current = requestAnimationFrame(renderFrame);
if (analyserRef.current && dataArrayRef.current) {
analyserRef.current.getByteFrequencyData(dataArrayRef.current);
var step = Math.floor(dataArrayRef.current.length / barsSet.length);
var newBars = barsSet.map(function (_, i) {
var _dataArrayRef$current;
return ((_dataArrayRef$current = dataArrayRef.current) === null || _dataArrayRef$current === void 0 ? void 0 : _dataArrayRef$current[i * step]) || 0;
});
setBars(newBars);
}
}, 50);
var resetRenderFrame = useCallback(function () {
if (animationFrameIdRef.current) {
cancelAnimationFrame(animationFrameIdRef.current);
}
setBars(barsSet);
}, []);
useEffect(function () {
if (!audioRef.current || !audioRef.current.currentSrc) return;
try {
audioContextRef.current = new AudioContext();
analyserRef.current = audioContextRef.current.createAnalyser();
analyserRef.current.fftSize = 256;
var bufferLength = analyserRef.current.frequencyBinCount;
dataArrayRef.current = new Uint8Array(bufferLength);
audioSourceRef.current = audioContextRef.current.createMediaElementSource(audioRef.current);
audioSourceRef.current.connect(analyserRef.current);
analyserRef.current.connect(audioContextRef.current.destination);
} catch (error) {
console.error('Error useAudioVisualizer:', error);
}
setInit(true);
return function () {
var _audioSourceRef$curre, _analyserRef$current, _audioContextRef$curr;
(_audioSourceRef$curre = audioSourceRef.current) === null || _audioSourceRef$curre === void 0 || _audioSourceRef$curre.disconnect();
(_analyserRef$current = analyserRef.current) === null || _analyserRef$current === void 0 || _analyserRef$current.disconnect();
(_audioContextRef$curr = audioContextRef.current) === null || _audioContextRef$curr === void 0 || _audioContextRef$curr.close();
setInit(false);
};
}, [audioRef === null || audioRef === void 0 || (_audioRef$current = audioRef.current) === null || _audioRef$current === void 0 ? void 0 : _audioRef$current.currentSrc]);
useEffect(function () {
if (!init) return;
resetRenderFrame();
renderFrame();
return function () {
resetRenderFrame();
};
}, [init]);
var reverseBars = _toConsumableArray(bars).slice(1, bars.length).reverse();
return [].concat(_toConsumableArray(reverseBars), _toConsumableArray(bars));
};