fix: fix SSR no window error.

This commit is contained in:
lushevol 2023-03-30 17:02:19 +08:00
parent 5b492f587e
commit 00aaba2429

View File

@ -1,25 +1,31 @@
// implement a voice component by speech synthesis to read the text with the voice of the user's choice // implement a voice component by speech synthesis to read the text with the voice of the user's choice
import * as React from "react"; import * as React from "react";
import { useState } from "react"; import { useEffect, useState } from "react";
import { IconButton } from "./button"; import { IconButton } from "./button";
import VoiceIcon from "../icons/voice.svg"; import VoiceIcon from "../icons/voice.svg";
const voices = window.speechSynthesis.getVoices();
const speak = ({ const speak = ({
text, text,
voice, voice,
}: { }: {
text: string; text: string;
voice?: SpeechSynthesisVoice; voice: SpeechSynthesisVoice;
}) => { }) => {
if (!text) return; if (!window || !text) return;
const utterance = new SpeechSynthesisUtterance(text); const utterance = new SpeechSynthesisUtterance(text);
utterance.voice = voice || voices[0]; utterance.voice = voice;
window.speechSynthesis.speak(utterance); window.speechSynthesis.speak(utterance);
}; };
export function Voice(props: { text: string }) { export function Voice(props: { text: string }) {
const [voices, setVoices] = useState<SpeechSynthesisVoice[]>([]);
const [voice, setVoice] = useState<SpeechSynthesisVoice | null>(null); const [voice, setVoice] = useState<SpeechSynthesisVoice | null>(null);
useEffect(() => {
const voices = window.speechSynthesis.getVoices();
setVoices(voices);
setVoice(voices[0]);
}, []);
return props.text ? ( return props.text ? (
<div> <div>
<IconButton <IconButton