tts-react - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

dist/component.d.ts

@@ -22,4 +22,20 @@ /// <reference types="react" />
 }
+/**
+ * `useTts` is a React hook for converting text to speech using
+ * the `SpeechSynthesis` and `SpeechSynthesisUtterance` Browser API's.
+ * Optionally, you can fallback to using the `HTMLAudioElement` API
+ * when setting the `fetchAudioData` prop, for example to use Amazon Polly.
+ *
+ * `TextToSpeech` is an implementation of `useTts` that provides
+ * controls for playing, pausing/stopping, and replaying the spoken text.
+ * It also extends the props of `useTts` by supporting some of it's own:
+ *
+ * - `align`
+ * - `allowMuting`
+ * - `position`
+ * - `size`
+ * - `useStopOverPause`
+ */
 declare const TextToSpeech: ({ lang, voice, children, onError, fetchAudioData, markColor, markBackgroundColor, autoPlay, allowMuting, size, align, position, markTextAsSpoken, useStopOverPause }: TTSProps) => JSX.Element;
 export { TextToSpeech, Positions };
 export type { TTSProps };

dist/component.js

@@ -81,3 +81,20 @@ "use strict";
 };
+/**
+ * `useTts` is a React hook for converting text to speech using
+ * the `SpeechSynthesis` and `SpeechSynthesisUtterance` Browser API's.
+ * Optionally, you can fallback to using the `HTMLAudioElement` API
+ * when setting the `fetchAudioData` prop, for example to use Amazon Polly.
+ *
+ * `TextToSpeech` is an implementation of `useTts` that provides
+ * controls for playing, pausing/stopping, and replaying the spoken text.
+ * It also extends the props of `useTts` by supporting some of it's own:
+ *
+ * - `align`
+ * - `allowMuting`
+ * - `position`
+ * - `size`
+ * - `useStopOverPause`
+ */
 
+
 const TextToSpeech = _ref2 => {
@@ -84,0 +101,0 @@ let {

dist/hook.d.ts

@@ -28,2 +28,3 @@ import type { ReactNode } from 'react';
 interface TTSHookState {
+    voices: SpeechSynthesisVoice[];
     boundary: TTSBoundaryUpdate;
@@ -30,0 +31,0 @@ isPlaying: boolean;

dist/hook.js

@@ -127,2 +127,7 @@ "use strict";
 
+    case 'voices':
+      return { ...state,
+        voices: action.payload
+      };
+
     case 'stop':
@@ -159,2 +164,3 @@ return { ...state,
   const [state, dispatch] = (0, _react.useReducer)(reducer, {
+    voices: window.speechSynthesis?.getVoices() ?? [],
     boundary: defaultBoundary,
@@ -336,2 +342,18 @@ isPlaying: false,
   }, [controller, autoPlay, markTextAsSpoken, onError]);
+  (0, _react.useEffect)(() => {
+    const onVoicesChanged = () => {
+      dispatch({
+        type: 'voices',
+        payload: window.speechSynthesis.getVoices()
+      });
+    };
+
+    if (typeof window.speechSynthesis?.addEventListener === 'function') {
+      window.speechSynthesis.addEventListener('voiceschanged', onVoicesChanged);
+    }
+
+    return () => {
+      window.speechSynthesis?.removeEventListener('voiceschanged', onVoicesChanged);
+    };
+  }, []);
   return {
@@ -338,0 +360,0 @@ get,

package.json

 {
   "name": "tts-react",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "React component to convert text to speech.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -134,2 +134,3 @@ # [`tts-react`](https://www.npmjs.com/package/tts-react)
 interface TTSHookState {
+  voices: SpeechSynthesisVoice[]
   boundary: BoundaryUpdate
@@ -203,2 +204,7 @@ isPlaying: boolean
 <details>
+<summary>Why does <code>markTextAsSpoken</code> sometimes highlight the wrong word?</summary>
+<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/boundary_event"><code>SpeechSynthesisUtterance</code> boundary event</a> <em>may</em> fire with skewed word boundaries for certain combinations of <code>spokenText</code> and <code>lang</code> or <code>voice</code> props. If you check the value of <code>state.boundary.word</code> in these cases, you will find the event is firing at unexpected boundaries, so there is no real solution other than to find a suitable <code>voice</code> for your given <code>spokenText</code>.</p>
+</details>
+
+<details>
 <summary>Why does <code>markTextAsSpoken</code> not work on Chrome for Android?</summary>
@@ -205,0 +211,0 @@ <p>This is a known issue by the Chromium team that apparently they are <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=521666#c7" target="_blank">not going to fix</a>. You can use <code>fetchAudioData</code> to fallback to the <code>HTMLAudioElement</code>, or try a different browser.</p>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

51608

increased by5.17%

Lines of code

1388

increased by3.89%

Number of lines in readme file

218

increased by2.83%

No dependency changes