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

texttospeech

v0.2.0

Published

Text to Speech (Pure Client Side)

Downloads

28

Readme

speak.js

A port of the eSpeak speech synthesizer from C++ to JavaScript using Emscripten.

Enables text-to-speech on the web using only JavaScript and HTML5.

Online demo: http://syntensity.com/static/espeak.html

Note: An active fork of this project is at

https://github.com/katsuyan/speak.js

Check it out!

Usage

Very simple! Do this:

  • Include the script in your html header,

    <script src="speakClient.js"></script>

    (and make sure you have speakClient.js available, as well as speakWorker.js and speakGenerator.js)

  • Add a div with an audio element called 'audio' in your html body,

    <div id="audio"></div>

  • Call speak() to say stuff in JavaScript

    speak('hello world!')

See helloworld.html for a simple 'hello world', and demo.html for a more detailed example.

Options

You can also specify some options with calling speak(), by doing

  `speak('hello world', { option1: value1, option2: value2 .. })`

available options are:

  • amplitude: How loud the voice will be (default: 100)
  • pitch: The voice pitch (default: 50)
  • speed: The speed at which to talk (words per minute) (default: 175)
  • voice: Which voice to use (for a non-default voice, requires you to build speak.js to include the proper data. See Language Support below) (default: en/en-us)
  • wordgap: Additional gap between words in 10 ms units (default: 0)
  • noWorker: Do not use a web worker (see below in 'Architecture')

For example

  `speak('hello world', { pitch: 100 })`

will talk in a very high-pitched voice.

Architecture

speakClient.js is the file that you interact with. It defines speak(), and will load speakWorker.js in a web worker. speakWorker wraps around speakGenerator.js, which does the actual work of converting a string into a WAV file. The WAV data is returned to speak(), which then plays it in an HTML Audio element.

You can also use speak.js without a web worker. In that case, you don't need speakWorker.js, but you do need to load speakGenerator.js along with speakClient.js in your HTML page. speak(), if called with noWorker set to true in the options object, will directly call the WAV generation code in speakGenerator.js instead of forwarding the call to a worker which would have done the same.

Building

A prebuilt version is already included. But if you want to tinker with the source code though, you might want to build it yourself. To do so, run emscripten.sh inside src/. Note that you need to change the paths there.

Language Support

eSpeak supports multiple languages so speak.js can too. To do this, you need to build a custom version of speak.js:

  • Bundle the proper language files. For french, you need fr_dict and voices/fr. See commented-out code in emscripten.sh and bundle.py
  • Expose those files to the emulated filesystem, in post.js. See commented-out code in there as well.
  • Run emscripten.sh to build.

You then need to call speak() with the voice option that tells it to use the right voice for your language. For example, for French this should work:

  `speak('boulanger', { voice: 'fr' })`