fix: dict audio
This commit is contained in:
@@ -105,7 +105,9 @@ export const apiBaiduSuggest = async (text) => {
|
|||||||
*/
|
*/
|
||||||
export const apiBaiduTTS = (text, lan = "uk", spd = 3) => {
|
export const apiBaiduTTS = (text, lan = "uk", spd = 3) => {
|
||||||
const url = `${URL_BAIDU_TTS}?${queryString.stringify({ lan, text, spd })}`;
|
const url = `${URL_BAIDU_TTS}?${queryString.stringify({ lan, text, spd })}`;
|
||||||
return fetchPolyfill(url);
|
return fetchPolyfill(url, {
|
||||||
|
useCache: false, // 为避免缓存过快增长,禁用缓存语音数据
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { useCallback, useEffect, useRef, useState } from "react";
|
import { useCallback, useEffect, useRef, useState } from "react";
|
||||||
import { apiBaiduTTS } from "../apis";
|
import { apiBaiduTTS } from "../apis";
|
||||||
|
import { kissLog } from "../libs/log";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 声音播放hook
|
* 声音播放hook
|
||||||
@@ -7,13 +8,12 @@ import { apiBaiduTTS } from "../apis";
|
|||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
export function useAudio(src) {
|
export function useAudio(src) {
|
||||||
// const audioRef = useRef(new Audio(src));
|
|
||||||
const audioRef = useRef(null);
|
const audioRef = useRef(null);
|
||||||
const [error, setError] = useState(null);
|
const [error, setError] = useState(null);
|
||||||
const [ready, setReady] = useState(false);
|
const [ready, setReady] = useState(false);
|
||||||
const [playing, setPlaying] = useState(false);
|
const [playing, setPlaying] = useState(false);
|
||||||
|
|
||||||
const play = useCallback(() => {
|
const onPlay = useCallback(() => {
|
||||||
audioRef.current?.play();
|
audioRef.current?.play();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
@@ -33,17 +33,27 @@ export function useAudio(src) {
|
|||||||
error,
|
error,
|
||||||
ready,
|
ready,
|
||||||
playing,
|
playing,
|
||||||
play,
|
onPlay,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取语音hook
|
||||||
|
* @param {*} text
|
||||||
|
* @param {*} lan
|
||||||
|
* @param {*} spd
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
export function useTextAudio(text, lan = "uk", spd = 3) {
|
export function useTextAudio(text, lan = "uk", spd = 3) {
|
||||||
const [src, setSrc] = useState("");
|
const [src, setSrc] = useState("");
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
(async () => {
|
(async () => {
|
||||||
const res = await apiBaiduTTS(text, lan, spd);
|
try {
|
||||||
setSrc(res);
|
setSrc(await apiBaiduTTS(text, lan, spd));
|
||||||
|
} catch (err) {
|
||||||
|
kissLog(err, "baidu tts");
|
||||||
|
}
|
||||||
})();
|
})();
|
||||||
}, [text, lan, spd]);
|
}, [text, lan, spd]);
|
||||||
|
|
||||||
|
|||||||
@@ -3,13 +3,9 @@ import VolumeUpIcon from "@mui/icons-material/VolumeUp";
|
|||||||
import { useTextAudio } from "../../hooks/Audio";
|
import { useTextAudio } from "../../hooks/Audio";
|
||||||
|
|
||||||
export default function AudioBtn({ text, lan = "uk" }) {
|
export default function AudioBtn({ text, lan = "uk" }) {
|
||||||
const { error, ready, playing, play } = useTextAudio(text, lan);
|
const { error, ready, playing, onPlay } = useTextAudio(text, lan);
|
||||||
|
|
||||||
if (error) {
|
if (error || !ready) {
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!ready) {
|
|
||||||
return (
|
return (
|
||||||
<IconButton disabled>
|
<IconButton disabled>
|
||||||
<VolumeUpIcon />
|
<VolumeUpIcon />
|
||||||
@@ -26,11 +22,7 @@ export default function AudioBtn({ text, lan = "uk" }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<IconButton
|
<IconButton onClick={onPlay}>
|
||||||
onClick={() => {
|
|
||||||
play();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<VolumeUpIcon />
|
<VolumeUpIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user