https://github.com/gerhynes/speech-synthesis
A page built to experiment with working with Chrome's speech synthesis API. Built for Wes Bos' JavaScript 30 course.
https://github.com/gerhynes/speech-synthesis
javascript javascript30 speech-synthesis
Last synced: 10 months ago
JSON representation
A page built to experiment with working with Chrome's speech synthesis API. Built for Wes Bos' JavaScript 30 course.
- Host: GitHub
- URL: https://github.com/gerhynes/speech-synthesis
- Owner: gerhynes
- Created: 2017-10-29T19:59:54.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-03T17:25:42.000Z (almost 8 years ago)
- Last Synced: 2025-01-31T11:34:28.081Z (12 months ago)
- Topics: javascript, javascript30, speech-synthesis
- Language: CSS
- Homepage: https://gk-hynes.github.io/speech-synthesis/
- Size: 2.93 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Speech Synthesis
A page built to experiment with working with Chrome's speech synthesis API. Built for Wes Bos' [JavaScript 30](https://javascript30.com/) course.
[](https://gk-hynes.github.io/speech-synthesis/)
## Notes
### Speech Synthesis
First make sure that the voice, rate and text have name attributes that match them. This is so that the name of them lines up with the property on the utterance.
Create a new `SpeechSynthesisUtterance`, an empty array for the voices, and select everything else: the voice, the range, the textarea, and the speak and stop buttons.
Set `msg.text` to the value of the textarea.
Take the global variable speechSynthesis, add an event listener, and listen for the `voiceschanged` event.
Make a function, `populateVoices`, and override the `voices` array with `this.getVoices()`.
`Map` over all of the voices and set them as options in the dropdown.
```js
.map(
voice =>
`${voice.name} (${voice.lang})`
)
.join("");
```
Make another function, `setVoice`, to be called when a voice is selected from the dropdown.
You need to find not just the name of each voice but the corresponding `speechSynthesisVoice` object.
Use `find` to find where `voice.name` quals `this.value`.
Now make a function, `toggle`, so that every time you change an input the speech is restarted.
Inside toggle, cancel anything that is currently speaking and restart `speechSynthesis.speak(msg)`.
Make sure `toggle` is called at the end of `setVoice`.
Pass toggle a flag `startOver = true`, and use an if statement to check this within the function. This is so that you can later choose to not restart by calling `toggle(false)`.
Finally, listen for a click on the `speak` and `stop` buttons, and run `toggle`.
You can't just call `toggle(false)` because it'll just run on pageload. You can use `bind` or an inline function to get around this.
To filter for just Anglophone voices, inside `populateVoices` use `filter` and check if `voice.lang.includes("en")`.
### Manipulating the Speech
Add an event listener to each of the options, listen for the `change` event, and run a function called `setOption`.
Inside `setOption` set the property to be changed, `this.name`, to the value it is changed to, `this.value`.
```js
function setOption() {
console.log(this.name, this.value);
msg[this.name] = this.value;
toggle();
}
```