{"id":22345560,"url":"https://github.com/gerhynes/speech-synthesis","last_synced_at":"2026-04-20T05:33:52.866Z","repository":{"id":106048014,"uuid":"108766540","full_name":"gerhynes/speech-synthesis","owner":"gerhynes","description":"A page built to experiment with working with Chrome's speech synthesis API. Built for Wes Bos' JavaScript 30 course. ","archived":false,"fork":false,"pushed_at":"2018-02-03T17:25:42.000Z","size":3,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-05T06:52:58.864Z","etag":null,"topics":["javascript","javascript30","speech-synthesis"],"latest_commit_sha":null,"homepage":"https://gk-hynes.github.io/speech-synthesis/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gerhynes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-29T19:59:54.000Z","updated_at":"2018-01-23T22:03:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"5dfc5b0f-b606-4327-99a9-50cdec3d7669","html_url":"https://github.com/gerhynes/speech-synthesis","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gerhynes/speech-synthesis","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fspeech-synthesis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fspeech-synthesis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fspeech-synthesis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fspeech-synthesis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gerhynes","download_url":"https://codeload.github.com/gerhynes/speech-synthesis/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fspeech-synthesis/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32034683,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T00:18:06.643Z","status":"online","status_checked_at":"2026-04-20T02:00:06.527Z","response_time":94,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","javascript30","speech-synthesis"],"created_at":"2024-12-04T09:18:06.390Z","updated_at":"2026-04-20T05:33:52.843Z","avatar_url":"https://github.com/gerhynes.png","language":"CSS","readme":"# Speech Synthesis\n\nA page built to experiment with working with Chrome's speech synthesis API. Built for Wes Bos' [JavaScript 30](https://javascript30.com/) course.\n\n[![Screenshot of the speech synthesis site](https://res.cloudinary.com/gerhynes/image/upload/v1517674755/Screenshot-2018-2-3_Speech_Synthesis_vpeom9.png)](https://gk-hynes.github.io/speech-synthesis/)\n\n## Notes\n\n### Speech Synthesis\n\nFirst 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.\n\nCreate 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.\n\nSet `msg.text` to the value of the textarea.\n\nTake the global variable speechSynthesis, add an event listener, and listen for the `voiceschanged` event.\n\nMake a function, `populateVoices`, and override the `voices` array with `this.getVoices()`.\n\n`Map` over all of the voices and set them as options in the dropdown.\n\n```js\n.map(\n      voice =\u003e\n        `\u003coption value=\"${voice.name}\"\u003e${voice.name} (${voice.lang})\u003c/option\u003e`\n    )\n    .join(\"\");\n```\n\nMake another function, `setVoice`, to be called when a voice is selected from the dropdown.\n\nYou need to find not just the name of each voice but the corresponding `speechSynthesisVoice` object.\n\nUse `find` to find where `voice.name` quals `this.value`.\n\nNow make a function, `toggle`, so that every time you change an input the speech is restarted.\n\nInside toggle, cancel anything that is currently speaking and restart `speechSynthesis.speak(msg)`.\n\nMake sure `toggle` is called at the end of `setVoice`.\n\nPass 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)`.\n\nFinally, listen for a click on the `speak` and `stop` buttons, and run `toggle`.\n\nYou 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.\n\nTo filter for just Anglophone voices, inside `populateVoices` use `filter` and check if `voice.lang.includes(\"en\")`.\n\n### Manipulating the Speech\n\nAdd an event listener to each of the options, listen for the `change` event, and run a function called `setOption`.\n\nInside `setOption` set the property to be changed, `this.name`, to the value it is changed to, `this.value`.\n\n```js\nfunction setOption() {\n  console.log(this.name, this.value);\n  msg[this.name] = this.value;\n  toggle();\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Fspeech-synthesis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgerhynes%2Fspeech-synthesis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Fspeech-synthesis/lists"}