For an index to all my stories click this text.
This story shows how to convert text to spoken word using voicerss. This is the first in a series. This story tells how to use this service in your browser.
Some background.
I love playing with text to speech programs and services. I also think this can be a valuable addition to your projects. In the most dramatic scenario you can give spoken word feedback in your IOT projects to a blind person or a person who is visually impaired.
But there are more projects where a spoken word feedback can be valuable. And besides that it is just fun to hear your computer or microcontroller speak to you. There are several speech related projects on this weblog, but they use your phone for speech conversion.
In this and the upcoming story we are going to use a service called voicerss. And this will work on your computer but also on a microcontroller !! I will start with the computer version.
Voicerss.
Voicerss is a company that offers text to speech conversion. It is a commercial company but they have a free tier. And that tier is really generous.
You can make 350 free conversions per day and each one can have no less then 100K text. That is an awful lot for a free tier.
Even for small messages this is a lot.
350 messages a day is 14 messages per hour. But you are not likely to be awake 24 hour a day. Meaning that if you for example use this 10 hour a day you can have 35 messages per hour, meaning every 2 minutes. Well you can do the calculations yourself.
Create an account
To use voicerss there is a very simple API that can be called from a large variety of computer languages.
You do need to make an account to obtain your personal API key.
Start with visiting the Voicerss site: https://www.voicerss.org/
Chose login from the menu and at the bottom chose registration.
Fill in all the fields. You do not need to give a company name. But do fill in your real e-mail address. And of course chose an appropriate password.
Then check "I am not a robot" and press the register button at the bottom.
The profile screen now shows at the bottom that your account is active. And it shows your API key.
The voicerss API
The API is what we need to let our computer (or microcontroller) communicate with voicerss. It is really very easy.
Look at the page with the API info.
You can copy any one of them and just paste it into your browsers URL field.
But before pressing enter change key=1234567890QWERTY.
After the = fill in your own API key.
Then press enter. And hear the magic happening.
Experiment with this by altering the text in anything you like.
Javascript example
There are several examples at the SDK page. Just pick your preferred language and click on it.
This is the page that shows how to use voicerss with Javascript.
Start with clicking on Download Javascript text-to-speech sdk.
The download starts immediately. And a zip file will be downloaded in your computers download folder. I transferred it to a folder called voicerss I made for this article.
Clicking on that zip file reveals that it contains just a small javascript library called voicerss-tts-min.js. Extract that to the same forlder where you are going to put your own program in. This is important. The voicerss-tts-min.js library should be in the same folder where your javascript program will be. If you do not put it there your program will not be able to find the library.
At the bottom of the Javascript SDK page there is also a small example program. I downloaded that also and called it voicetest-minimal.html
<!DOCTYPE html> <html> <head> <title></title> <meta charset='utf-8' /> <script src='voicerss-tts.min.js'></script> </head> <body> <script> VoiceRSS.speech({ key: '<API key>', src: 'Hello, world!', hl: 'en-us', v: 'Linda', r: 0, c: 'mp3', f: '44khz_16bit_stereo', ssml: false }); </script> </body> </html>
Above is this program and as you can see it is very simple. That is of course because it uses the voicerss-tts-min library.
To get this working you need to change <API key> in your own API key. Only the key, do not put in the brackets.
Save the html page and then double click on it. Your browser should open saying the words Hello world. Make sure to have the volume of your speakers up.
Now this is a very simple program that can be adapted for many different projects. You could embed this in your IOT dashboards or in any project that uses Javascript to monitor or control data.
No library needed
As you have seen above you can paste the API direct in the browsers URL. So obviously using the right code you do not need the Javascript library.
I wrote a program in Javascript (and admittedly had some help with the styling). This opens a webpage with a field in which you can type text.
The code is below. Just copy it from this page. Paste it into an editor and save it as voice-test.html or something like that. Then click on that file and it will pen in your favorite browser.
Pressing the SEND button sends the text to voicerss and the program has an audio player that plays the received spoken words.
You can replay audio as often as you like by pressing the play button in the audio player.
You can of course also alter the text and resend it to voicerss.
But there is more
For those that wonder: my computer is a Raspberry Pi5 with 8GB and I am running Raspberry Trixie with the KDE Plasma shell. That is why the downloads folder might look unfamiliar.
Here is the program:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text to Speech Demo</title> <style> body { font-family: Arial, sans-serif; padding: 20px; background: #f9f9f9; } textarea { width: 100%; height: 150px; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; resize: vertical; } button { margin-top: 10px; padding: 10px 20px; font-size: 16px; background-color: #0078d4; color: white; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #005fa3; } audio { margin-top: 20px; width: 100%; } </style> </head> <body> <h1>Text-to-Speech (VoiceRSS)</h1> <textarea id="textInput" placeholder="Type your text here..."></textarea><br> <button id="sendButton">Send</button> <audio id="audioPlayer" controls></audio> <script> const button = document.getElementById('sendButton'); const textInput = document.getElementById('textInput'); const audioPlayer = document.getElementById('audioPlayer'); button.addEventListener('click', async () => { const text = textInput.value.trim(); if (!text) { alert('Please enter some text first.'); return; } const apiKey = 'replace-with-your-key'; // replace with your real VoiceRSS key const language = 'en-us'; const voice = 'Amy'; try { // VoiceRSS expects a POST with form data const formData = new FormData(); formData.append('key',apiKey); formData.append('src', text); formData.append('hl', language); formData.append('v', voice); formData.append('c', 'WAV'); // codec formData.append('f', '8khz_16bit_mono'); const response = await fetch('https://api.voicerss.org/', { method: 'POST', body: formData }); const blob = await response.blob(); // VoiceRSS sometimes returns text error messages instead of audio const contentType = blob.type || ''; if (!contentType.startsWith('audio/')) { const textError = await blob.text(); console.error('VoiceRSS error:', textError); alert('VoiceRSS error: ' + textError); return; } // Create object URL for playback and saving const audioUrl = URL.createObjectURL(blob); // Play in audio element audioPlayer.src = audioUrl; audioPlayer.play(); // Trigger file save const downloadLink = document.createElement('a'); downloadLink.href = audioUrl; const safeText = text.slice(0, 20).replace(/[^a-z0-9]/gi, '_'); // clean name downloadLink.download = `tts_${safeText || 'output'}.mp3`; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); } catch (err) { console.error(err); alert('Failed to fetch or play audio.'); } }); </script> </body> </html>
There are just two things in this program that I want to go into detail here.
const apiKey = 'replace-with-your-key'; // replace with your real VoiceRSS key const language = 'en-us'; const voice = 'Amy';
Before running this code change 'replace-with-your-key' indeed with your own API key.
try { // VoiceRSS expects a POST with form data const formData = new FormData(); formData.append('key',apiKey); formData.append('src', text); formData.append('hl', language); formData.append('v', voice); formData.append('c', 'WAV'); // codec formData.append('f', '8khz_16bit_mono'); const response = await fetch('https://api.voicerss.org/', { method: 'POST', body: formData });
And here you can see that I did not use the Javascript library but made an ordinary fetch request.
And hey ? What's that ???
The codec is WAV and 8khz in 16 bit mono ???
Can we do something with that ??????
Well that is for another story. You'll be surprised.
The API
I urge you to look at the API page.
You can change:
- The language
- The voice male/female often multiple voices
- The audio codecs MP3/WAV/AAC/OGG/CAV
- Audio format: from 8Khz-8bit to 48Khz-44khz_16bit
Plenty of room to play around with.
Concluding
voicerss is a cloud based service and I actually lately have a dislike for cloud based services. The dislike comes from many cloud based services that suddenly shut down (dweet, original blynk, iotTweet, logitech pop etc.) or suddenly start charging for their services (IFTTT webhooks).
Nevertheless is voicerss a fun service to play with and build some projects around. I have some ideas for this and will publish them as soon as they are mature.
The API is very easy to use in all kinds of programming languages.
And most important: they have a very generous free tier which makes it possible for us mere hobbyists to build some great projects for free.
Till next time
have fun
Luc Volders
