@lobehub/tts/es/react/hooks/useBlobUrl.mjs

A high-quality & reliable TTS React Hooks library

import { arrayBufferConvert } from "../../core/utils/arrayBufferConvert.mjs";
import { audioBufferToBlob } from "../../core/utils/audioBufferToBlob.mjs";
import { playAudioBlob } from "../../core/utils/playAudioBlob.mjs";
import { useState } from "react";
import useSWR from "swr";

//#region src/react/hooks/useBlobUrl.ts
const useBlobUrl = (src) => {
	const [audio, setAudio] = useState();
	const [url, setUrl] = useState();
	const [blob, setBlob] = useState();
	const [isGlobalLoading, setIsGlobalLoading] = useState(true);
	const { isLoading } = useSWR(src, async () => {
		const data = await fetch(src);
		if (!data) return;
		return await arrayBufferConvert(await data.arrayBuffer());
	}, { onSuccess: async (data) => {
		if (!data) return;
		const blob = await audioBufferToBlob(data);
		if (!blob || blob.size === 0) return;
		if (audio) audio.remove();
		if (url) URL.revokeObjectURL(url);
		setBlob(blob);
		try {
			const newAudio = playAudioBlob(blob);
			setUrl(newAudio.url);
			setAudio(newAudio.audio);
		} catch {}
		setIsGlobalLoading(false);
	} });
	return {
		audio,
		blob,
		isLoading: isGlobalLoading || isLoading,
		url
	};
};

//#endregion
export { useBlobUrl };