| 75 | }; |
| 76 | |
| 77 | const handlePlay = (id, title, excerpt) => { |
| 78 | const textToSpeak = `${title}. ${excerpt}`; |
| 79 | document.getElementsByClassName(`pause-button-${id}`)[0].classList.remove('hidden') |
| 80 | document.getElementsByClassName(`speak-button-${id}`)[0].classList.add('hidden') |
| 81 | console.log(textToSpeak) |
| 82 | if (isPaused && speechInstanceRef.current) { |
| 83 | setIsPaused(true); |
| 84 | window.speechSynthesis.speak(speechInstanceRef.current); |
| 85 | } else { |
| 86 | const speechInstance = new SpeechSynthesisUtterance(textToSpeak.slice(currentPosition)); |
| 87 | speechInstance.lang = 'en-US'; |
| 88 | speechInstance.pitch = 1; |
| 89 | speechInstance.rate = 1; |
| 90 | |
| 91 | speechInstance.onboundary = (event) => { |
| 92 | if (event.name === 'word') { |
| 93 | setCurrentPosition(event.charIndex); |
| 94 | } |
| 95 | }; |
| 96 | |
| 97 | speechInstanceRef.current = speechInstance; |
| 98 | window.speechSynthesis.speak(speechInstance); |
| 99 | } |
| 100 | setIsPlaying(true); |
| 101 | }; |
| 102 | |
| 103 | const handlePause = (id) => { |
| 104 | document.getElementsByClassName(`pause-button-${id}`)[0].classList.add('hidden') |