implemented onWordMarked event listener

README.md

@@ -138,6 +138,14 @@ You can replace the whole speech output handling by using your own React compone
 
 If you choose to use your own component, make sure it uses the `SpeechOutputProps` exported from this plugin.
 
+## Event listeners
+
+To be able to react to certain events you can register the following event listeners:
+
+### `onWordMarked`
+
+When a speech output is played the spoken words are highlighted in the text simultaneously. The `onWordMarked` listener is called as soon as a new word is highlighted and delivers the currently highlighted word as a string. When no word is highlighted (anymore) the string is empty.
+
 ## Contribute 🦸
 
 Contributions are more than welcome! I would love to see text-to-speech becoming a thing in the already very accessible Gatsby ecosystem. If agree and would like to join me on this mission it would be awesome to get in touch! 😊

src/SpeechOutput.tsx

@@ -14,6 +14,7 @@ const DefaultPlayButton: React.FunctionComponent<PlayButtonProps> = props => (
 export interface SpeechOutputProps {
   id: string;
   customPlayButton?: React.FunctionComponent<PlayButtonProps>;
+  onWordMarked?: (word: string) => void;
 }
 
 const SpeechOutput: React.FunctionComponent<SpeechOutputProps> = props => {
@@ -32,7 +33,12 @@ const SpeechOutput: React.FunctionComponent<SpeechOutputProps> = props => {
     fetchSpeechMarks();
   }, [props.id]);
 
-  const currentWordIndex = useSpeechMarks(speechMarks, isPlaying);
+  const currentWord = useSpeechMarks(speechMarks, isPlaying);
+
+  React.useEffect(
+    () => props.onWordMarked && props.onWordMarked(currentWord.word),
+    [currentWord, props.onWordMarked]
+  );
 
   const onPlayStopButtonClicked = () => {
     if (isPlaying) {
@@ -54,7 +60,7 @@ const SpeechOutput: React.FunctionComponent<SpeechOutputProps> = props => {
   return (
     <>
       <PlayButton isPlaying={isPlaying} onClick={onPlayStopButtonClicked} />
-      <WordMarker markedWordIndex={currentWordIndex}>
+      <WordMarker markedWordIndex={currentWord.index}>
         {props.children}
       </WordMarker>
     </>

src/internals/hooks/UseSpeechMarks.ts

@@ -8,13 +8,21 @@ export interface SpeechMark {
   value: string;
 }
 
+interface CurrentWord {
+  index: number;
+  word: string;
+}
+
 const useSpeechMarks = (
   speechMarks: SpeechMark[],
   isPlaying: boolean
-): number => {
-  const noWordSelectedIndex = -1;
-  const [currentWordIndex, setCurrentWordIndex] = React.useState<number>(
-    noWordSelectedIndex
+): CurrentWord => {
+  const noWordSelected: CurrentWord = {
+    index: -1,
+    word: ""
+  };
+  const [currentWord, setCurrentWord] = React.useState<CurrentWord>(
+      noWordSelected
   );
   const timeoutHandles = React.useRef<NodeJS.Timeout[]>([]);
 
@@ -38,17 +46,20 @@ const useSpeechMarks = (
           return !isSsmlTag;
         })
         .map((speechMark: SpeechMark, index: number) =>
-          setTimeout(() => setCurrentWordIndex(index), speechMark.time)
+          setTimeout(() => setCurrentWord({
+            index,
+            word: speechMark.value
+          }), speechMark.time)
         )
     );
   };
 
   const stop = () => {
-    setCurrentWordIndex(noWordSelectedIndex);
+    setCurrentWord(noWordSelected);
     timeoutHandles.current.forEach(clearTimeout);
   };
 
-  return currentWordIndex;
+  return currentWord;
 };
 
 export default useSpeechMarks;