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
+}