Sea Breeze JavaScript Text-To-Speech Player (SeaTTS)

This JavaScript script puts a play button and a stop button ▶︎ ⏹︎ before elements with a class of "seatts". It uses the Web Speech API speechSynthesis interface in JavaScript.

Features

Easy to Use
Free Text to Speech in browser using the JavaScript Web Speech API (speechSynthesis)
Detects language from html lang="" attribute.
Specific voices can be chosen with a data-voice attribute on the element.
Works great with Chrome, Edge, Android and Apple iOS devices.
No subscription.

Demonstration

This is a div with class="seatts". Try translating the website to another language using the built-in translator tool in Chrome or Edge browser and see how this script detects the new language. (Right click in the browser window and look for "Translate to...")

This is a textarea that you can edit. It has class="seatts". Chrome's "Translate to..." doesn't work on textareas. Edge's "Translate to..." doesn't work on textareas or contentEditable="true" elements.

How To Use

Paste the following just below <body> in your document <script src="seatts.js"></script>
Put class="seatts" on elements that you want a text to speech play button next to.
Upload seatts.js and your html file to your website server.
At anytime you can also add a speech recognition microphone to an input, textarea or contentEditable element with: seatts.add(element);

dlc_b

Download

Downloaded 0 times.

Please make a donation to help with server costs and other expenses.

SpeechSynthesis Testing

Here you can test JavaScript SpeechSynthesis in your browser and see all the events that are dispatched (or not dispatched) with different browsers and different voices.

SpeechSynthesis Info

All the functions and variables are declared in a JavaScript object called "seatts". When the HTML document is ready the script will look for elements with class of "seatts" and add the play and stop button to them. It also uses a MutationObserver to see if an element has received a class of "seattts" and adds a play and stop button before the element. In addition, a play and stop button can be added to an element by calling the following function: seatts.add(element);

When a user presses the play button the play button will change to a pause button ⏸︎ (⏸︎). If the pause button is pressed then the button will change to a play/pause or resume button ⏯︎ (⏯︎). If the stop button is pressed then the speechSynthesis will be stopped with the cancel() method and the play button will change to a play button ▶ (▶︎). The stop button can also be pressed with the ESC key on the keyboard.

When the play button is pressed the script will determine what voice to use by several factors:

It will find the document language or the browser language with code like this: var html_lang = document.documentElement.lang || navigator.language || "en-US"; if (html_lang.length == 2 && navigator.language.length > 2 && navigator.language.indexOf(html_lang) == 0) html_lang = navigator.language;
If the element with class of "seatts" has the attribute "data-voice" then the script will look for a voice with the criteria specified. data-voice can be a | separated list of partial voice names such as: "English Male|Ryan|Daniel".
If the element has the attributes data-pitch and/or data-rate then it will apply the pitch and the rate to the speech SpeechSynthesisUtterance().
The script will loop through the available voices using speechSynthesis.getVoices(). If it finds a voice with a lang property that matches the html_lang language (not including the country code) then it will choose it but it will not break the loop. It will keep searching to find a voice with a lang property that matches the html_lang language including the country code and then it will choose that voice. However, it still will not break the loop if the element has a data-voice attribute. It will keep searching for a voice with a name property that matches data-voice and html_lang matches the lang property on the voice. (Since Android returns the lang property on a voice with an underscore _ instead of a dash - , the script will take that into account.
In iOS or MacOS if sound effect voices are listed with getVoice(), such as: "Sandy", "Shelley", "Grandma", "Grandpa", "Eddy", "Reed", "Anna", "Rocko", "Flo", "Bahh", "Albert", "Jester", "Organ", "Cellos", "Zarvox", "Superstar", "Bells", "Trinoids", "Kathy", "Boing", "Whisper", "Good News", "Wobble", "Bad News", "Bubbles", "Junior", "Ralph", then the script should skip those voices.

Instead of relying on the SpeechSynthesis.speak() queue the script will create its own sentence queue by splitting the text in the element into sentences using a regular expression like this: var sentence_re = /([\S\s]+?(?:[.?!;:—\|]|\n(?!\t)|$)(?:[\s\n]+|$|(?=[A-Z])))/g; // Match all sentences It will then replace \n with a space in all sentences because HTML documents sometimes have a line feed and the speechSynthesis should not treat that line feed as a new sentence. When one sentence (utterance) ends then the script will start the next utterance or sentence.

Because of bugs in Chrome where it gets stuck sometimes, when the play button is pressed the script will always call speechSynthesis.cancel() before calling speechSynthesis.speak();

Google voices have a bug where they stop playing indefinitely if the utterance is over 14 seconds long unless the script calls pause() and resume(). So the script needs to detect if a voice starts with "Google" and if there is an utterance that is playing then it needs to call speechSynthesis.pause(); speechSynthesis.resume() every 12 seconds while it is playing.

Edge browser often has bugs where some voices stop working. So if Edge returns a SpeechSynthesisErrorEvent: error: 'synthesis-failed' then Edge should show the error in the console and choose the next voice in the list of voices for the browser.

Because of "pause" bugs in Chrome for desktop and Android, when the pause button is pressed the script should call speechSynthesis.cancel() but keep track of which sentence was paused in the queue. When the resume button is pressed then the script should start playing from that sentence in the queue.

Last updated on July 5, 2026
Created on June 30, 2026