tts-react - npm Package Compare versions

Comparing version 0.7.2 to 0.8.0

dist/component.d.ts

@@ -41,4 +41,4 @@ /// <reference types="react" />
  */
-declare const TextToSpeech: ({ lang, voice, children, onError, onMuteToggled, fetchAudioData, markColor, markBackgroundColor, autoPlay, allowMuting, size, align, position, markTextAsSpoken, useStopOverPause }: TTSProps) => JSX.Element;
+declare const TextToSpeech: ({ lang, rate, voice, volume, children, onError, onMuteToggled, fetchAudioData, markColor, markBackgroundColor, autoPlay, allowMuting, size, align, position, markTextAsSpoken, useStopOverPause }: TTSProps) => JSX.Element;
 export { TextToSpeech, Positions };
 export type { TTSProps };

dist/component.js

@@ -103,3 +103,5 @@ "use strict";
     lang,
+    rate,
     voice,
+    volume,
     children,
@@ -128,3 +130,5 @@ onError,
     lang,
+    rate,
     voice,
+    volume,
     children,
@@ -131,0 +135,0 @@ onError,

dist/controller.js

@@ -233,2 +233,3 @@ "use strict";
       if (this.synthesizer instanceof HTMLAudioElement) {
+        this.synthesizer.defaultPlaybackRate = clamped;
         this.synthesizer.playbackRate = clamped;
@@ -391,3 +392,5 @@ }
   async play() {
-    if (this.synthesizer instanceof HTMLAudioElement) {
+    if (this.paused) {
+      await this.resume();
+    } else if (this.synthesizer instanceof HTMLAudioElement) {
       await this.playHtmlAudio();
@@ -394,0 +397,0 @@ } else {

dist/hook.d.ts

@@ -16,2 +16,6 @@ import type { ReactNode } from 'react';
     voice?: ControllerOptions['voice'];
+    /** The initial rate of the speaking audio. */
+    rate?: number;
+    /** The initial volume of the speaking audio. */
+    volume?: number;
     /** Whether the text should be spoken automatically, i.e. on render. */
@@ -29,2 +33,4 @@ autoPlay?: boolean;
     onError?: (errorMsg: string) => void;
+    /** Calback when the current utterance/audio has ended. */
+    onEnd?: (evt: Event) => void;
     /** Function to fetch audio and speech marks for the spoken text. */
@@ -71,4 +77,4 @@ fetchAudioData?: ControllerOptions['fetchAudioData'];
 }
-declare const useTts: ({ lang, voice, children, markColor, markBackgroundColor, onError, onVolumeChange, onPitchChange, onRateChange, fetchAudioData, autoPlay, markTextAsSpoken }: TTSHookProps) => TTSHookResponse;
+declare const useTts: ({ lang, rate, volume, voice, children, markColor, markBackgroundColor, onEnd, onError, onVolumeChange, onPitchChange, onRateChange, fetchAudioData, autoPlay, markTextAsSpoken }: TTSHookProps) => TTSHookResponse;
 export { useTts };
 export type { TTSHookProps, TTSHookResponse, TTSHookState };

dist/hook.js

@@ -157,2 +157,4 @@ "use strict";
     lang,
+    rate,
+    volume,
     voice,
@@ -162,2 +164,3 @@ children,
     markBackgroundColor,
+    onEnd,
     onError,
@@ -200,12 +203,7 @@ onVolumeChange,
   const onPlay = (0, _react.useCallback)(() => {
-    if (state.isPaused) {
-      controller.resume();
-    } else {
-      controller.play();
-    }
-
+    controller.play();
     dispatch({
       type: 'play'
     });
-  }, [controller, state.isPaused]);
+  }, [controller]);
   const onPause = (0, _react.useCallback)(() => {
@@ -294,7 +292,11 @@ controller.pause();
 
-  const onEnd = (0, _react.useCallback)(() => {
+  const onEndHandler = (0, _react.useCallback)(evt => {
     dispatch({
       type: 'end'
     });
-  }, []);
+
+    if (typeof onEnd === 'function') {
+      onEnd(evt);
+    }
+  }, [onEnd]);
   const onReady = (0, _react.useCallback)(() => {
@@ -353,2 +355,6 @@ dispatch({
   (0, _react.useEffect)(() => {
+    controller.rate = rate ?? 1;
+    controller.volume = volume ?? 1;
+  }, [controller, rate, volume]);
+  (0, _react.useEffect)(() => {
     const onBeforeUnload = () => {
@@ -359,3 +365,3 @@ controller.clear();
     const initializeListeners = async () => {
-      controller.addEventListener(_controller.Events.END, onEnd);
+      controller.addEventListener(_controller.Events.END, onEndHandler);
       controller.addEventListener(_controller.Events.ERROR, onErrorHandler);
@@ -377,3 +383,3 @@ controller.addEventListener(_controller.Events.READY, onReady);
     return () => {
-      controller.removeEventListener(_controller.Events.END, onEnd);
+      controller.removeEventListener(_controller.Events.END, onEndHandler);
       controller.removeEventListener(_controller.Events.ERROR, onErrorHandler);
@@ -387,3 +393,3 @@ controller.removeEventListener(_controller.Events.READY, onReady);
     };
-  }, [onEnd, onReady, onErrorHandler, onBoundary, onVolume, onPitch, onRate, controller, markTextAsSpoken]);
+  }, [onEndHandler, onReady, onErrorHandler, onBoundary, onVolume, onPitch, onRate, controller, markTextAsSpoken]);
   (0, _react.useEffect)(() => {
@@ -390,0 +396,0 @@ if (autoPlay && state.isReady) {

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

62678

increased by0.98%

Lines of code

1631

increased by1.18%

No dependency changes