Day23 of #100DaysOfCode

#CodeTogether Day 23/100

Project 23: Speech Synthesis



Today we have been tasked to build a web interface for Speech Synthesis!

The Voiceinator 5000
const msg = new SpeechSynthesisUtterance();let voices = [];
const voicesDropdown = document.querySelector('[name="voice"]');
const options = document.querySelectorAll('[type="range"], [name="text"]');
const speakButton = document.querySelector('#speak');
const stopButton = document.querySelector('#stop');
msg.text = document.querySelector('[name="text"]').value;
function populateVoices() {
voices = this.getVoices();
voicesDropdown.innerHTML = voices
.filter(voice => voice.lang.includes('en'))
.map(voice => `<option value="${}">${} (${voice.lang})</option>`)
function setVoice() {
msg.voice = voices.find(voice => === this.value);
function toggle(startOver = true) {
if (startOver) {
function setOption() {
console.log(, this.value);
msg[] = this.value;
speechSynthesis.addEventListener('voiceschanged', populateVoices);
voicesDropdown.addEventListener('change', setVoice);
options.forEach(option => option.addEventListener('change', setOption));
speakButton.addEventListener('click', toggle);
stopButton.addEventListener('click', ()=> toggle(false));

Today I Learned (T-I-L):

  • To create a Speech Synthesis web app
  • Linking event listener to each user-defined function!🙌



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store