npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

state-speech-synth

v1.0.0

Published

`state-speech-synth` is a lightweight wrapper around the native speech-to-text API [`speechSynthesis`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis)+[`SpeechSynthesisUtterance`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSy

Downloads

323

Readme


Intro

state-speech-synth is a lightweight wrapper around the native speech-to-text API speechSynthesis+SpeechSynthesisUtterance. It provides a succinct API and the guarantee of consistent data.

Why

Tracking the playing state of speechSynthesis + SpeechSynthesisUtterance can be a headache. There are essentially two paths to take. One is untrustworthy, and the other is cumbersome.

Inconsistent:
speechSynthesis has 3 read-only boolean values speaking, paused, pending. In an idea world only one of these is true at a time, unless they are all false in which case the system is idle. It doesn’t take much finagling from the use to cause 2 of these values to be true at the same time leading you to representing impossible states. Example: SpeechSynth Native Example - CodeSandbox

Cumbersome:
A solution to the inconsistency issues is use the event handlers on each SpeechSynthesisUtterance instance. There is a handler for almost every situation onend , onerror, onpause , onresume , onstart. It’s missing an event for the onqueued and onprocessing, but that’s more of a nitpick. Which I suppose is the crux of the issue. There’s a lot of little things to write. I should know. That’s how this module is written.

How It Works

This module wraps speechSynthesis + SpeechSynthesisUtterance as a single API. It uses the event listeners to accurately track state changes (aren’t you glad you won’t have to write those 😁). Those listeners fire off to a single handler that will validate the state change and pass the result ( a single value ) to a state change handling function you’ve specified via the onStateChange subscriber function.

Usage

Here are a few examples of the code in action
Native JS: state-speech-synth Vanilla Example - CodeSandbox - compare it to the example above. Not only it is safer, it’s shorter!

React JS: state-speech-synth React Example - CodeSandbox - works so well with React Hooks

Chrome Extension: read-to-me/background.js at master · easilyBaffled/read-to-me · GitHub - A Chrome Extension I use to help with my dyslexia

API

onStateChange( stateChangeHandler )

Adds stateChangeHandler to the subscription list. stateChangeHandler will then be called every time there is a change in the SpeechSynthesis state. You can add as many handlers as you like. They will be called in the order there were added. `

When called stateChangeHandlers are passed currentState (IDLE| PROCESSING|PLAYING|PAUSED): - One of the state Symbols exported by the state-speech-synth module typeString (string) - the type property from the original SpeechSynthesisUtterance event event (object) - the original SpeechSynthesisUtterance event validTransition (boolean) - a value indicating of the change from SpeechSynthsis was valid. If false the currentValue will not change, but the event will be the new invalid event.

Arguments

stateChangeHandler (Function) - A function that will be called whenever state changes

Returns

(Function) - A function that, when called, will unsubscribe the associated handler.

Example

synth.onStateChange( ( currentState, type, event, validTransition ) => {
	if ( ! validTransition ) return;

	const displayStates = synthStateMap[currentState];
	
	speechControls.map(
		(controlElement, i) =>
			(controlElement.style.display = getDisplayStyle(displayStates[i]))
	);
});

speak( text, utteranceConfigObj )

This function is a combination speechSynthesis.speak and new SpeechSynthesisUtterance(text). It will handle setting up the utterance instance and firing it off to be processed.

Arguments

text (string) - A string that will be added to the queue for processing and speaking utteranceConfigObj - and object that will be used to set the properties of the utterance instance. Currently only rate (string|number), voice (string) and volume (string|number) are handled.

Example

synth.speak(textInput.value, { voice: 'Alex', rate: 1.7 });

pause, resume, cancel

These three functions directly use the SpeechSynthesis functions of the same name. These are all documented on MDN far better than I could here.
pause
resume
cancel

Roadmap

  • [ ] Add queued state
  • [ ] add toAudio conversion
  • [ ] have speak take an utterance
  • [ ] allow additional utterance options