diff --git a/src/components/AccessibilityPanel/index.tsx b/src/components/AccessibilityPanel/index.tsx index c1a138ce..f81d1387 100644 --- a/src/components/AccessibilityPanel/index.tsx +++ b/src/components/AccessibilityPanel/index.tsx @@ -1,8 +1,14 @@ +import play from "@/play" +import { state as playState, setVoice } from "@/store/play" import { decreaseFontSize, hideImages, increaseFontSize, reset, setBlackOnWhite, setBlueOnBlue, setBrownOnYellow, setDefaultTheme, setGreenOnBrown, setLetterSpacingOne, setLetterSpacingTwo, setLetterSpacingFour, setLineHeightOneAndHalf, setLineHeightTwo, setLineHeightTwoAndHalf, setSerifFont, setSansSerifFont, setWhiteOnBlack, showImages } from "@/store/theme" -import { HiCog, HiOutlineEyeOff } from "react-icons/hi" +import { HiCog, HiOutlineEyeOff, HiPlay } from "react-icons/hi" +import { useSnapshot } from "valtio" import s from "./panel.module.css" +import VoiceSelect from "./voice" function AccessibilityPanel() { + const p = useSnapshot(playState) + return (
@@ -58,7 +64,13 @@ function AccessibilityPanel() { Обычная версия - {/*Прослушать всё*/} + + { + setVoice(event.target.value) + }} />
) diff --git a/src/components/AccessibilityPanel/voice.tsx b/src/components/AccessibilityPanel/voice.tsx new file mode 100644 index 00000000..58eb636d --- /dev/null +++ b/src/components/AccessibilityPanel/voice.tsx @@ -0,0 +1,27 @@ +function useVoices() { + return window.speechSynthesis + .getVoices() + .map(v => { + return { + name: `${v.name} (${v.lang})`, + value: v.name, + } + }) +} + +export type VoiceSelectProps = React.SelectHTMLAttributes + +function VoiceSelect(props: VoiceSelectProps) { + const voices = useVoices() + return ( + + ) +} + +export default VoiceSelect diff --git a/src/play.ts b/src/play.ts new file mode 100644 index 00000000..43b96e40 --- /dev/null +++ b/src/play.ts @@ -0,0 +1,20 @@ +import { state } from "./store/play"; + + +function play() { + const synth = window.speechSynthesis; + + const a = document.querySelector("article") + if (!a || !a.textContent) { + return + } + + const u = new SpeechSynthesisUtterance(a.textContent) + const voice = synth.getVoices().find((v) => v.name === state.voice); + if (voice) { + u.voice = voice + } + synth.speak(u) +} + +export default play diff --git a/src/store/play.ts b/src/store/play.ts new file mode 100644 index 00000000..6cb2d192 --- /dev/null +++ b/src/store/play.ts @@ -0,0 +1,13 @@ +import { proxy } from "valtio" + +type State = { + voice: string +} + +export const state = proxy({ + voice: "Milena", +}) + +export function setVoice(value: string) { + state.voice = value +}