add : sound interval

src/components/Card/Card.jsx

@@ -11,6 +11,7 @@ import { Context } from 'components/App';
 import apiForRegisteredUsers from 'service/apiForRegistered';
 import apiForUnregisteredUsers from 'service/api';
 import './Card.css';
+import SoundInterval from 'components/SoundInterval';
 
 function Card() {
   const { lang } = useContext(Context);
@@ -121,6 +122,11 @@ function Card() {
                 onIndexWord={indexWord}
                 currentLanguage={currentLanguage}
               />
+              <SoundInterval
+                onWord={word}
+                onIndexWord={indexWord}
+                currentLanguage={currentLanguage}
+              />
 
               {word.length > 0 && (
                 <span className="card__text">

src/components/SoundInterval/SoundInterval.css

@@ -0,0 +1,13 @@
+.sound__interval {
+  background: none;
+  color: white;
+  border: none;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 50px;
+  height: 50px;
+}

src/components/SoundInterval/SoundInterval.jsx

@@ -0,0 +1,78 @@
+import './SoundInterval.css';
+import VolumeUpIcon from '@mui/icons-material/VolumeUp';
+import { useState, useEffect } from 'react';
+
+let myCounter = 0;
+let timeout = null;
+
+const SoundInterval = ({ onWord, onIndexWord, currentLanguage }) => {
+  const [counter, setCounter] = useState(0);
+  const [togle, setTogle] = useState(false);
+  console.log(onWord.length);
+  //   console.log(onWord);
+  useEffect(() => {
+    return () => clearInterval(timeout);
+  }, []);
+
+  myCounter = counter;
+  const startInterval = () => {
+    setTogle(prev => !prev);
+
+    timeout = setInterval(() => {
+      handleClickSound(myCounter);
+      setCounter(counter => counter + 1);
+
+      console.log('counter: ', myCounter); // counter always return 0 but myCounter the updated value
+      if (myCounter === onWord.length) clearInterval(timeout);
+    }, 5000);
+  };
+  // логіка кнопки озвучування
+  const handleClickSound = c => {
+    // setTogle(prev => !prev);
+    // console.log(c);
+    // e.preventDefault();
+    let soundWordIndex = onWord.filter((el, idx) => idx === c);
+
+    const synth = window.speechSynthesis;
+    // зупинемо все, що вже синтезується раніше
+    synth.cancel();
+    console.log('hallo', soundWordIndex);
+    //  читання тексту
+    const utterance = new SpeechSynthesisUtterance(soundWordIndex[0].en);
+    if (currentLanguage === 'en') {
+      utterance.lang = 'en-US';
+    } else {
+      utterance.lang = 'de';
+    }
+
+    synth.speak(utterance);
+  };
+
+  const handleClickButton = e => {
+    e.stopPropagation();
+  };
+
+  const endOfSound = e => {
+    clearInterval(timeout);
+    setTogle(prev => !prev);
+  };
+
+  return (
+    <button className="sound__interval" onClick={handleClickButton}>
+      {!togle ? (
+        <VolumeUpIcon sx={{ color: 'green' }} onClick={startInterval}>
+          Sound text
+        </VolumeUpIcon>
+      ) : (
+        <VolumeUpIcon sx={{ color: 'red' }} onClick={endOfSound}>
+          Sound text
+        </VolumeUpIcon>
+      )}
+      {/* <VolumeUpIcon sx={{ color: 'green' }} onClick={startInterval}>
+        Sound text
+      </VolumeUpIcon> */}
+    </button>
+  );
+};
+
+export default SoundInterval;

src/components/SoundInterval/index.js

@@ -0,0 +1 @@
+export { default } from './SoundInterval';