{"id":858,"date":"2022-04-13T11:49:36","date_gmt":"2022-04-13T10:49:36","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=858"},"modified":"2023-10-22T11:45:14","modified_gmt":"2023-10-22T10:45:14","slug":"text-to-speech-in-javascript","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/text-to-speech-in-javascript\/","title":{"rendered":"Text to Speech in Javascript"},"content":{"rendered":"\n<p>Text to speech (also known as tts or speech synthesis) is an offshoot of the Web Speech API which provides distinct areas of functionality, including speech recognition.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-speech-synthesis\">Speech Synthesis<\/h2>\n\n\n\n<p>Speech synthesis (aka text-to-speech, or tts) has to do with receiving synthesising text contained within an app to speech, and playing it out of a device&#8217;s speaker or audio output connection.<\/p>\n\n\n\n<p>The Web Speech API has a main controller interface for this \u2014\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/SpeechSynthesis\"><code>SpeechSynthesis<\/code><\/a>\u00a0\u2014 plus a number of closely-related interfaces for representing text to be synthesized (known as utterances), voices to be used for the utterance, etc. Again, most OSes have some kind of speech synthesis system, which will be used by the API for this task as available.<\/p>\n\n\n\n<p>In this tutorial, we shall build a simple webpage that uses the Web Speech API to implement the text to speech.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-prerequisites\">Prerequisites<\/h2>\n\n\n\n<p>To get through with this tutorial, you should have:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>A basic understanding of HTML &amp; CSS<\/li><li>A basic understanding of Javascript<\/li><li>Code editor of your choice.<\/li><\/ul>\n\n\n\n<p>Let&#8217;s begin &#8230;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-first-html\">First, HTML<\/h2>\n\n\n\n<pre title=\"index.html\" class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;!DOCTYPE>\n&lt;html lang=\"en\">\n  &lt;head>\n    &lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.0-beta1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" \/>\n    &lt;link rel=\"stylesheet\" href=\"index.css\" \/>\n    &lt;title>Text to Speech&lt;\/title>\n  &lt;\/head>\n  &lt;body class=\"container mt-5 bg-secondary\">\n    &lt;h1 class=\"text-light\">Codeflare Text to Speech&lt;\/h1>\n    &lt;p class=\"lead text-light mt-4\">Select Voice&lt;\/p>\n\n    &lt;!-- Select Menu for Voice -->\n    &lt;select id=\"voices\" class=\"form-select bg-secondary text-light\">&lt;\/select>\n\n    &lt;!-- Range Slliders for Volume, Rate &amp; Pitch -->\n    &lt;div class=\"d-flex mt-4 text-light\">\n      &lt;div>\n        &lt;p class=\"lead\">Volume&lt;\/p>\n        &lt;input type=\"range\" min=\"0\" max=\"1\" value=\"1\" step=\"0.1\" id=\"volume\" \/>\n        &lt;span id=\"volume-label\" class=\"ms-2\">1&lt;\/span>\n      &lt;\/div>\n      &lt;div class=\"mx-5\">\n        &lt;p class=\"lead\">Rate&lt;\/p>\n        &lt;input type=\"range\" min=\"0.1\" max=\"10\" value=\"1\" id=\"rate\" step=\"0.1\" \/>\n        &lt;span id=\"rate-label\" class=\"ms-2\">1&lt;\/span>\n      &lt;\/div>\n      &lt;div>\n        &lt;p class=\"lead\">Pitch&lt;\/p>\n        &lt;input type=\"range\" min=\"0\" max=\"2\" value=\"1\" step=\"0.1\" id=\"pitch\" \/>\n        &lt;span id=\"pitch-label\" class=\"ms-2\">1&lt;\/span>\n      &lt;\/div>\n    &lt;\/div>\n\n    &lt;!-- Text Area  for the User to Type -->\n    &lt;textarea class=\"form-control bg-dark text-light mt-5\" cols=\"30\" rows=\"10\" placeholder=\"Type here...\">&lt;\/textarea>\n\n    &lt;!-- Control Buttons -->\n    &lt;div class=\"mb-5\">\n      &lt;button id=\"start\" class=\"btn btn-success mt-5 me-3\">Start&lt;\/button>\n      &lt;button id=\"pause\" class=\"btn btn-warning mt-5 me-3\">Pause&lt;\/button>\n      &lt;button id=\"resume\" class=\"btn btn-info mt-5 me-3\">Resume&lt;\/button>\n      &lt;button id=\"cancel\" class=\"btn btn-danger mt-5 me-3\">Stop&lt;\/button>\n    &lt;\/div>\n  &lt;\/body>\n  &lt;script src=\".\/main.js\">&lt;\/script>\n&lt;\/html>\n<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>Here, we are using:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Bootstrap to style the web page<\/li><li>A textarea where what we want to be read is typed<\/li><li>Control buttons<\/li><li>A select option where we can select available voices<\/li><li>Range sliders for volume, pitch as well as rate.<\/li><li>We are also setting our language to English because we want the text to read in English.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"509\" src=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-2022-04-13-at-10.42.39-1-1024x509.png\" alt=\"software development text to speech in javascript\" class=\"wp-image-862\" srcset=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-2022-04-13-at-10.42.39-1-1024x509.png 1024w, https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-2022-04-13-at-10.42.39-1-300x149.png 300w, https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-2022-04-13-at-10.42.39-1-768x382.png 768w, https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-2022-04-13-at-10.42.39-1.png 1390w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Text to speech in Javascript<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-now-javascript\">Now, Javascript &#8230;<\/h2>\n\n\n\n<p>We first need to create an instance of the\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/SpeechSynthesisUtterance\"><code>SpeechSynthesisUtterance<\/code><\/a>\u00a0class. This instance will be configured with various properties, such as language, volume, text.<\/p>\n\n\n\n<pre title=\"main.js\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\/\/ Initialize new SpeechSynthesisUtterance object\nlet speech = new SpeechSynthesisUtterance();\n\n\/\/ Set Speech Language\nspeech.lang = \"en\";\n\nlet voices = []; \/\/ global array of available voices\n\nwindow.speechSynthesis.onvoiceschanged = () => {\n  \/\/ Get List of Voices\n  voices = window.speechSynthesis.getVoices();\n\n  \/\/ Initially set the First Voice in the Array.\n  speech.voice = voices[0];\n\n  \/\/ Set the Voice Select List. (Set the Index as the value, which we'll use later when the user updates the Voice using the Select Menu.)\n  let voiceSelect = document.querySelector(\"#voices\");\n  voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i)));\n};\n\ndocument.querySelector(\"#rate\").addEventListener(\"input\", () => {\n  \/\/ Get rate Value from the input\n  const rate = document.querySelector(\"#rate\").value;\n\n  \/\/ Set rate property of the SpeechSynthesisUtterance instance\n  speech.rate = rate;\n\n  \/\/ Update the rate label\n  document.querySelector(\"#rate-label\").innerHTML = rate;\n});\n\ndocument.querySelector(\"#volume\").addEventListener(\"input\", () => {\n  \/\/ Get volume Value from the input\n  const volume = document.querySelector(\"#volume\").value;\n\n  \/\/ Set volume property of the SpeechSynthesisUtterance instance\n  speech.volume = volume;\n\n  \/\/ Update the volume label\n  document.querySelector(\"#volume-label\").innerHTML = volume;\n});\n\ndocument.querySelector(\"#pitch\").addEventListener(\"input\", () => {\n  \/\/ Get pitch Value from the input\n  const pitch = document.querySelector(\"#pitch\").value;\n\n  \/\/ Set pitch property of the SpeechSynthesisUtterance instance\n  speech.pitch = pitch;\n\n  \/\/ Update the pitch label\n  document.querySelector(\"#pitch-label\").innerHTML = pitch;\n});\n\ndocument.querySelector(\"#voices\").addEventListener(\"change\", () => {\n  \/\/ On Voice change, use the value of the select menu (which is the index of the voice in the global voice array)\n  speech.voice = voices[document.querySelector(\"#voices\").value];\n});\n\ndocument.querySelector(\"#start\").addEventListener(\"click\", () => {\n  \/\/ Set the text property with the value of the textarea\n  speech.text = document.querySelector(\"textarea\").value;\n\n  \/\/ Start Speaking\n  window.speechSynthesis.speak(speech);\n});\n\ndocument.querySelector(\"#pause\").addEventListener(\"click\", () => {\n  \/\/ Pause the speechSynthesis instance\n  window.speechSynthesis.pause();\n});\n\ndocument.querySelector(\"#resume\").addEventListener(\"click\", () => {\n  \/\/ Resume the paused speechSynthesis instance\n  window.speechSynthesis.resume();\n});\n\ndocument.querySelector(\"#cancel\").addEventListener(\"click\", () => {\n  \/\/ Cancel the speechSynthesis instance\n  window.speechSynthesis.cancel();\n});\n<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"543\" data-id=\"861\" src=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-2022-04-13-at-11.14.19-1-1024x543.png\" alt=\"text to speech in javascript\" class=\"wp-image-861\" srcset=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-2022-04-13-at-11.14.19-1-1024x543.png 1024w, https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-2022-04-13-at-11.14.19-1-300x159.png 300w, https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-2022-04-13-at-11.14.19-1-768x407.png 768w, https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-2022-04-13-at-11.14.19-1.png 1419w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<p>Now, we have our text-to-speech logic fully functioning. <\/p>\n\n\n\n<p>Go ahead and check the <a href=\"https:\/\/github.com\/Luckae\/text-to-speech\" target=\"_blank\" rel=\"noreferrer noopener\">Github Repo<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-see-also\">See also &#8230;<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-7-javascript-shortcut-you-should-use-in-your-next-project\">7 Javascript Shortcut you should use in your next project<\/h3>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Text to speech (also known as tts or speech synthesis) is an offshoot of the Web Speech API<\/p>\n","protected":false},"author":1,"featured_media":863,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[11,24,95],"tags":[],"class_list":["post-858","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-programming","category-software-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Text to Speech in Javascript<\/title>\n<meta name=\"description\" content=\"Text to speech (also known as tts or speech synthesis) is an offshoot of the Web Speech API which provides distinct areas of functionality\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codeflarelimited.com\/blog\/text-to-speech-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Text to Speech in Javascript\" \/>\n<meta property=\"og:description\" content=\"Text to speech (also known as tts or speech synthesis) is an offshoot of the Web Speech API which provides distinct areas of functionality\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codeflarelimited.com\/blog\/text-to-speech-in-javascript\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/codeflretech\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-13T10:49:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-22T10:45:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/04\/text-to-speech-javascript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"928\" \/>\n\t<meta property=\"og:image:height\" content=\"479\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"codeflare\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codeflaretech\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/text-to-speech-in-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/text-to-speech-in-javascript\\\/\"},\"author\":{\"name\":\"codeflare\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e65653d49add95629f8c1053c5cd76a\"},\"headline\":\"Text to Speech in Javascript\",\"datePublished\":\"2022-04-13T10:49:36+00:00\",\"dateModified\":\"2023-10-22T10:45:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/text-to-speech-in-javascript\\\/\"},\"wordCount\":287,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/text-to-speech-in-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/text-to-speech-javascript.png\",\"articleSection\":[\"javascript\",\"programming\",\"software development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/text-to-speech-in-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/text-to-speech-in-javascript\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/text-to-speech-in-javascript\\\/\",\"name\":\"Text to Speech in Javascript\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/text-to-speech-in-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/text-to-speech-in-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/text-to-speech-javascript.png\",\"datePublished\":\"2022-04-13T10:49:36+00:00\",\"dateModified\":\"2023-10-22T10:45:14+00:00\",\"description\":\"Text to speech (also known as tts or speech synthesis) is an offshoot of the Web Speech API which provides distinct areas of functionality\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/text-to-speech-in-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/text-to-speech-in-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/text-to-speech-in-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/text-to-speech-javascript.png\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/text-to-speech-javascript.png\",\"width\":928,\"height\":479,\"caption\":\"text to speech in javascript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/text-to-speech-in-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"programming\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/programming\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Text to Speech in Javascript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"name\":\"\",\"description\":\"Sustainable solutions\",\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\",\"name\":\"Codeflare Limited\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"width\":1040,\"height\":263,\"caption\":\"Codeflare Limited\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e65653d49add95629f8c1053c5cd76a\",\"name\":\"codeflare\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"caption\":\"codeflare\"},\"description\":\"Latest tech news and coding tips.\",\"sameAs\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\",\"https:\\\/\\\/facebook.com\\\/codeflretech\",\"https:\\\/\\\/instagram.com\\\/codeflaretech\",\"https:\\\/\\\/x.com\\\/codeflaretech\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCuBLtiYqsajHdqw0uyt7Ofw?sub_confirmation=1\"],\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/author\\\/watcher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Text to Speech in Javascript","description":"Text to speech (also known as tts or speech synthesis) is an offshoot of the Web Speech API which provides distinct areas of functionality","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codeflarelimited.com\/blog\/text-to-speech-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Text to Speech in Javascript","og_description":"Text to speech (also known as tts or speech synthesis) is an offshoot of the Web Speech API which provides distinct areas of functionality","og_url":"https:\/\/codeflarelimited.com\/blog\/text-to-speech-in-javascript\/","article_author":"https:\/\/facebook.com\/codeflretech","article_published_time":"2022-04-13T10:49:36+00:00","article_modified_time":"2023-10-22T10:45:14+00:00","og_image":[{"width":928,"height":479,"url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/04\/text-to-speech-javascript.png","type":"image\/png"}],"author":"codeflare","twitter_card":"summary_large_image","twitter_creator":"@codeflaretech","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/codeflarelimited.com\/blog\/text-to-speech-in-javascript\/#article","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/text-to-speech-in-javascript\/"},"author":{"name":"codeflare","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/7e65653d49add95629f8c1053c5cd76a"},"headline":"Text to Speech in Javascript","datePublished":"2022-04-13T10:49:36+00:00","dateModified":"2023-10-22T10:45:14+00:00","mainEntityOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/text-to-speech-in-javascript\/"},"wordCount":287,"commentCount":0,"publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/text-to-speech-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/04\/text-to-speech-javascript.png","articleSection":["javascript","programming","software development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codeflarelimited.com\/blog\/text-to-speech-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codeflarelimited.com\/blog\/text-to-speech-in-javascript\/","url":"https:\/\/codeflarelimited.com\/blog\/text-to-speech-in-javascript\/","name":"Text to Speech in Javascript","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/text-to-speech-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/text-to-speech-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/04\/text-to-speech-javascript.png","datePublished":"2022-04-13T10:49:36+00:00","dateModified":"2023-10-22T10:45:14+00:00","description":"Text to speech (also known as tts or speech synthesis) is an offshoot of the Web Speech API which provides distinct areas of functionality","breadcrumb":{"@id":"https:\/\/codeflarelimited.com\/blog\/text-to-speech-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codeflarelimited.com\/blog\/text-to-speech-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/text-to-speech-in-javascript\/#primaryimage","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/04\/text-to-speech-javascript.png","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/04\/text-to-speech-javascript.png","width":928,"height":479,"caption":"text to speech in javascript"},{"@type":"BreadcrumbList","@id":"https:\/\/codeflarelimited.com\/blog\/text-to-speech-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codeflarelimited.com\/blog\/"},{"@type":"ListItem","position":2,"name":"programming","item":"https:\/\/codeflarelimited.com\/blog\/programming\/"},{"@type":"ListItem","position":3,"name":"Text to Speech in Javascript"}]},{"@type":"WebSite","@id":"https:\/\/codeflarelimited.com\/blog\/#website","url":"https:\/\/codeflarelimited.com\/blog\/","name":"","description":"Sustainable solutions","publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codeflarelimited.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codeflarelimited.com\/blog\/#organization","name":"Codeflare Limited","url":"https:\/\/codeflarelimited.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","width":1040,"height":263,"caption":"Codeflare Limited"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/7e65653d49add95629f8c1053c5cd76a","name":"codeflare","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","caption":"codeflare"},"description":"Latest tech news and coding tips.","sameAs":["https:\/\/codeflarelimited.com\/blog","https:\/\/facebook.com\/codeflretech","https:\/\/instagram.com\/codeflaretech","https:\/\/x.com\/codeflaretech","https:\/\/www.youtube.com\/channel\/UCuBLtiYqsajHdqw0uyt7Ofw?sub_confirmation=1"],"url":"https:\/\/codeflarelimited.com\/blog\/author\/watcher\/"}]}},"jetpack_featured_media_url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2022\/04\/text-to-speech-javascript.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/858","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/comments?post=858"}],"version-history":[{"count":1,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/858\/revisions"}],"predecessor-version":[{"id":864,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/858\/revisions\/864"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media\/863"}],"wp:attachment":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media?parent=858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/categories?post=858"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/tags?post=858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}