71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import { FC, useState } from 'react';
|
|
import { MuteIcon, UnmuteIcon } from '@primer/octicons-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { ToolTipButton } from './ToolTipButton';
|
|
import commonStore from '../stores/commonStore';
|
|
import { observer } from 'mobx-react-lite';
|
|
|
|
const synth = window.speechSynthesis;
|
|
|
|
export const ReadButton: FC<{
|
|
content: string,
|
|
inSpeaking?: boolean,
|
|
showDelay?: number,
|
|
setSpeakingOuter?: (speaking: boolean) => void
|
|
}> = observer(({
|
|
content,
|
|
inSpeaking = false,
|
|
showDelay = 0,
|
|
setSpeakingOuter
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const [speaking, setSpeaking] = useState(inSpeaking);
|
|
let lang: string = commonStore.settings.language;
|
|
if (lang === 'dev')
|
|
lang = 'en';
|
|
|
|
const setSpeakingInner = (speaking: boolean) => {
|
|
setSpeakingOuter?.(speaking);
|
|
setSpeaking(speaking);
|
|
};
|
|
|
|
const startSpeak = () => {
|
|
synth.cancel();
|
|
|
|
const utterance = new SpeechSynthesisUtterance(content);
|
|
const voices = synth.getVoices();
|
|
|
|
let voice;
|
|
if (lang === 'en')
|
|
voice = voices.find((v) => v.name.toLowerCase().includes('microsoft aria'));
|
|
else if (lang === 'zh')
|
|
voice = voices.find((v) => v.name.toLowerCase().includes('xiaoyi'));
|
|
else if (lang === 'ja')
|
|
voice = voices.find((v) => v.name.toLowerCase().includes('nanami'));
|
|
if (!voice) voice = voices.find((v) => v.lang.substring(0, 2) === lang);
|
|
if (!voice) voice = voices.find((v) => v.lang === navigator.language);
|
|
|
|
Object.assign(utterance, {
|
|
rate: 1,
|
|
volume: 1,
|
|
onend: () => setSpeakingInner(false),
|
|
onerror: () => setSpeakingInner(false),
|
|
voice: voice
|
|
});
|
|
|
|
synth.speak(utterance);
|
|
setSpeakingInner(true);
|
|
};
|
|
|
|
const stopSpeak = () => {
|
|
synth.cancel();
|
|
setSpeakingInner(false);
|
|
};
|
|
|
|
return (
|
|
<ToolTipButton desc={t('Read Aloud')} size="small" appearance="subtle" showDelay={showDelay}
|
|
icon={speaking ? <MuteIcon /> : <UnmuteIcon />}
|
|
onClick={speaking ? stopSpeak : startSpeak} />
|
|
);
|
|
});
|