{"id":3530,"date":"2022-09-24T04:42:28","date_gmt":"2022-09-23T23:42:28","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3530"},"modified":"2022-09-24T05:42:16","modified_gmt":"2022-09-24T00:42:16","slug":"javascript-speech-to-text-and-text-to-speech-note-taking-app","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/javascript-speech-to-text-and-text-to-speech-note-taking-app\/","title":{"rendered":"JavaScript Speech to Text and Text to Speech Note Taking App"},"content":{"rendered":"\n<p>In this tutorial, you will learn how to implement <strong>Speech to Text<\/strong> and <strong>Text to Speech<\/strong> functionality using <strong>JavaScript<\/strong>. Basically, we will build a <strong>Voice Note-Taking App<\/strong> from scratch.<\/p>\n\n\n<p><a class=\"ep_link_major\" href=\"https:\/\/www.edopedia.com\/demo\/voice-note-app\/\" target=\"_blank\" rel=\"noopener\">Live Demo<\/a><\/p>\n\n\n<p>This app uses the <strong>Web Speech API<\/strong> to build a voice-powered note app to do 3 things:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Take notes by using voice-to-text or keyboard input.<\/li><li>Save voice notes to localStorage.<\/li><li>Display all of the saved notes and give the option to either Listen to the Notes or delete them.<\/li><\/ul>\n\n\n\n<p>The source code of this <strong>Voice Note App<\/strong> is written using HTML5, CSS3, JavaScript, Bootstrap, and <strong>Web Speech API<\/strong>. I have provided the <strong>complete source code<\/strong> in this article, but you have to <strong>download the image files<\/strong> using the <strong>download link<\/strong> given at the end of this tutorial.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Intro to Web Speech API and Where I Used it?<\/h2>\n\n\n\n<p>The Web Speech API provides two distinct areas of functionality.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Speech Recognition<\/li><li>Speech Synthesis (also known as text to speech, or TTS)<\/li><\/ul>\n\n\n\n<p>Our Voice Note App is divided into two separate interfaces.<\/p>\n\n\n\n<p>The first will be <strong>&#8220;Speech Recognition&#8221;<\/strong>\u00a0which will involve receiving speech through a device&#8217;s microphone, which is then checked by a speech recognition service against a list of grammar (basically, the vocabulary you want to have recognized in a particular app.) When a word or phrase is successfully recognized, it is returned as a result (or list of results) as a text string, and further actions can be initiated as a result.<\/p>\n\n\n\n<p>The second is\u00a0<strong>&#8220;Speech Synthesis&#8221;<\/strong>\u00a0(aka text-to-speech, or TTS) which involves receiving synthesizing 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<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">JavaScript Speech to Text and Text to Speech Note Taking App &#8211; Full Source Code<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">index.html<\/h3>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;utf-8&quot;&gt;\n    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;\n    &lt;title&gt;Voice Note App&lt;\/title&gt;\n    &lt;meta name=&quot;description&quot; content=&quot;A Voice Note App that allows you to take voice and\/or text notes and play them back.&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\n    &lt;link rel=&quot;shortcut icon&quot; href=&quot;assets\/ico\/favicon.ico&quot;&gt;\n    &lt;!-- Custom Style Sheet --&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;assets\/css\/style.css&quot;&gt;\n    &lt;!-- Bootstrap CDN CSS --&gt;\n    &lt;link href=&quot;https:\/\/stackpath.bootstrapcdn.com\/bootswatch\/4.1.1\/cerulean\/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-0Mou2qXGeXK7k\/Ue\/a1hspEVcEP2zCpoQZw8\/MPeUgISww+VmDJcy2ri9tX0a6iy&quot; crossorigin=&quot;anonymous&quot;&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n    &lt;div class=&quot;container-fluid align-center&quot;&gt;\n        &lt;img src=&quot;assets\/img\/code-mic-150.png&quot; alt=&quot;Voice Note App Logo&quot;&gt;\n        &lt;h1&gt;Voice Note App&lt;\/h1&gt;\n        &lt;p class=&quot;page-description&quot;&gt;This app allows you to take voice and\/or text notes and play them back.&lt;\/p&gt;\n        &lt;hr&gt;\n        &lt;h3 class=&quot;no-browser-support&quot;&gt;Sorry, Your Browser Doesn't Support the Web Speech API. Try Opening This Demo In Google Chrome.&lt;\/h3&gt;\n        &lt;div class=&quot;app&quot;&gt;\n            &lt;div class=&quot;row&quot;&gt;\n                &lt;div class=&quot;col-md-6 align-center&quot;&gt;\n                    &lt;h3&gt;Add New Voice Note&lt;\/h3&gt;\n                    &lt;div class=&quot;input-single&quot;&gt;\n                        &lt;textarea id=&quot;note-textarea&quot; placeholder=&quot;Create a new note by typing or using voice recognition.&quot; rows=&quot;6&quot;&gt;&lt;\/textarea&gt;\n                    &lt;\/div&gt;\n                    &lt;button id=&quot;start-record-btn&quot; class=&quot;btn-success&quot; title=&quot;Start Recording&quot;&gt;Start Recognition&lt;\/button&gt;\n                    &lt;button id=&quot;pause-record-btn&quot; class=&quot;btn-warning&quot; title=&quot;Pause Recording&quot;&gt;Pause Recognition&lt;\/button&gt;\n                    &lt;button id=&quot;save-note-btn&quot; class=&quot;btn-info&quot; title=&quot;Save Note&quot;&gt;Save Note&lt;\/button&gt;\n                    &lt;p id=&quot;recording-instructions&quot;&gt;Press the\n                        &lt;strong&gt;Start Recognition&lt;\/strong&gt; button and allow access.&lt;\/p&gt;\n                &lt;\/div&gt;\n                &lt;div class=&quot;col-md-6 align-center&quot;&gt;\n                    &lt;h3&gt;My Voice Notes&lt;\/h3&gt;\n                    &lt;ul id=&quot;notes&quot;&gt;\n                        &lt;li&gt;\n                            &lt;p class=&quot;no-notes&quot;&gt;You don't have any notes.&lt;\/p&gt;\n                        &lt;\/li&gt;\n                    &lt;\/ul&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;!-- \/row --&gt;\n        &lt;\/div&gt;\n        &lt;!-- \/app --&gt;\n    &lt;\/div&gt;\n\n    &lt;div id=&quot;footer&quot;&gt;\n        &lt;div class=&quot;clearfix1&quot;&gt;\n            &lt;div class=&quot;container&quot;&gt;\n                &lt;div class=&quot;row&quot;&gt;\n\n                    &lt;div class=&quot;center&quot;&gt;\n                        &lt;p&gt;Speech to Text Voice Note App 2018&lt;\/p&gt;\n                    &lt;\/div&gt;\n\n                &lt;\/div&gt;\n                &lt;!-- \/row --&gt;\n            &lt;\/div&gt;\n            &lt;!-- \/container --&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;!-- \/footer --&gt;\n\n    &lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n    &lt;script src=&quot;assets\/js\/script.js&quot;&gt;&lt;\/script&gt;\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\/assets\/css\/style.css<\/h3>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">ul {\n    list-style: none;\n    padding: 0;\n}\n\np {\n    color: #444;\n}\n\nbutton {\n    margin-bottom: 20px;\n    padding: 10px 10px;\n}\n\nbutton:focus {\n    outline: 0;\n}\n\n.container {\n    max-width: 700px;\n    margin: 0 auto;\n    padding: 30px 50px;\n    text-align: center;\n}\n\n.container h1 {\n    margin-bottom: 20px;\n}\n\n.page-description {\n    font-size: 1.1rem;\n    margin: 0 auto;\n}\n\n.tz-link {\n    font-size: 1em;\n    color: #1da7da;\n    text-decoration: none;\n}\n\n.no-browser-support {\n    display: none;\n    font-size: 1.2rem;\n    color: #e64427;\n    margin-top: 35px;\n}\n\n.app {\n    margin: 40px auto;\n}\n\n#note-textarea {\n    margin: 20px 0;\n    width: 80%;\n}\n\n#recording-instructions {\n    margin: 15px auto 60px;\n}\n\n#notes {\n    padding-top: 20px;\n}\n\n.note .header {\n    font-size: 0.9em;\n    color: #888;\n    margin-bottom: 10px;\n}\n\n.note .delete-note,\n.note .listen-note {\n    text-decoration: none;\n    margin-left: 15px;\n}\n\n.note .content {\n    margin-bottom: 30px;\n}\n\n.align-center img {\n    padding-top: 10px;\n}\n\n.align-center {\n    text-align: center;\n}\n\n.center {\n    text-align: center;\n    width: 100%;\n}\n\n@media (max-width: 768px) {\n    .container {\n        padding: 50px 25px;\n    }\n    button {\n        margin-bottom: 20px;\n        padding: 10px 10px;\n        width: 80%;\n    }\n}<\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\/assets\/js\/script.js<\/h3>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">try {\n    var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n    var recognition = new SpeechRecognition();\n} catch (e) {\n    console.error(e);\n    $('.no-browser-support').show();\n    $('.app').hide();\n}\n\n\nvar noteTextarea = $('#note-textarea');\nvar instructions = $('#recording-instructions');\nvar notesList = $('ul#notes');\n\nvar noteContent = '';\n\n\/\/ Get all notes from previous sessions and display them.\nvar notes = getAllNotes();\nrenderNotes(notes);\n\n\n\n\/*-----------------------------\n      Voice Recognition \n------------------------------*\/\n\n\/\/ If false, the recording will stop after a few seconds of silence.\n\/\/ When true, the silence period is longer (about 15 seconds),\n\/\/ allowing us to keep recording even when the user pauses. \nrecognition.continuous = true;\n\n\/\/ This block is called every time the Speech APi captures a line. \nrecognition.onresult = function(event) {\n\n    \/\/ event is a SpeechRecognitionEvent object.\n    \/\/ It holds all the lines we have captured so far. \n    \/\/ We only need the current one.\n    var current = event.resultIndex;\n\n    \/\/ Get a transcript of what was said.\n    var transcript = event.results[current][0].transcript;\n\n    \/\/ Add the current transcript to the contents of our Note.\n    \/\/ There is a weird bug on mobile, where everything is repeated twice.\n    \/\/ There is no official solution so far so we have to handle an edge case.\n    var mobileRepeatBug = (current == 1 &amp;&amp; transcript == event.results[0][0].transcript);\n\n    if (!mobileRepeatBug) {\n        noteContent += transcript;\n        noteTextarea.val(noteContent);\n    }\n};\n\nrecognition.onstart = function() {\n    instructions.text('Voice recognition activated. Try speaking into the microphone.');\n}\n\nrecognition.onspeechend = function() {\n    instructions.text('You were quiet for a while so voice recognition turned itself off.');\n}\n\nrecognition.onerror = function(event) {\n    if (event.error == 'no-speech') {\n        instructions.text('No speech was detected. Try again.');\n    };\n}\n\n\n\n\/*-----------------------------\n      App buttons and input \n------------------------------*\/\n\n$('#start-record-btn').on('click', function(e) {\n    if (noteContent.length) {\n        noteContent += ' ';\n    }\n    recognition.start();\n});\n\n\n$('#pause-record-btn').on('click', function(e) {\n    recognition.stop();\n    instructions.text('Voice recognition paused.');\n});\n\n\/\/ Sync the text inside the text area with the noteContent variable.\nnoteTextarea.on('input', function() {\n    noteContent = $(this).val();\n})\n\n$('#save-note-btn').on('click', function(e) {\n    recognition.stop();\n\n    if (!noteContent.length) {\n        instructions.text('Could not save empty note. Please add a message to your note.');\n    } else {\n        \/\/ Save note to localStorage.\n        \/\/ The key is the dateTime with seconds, the value is the content of the note.\n        saveNote(new Date().toLocaleString(), noteContent);\n\n        \/\/ Reset variables and update UI.\n        noteContent = '';\n        renderNotes(getAllNotes());\n        noteTextarea.val('');\n        instructions.text('Note saved successfully.');\n    }\n\n})\n\n\nnotesList.on('click', function(e) {\n    e.preventDefault();\n    var target = $(e.target);\n\n    \/\/ Listen to the selected note.\n    if (target.hasClass('listen-note')) {\n        var content = target.closest('.note').find('.content').text();\n        readOutLoud(content);\n    }\n\n    \/\/ Delete note.\n    if (target.hasClass('delete-note')) {\n        var dateTime = target.siblings('.date').text();\n        deleteNote(dateTime);\n        target.closest('.note').remove();\n    }\n});\n\n\n\n\/*-----------------------------\n      Speech Synthesis \n------------------------------*\/\n\nfunction readOutLoud(message) {\n    var speech = new SpeechSynthesisUtterance();\n\n    \/\/ Set the text and voice attributes.\n    speech.text = message;\n    speech.volume = 1;\n    speech.rate = 1;\n    speech.pitch = 3;\n\n    window.speechSynthesis.speak(speech);\n}\n\n\n\n\/*-----------------------------\n      Helper Functions \n------------------------------*\/\n\nfunction renderNotes(notes) {\n    var html = '';\n    if (notes.length) {\n        notes.forEach(function(note) {\n            html += `&lt;li class=&quot;note&quot;&gt;\n        &lt;p class=&quot;header&quot;&gt;\n          &lt;span class=&quot;date&quot;&gt;${note.date}&lt;\/span&gt;\n          &lt;a href=&quot;#&quot; class=&quot;listen-note&quot; title=&quot;Listen to Note&quot;&gt;Listen to Note&lt;\/a&gt;\n          &lt;a href=&quot;#&quot; class=&quot;delete-note&quot; title=&quot;Delete&quot;&gt;Delete&lt;\/a&gt;\n        &lt;\/p&gt;\n        &lt;p class=&quot;content&quot;&gt;${note.content}&lt;\/p&gt;\n      &lt;\/li&gt;`;\n        });\n    } else {\n        html = '&lt;li&gt;&lt;p class=&quot;content&quot;&gt;You don\\'t have any notes yet.&lt;\/p&gt;&lt;\/li&gt;';\n    }\n    notesList.html(html);\n}\n\n\nfunction saveNote(dateTime, content) {\n    localStorage.setItem('note-' + dateTime, content);\n}\n\n\nfunction getAllNotes() {\n    var notes = [];\n    var key;\n    for (var i = 0; i &lt; localStorage.length; i++) {\n        key = localStorage.key(i);\n\n        if (key.substring(0, 5) == 'note-') {\n            notes.push({\n                date: key.replace('note-', ''),\n                content: localStorage.getItem(localStorage.key(i))\n            });\n        }\n    }\n    return notes;\n}\n\n\nfunction deleteNote(dateTime) {\n    localStorage.removeItem('note-' + dateTime);\n}<\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use Voice Note App?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Add A New Voice or Text Note<\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li>Click on the &#8220;Start Recognition&#8221; button and give the app permission to use your microphone, and start speaking your note (if no microphone or you don&#8217;t want to use the microphone you can type into the text box.)<\/li><li>\u200bWhen done speaking click on the &#8220;Pause Recognition&#8221; button, and then click the &#8220;Save Note&#8221; button. (if you typed your note into the text box you do not need to click on the &#8220;Pause Recognition&#8221; button, just click the &#8220;Save Note&#8221; button.)<\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Listen To Notes<\/h3>\n\n\n\n<p>Click on the &#8220;Listen to Note&#8221; link next to the date of the note that you want to listen to.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Delete Voice Notes<\/h3>\n\n\n\n<p>Click on the &#8220;Delete&#8221; link next to the date of the note that you want to delete.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Important Note<\/h2>\n\n\n\n<p>On Google Chrome, using Speech Recognition on a web page involves a server-based recognition engine. Your audio is sent to a web service for recognition processing, so it won&#8217;t work offline.<\/p>\n\n\n\n<p>Most APIs that require user permission doesn&#8217;t work on non-secure hosts. Make sure you are serving your Web Speech apps over HTTPS.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Download JavaScript Voice Note App (including images)<\/h2>\n\n\n<p><a class=\"ep_link_major\" href=\"https:\/\/github.com\/edopedia\/Voice-Note-App\" target=\"_blank\" rel=\"noopener\">Download<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>In this tutorial, you will learn how to implement Speech to Text and Text to Speech functionality using JavaScript. Basically, we will build a Voice Note-Taking App from scratch. Live Demo This app uses the Web Speech API to build a voice-powered note app to do 3 things: Take notes by using voice-to-text or keyboard &#8230; <a title=\"JavaScript Speech to Text and Text to Speech Note Taking App\" class=\"read-more\" href=\"https:\/\/www.edopedia.com\/blog\/javascript-speech-to-text-and-text-to-speech-note-taking-app\/\" aria-label=\"Read more about JavaScript Speech to Text and Text to Speech Note Taking App\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3535,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3530","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Speech to Text and Text to Speech Note Taking App<\/title>\n<meta name=\"description\" content=\"In this tutorial, you will learn how to implement Speech to Text and Text to Speech functionality using JavaScript. Basically, we will build a Voice\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/javascript-speech-to-text-and-text-to-speech-note-taking-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Speech to Text and Text to Speech Note Taking App\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, you will learn how to implement Speech to Text and Text to Speech functionality using JavaScript. Basically, we will build a Voice\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/javascript-speech-to-text-and-text-to-speech-note-taking-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-23T23:42:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-24T00:42:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/js_speech_to_text_and_tts_note_taking_app.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Speech to Text and Text to Speech Note Taking App","description":"In this tutorial, you will learn how to implement Speech to Text and Text to Speech functionality using JavaScript. Basically, we will build a Voice","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:\/\/www.edopedia.com\/blog\/javascript-speech-to-text-and-text-to-speech-note-taking-app\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Speech to Text and Text to Speech Note Taking App","og_description":"In this tutorial, you will learn how to implement Speech to Text and Text to Speech functionality using JavaScript. Basically, we will build a Voice","og_url":"https:\/\/www.edopedia.com\/blog\/javascript-speech-to-text-and-text-to-speech-note-taking-app\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-09-23T23:42:28+00:00","article_modified_time":"2022-09-24T00:42:16+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/js_speech_to_text_and_tts_note_taking_app.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/javascript-speech-to-text-and-text-to-speech-note-taking-app\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/javascript-speech-to-text-and-text-to-speech-note-taking-app\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"JavaScript Speech to Text and Text to Speech Note Taking App","datePublished":"2022-09-23T23:42:28+00:00","dateModified":"2022-09-24T00:42:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/javascript-speech-to-text-and-text-to-speech-note-taking-app\/"},"wordCount":508,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/javascript-speech-to-text-and-text-to-speech-note-taking-app\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/js_speech_to_text_and_tts_note_taking_app.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/javascript-speech-to-text-and-text-to-speech-note-taking-app\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/javascript-speech-to-text-and-text-to-speech-note-taking-app\/","url":"https:\/\/www.edopedia.com\/blog\/javascript-speech-to-text-and-text-to-speech-note-taking-app\/","name":"JavaScript Speech to Text and Text to Speech Note Taking App","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/javascript-speech-to-text-and-text-to-speech-note-taking-app\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/javascript-speech-to-text-and-text-to-speech-note-taking-app\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/js_speech_to_text_and_tts_note_taking_app.jpg","datePublished":"2022-09-23T23:42:28+00:00","dateModified":"2022-09-24T00:42:16+00:00","description":"In this tutorial, you will learn how to implement Speech to Text and Text to Speech functionality using JavaScript. Basically, we will build a Voice","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/javascript-speech-to-text-and-text-to-speech-note-taking-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/javascript-speech-to-text-and-text-to-speech-note-taking-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/javascript-speech-to-text-and-text-to-speech-note-taking-app\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/js_speech_to_text_and_tts_note_taking_app.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/js_speech_to_text_and_tts_note_taking_app.jpg","width":880,"height":495,"caption":"How to Make JavaScript Speech to Text and Text to Speech Note Taking App - Full Source Code"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/javascript-speech-to-text-and-text-to-speech-note-taking-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript Speech to Text and Text to Speech Note Taking App"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3530","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3530"}],"version-history":[{"count":5,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3530\/revisions"}],"predecessor-version":[{"id":3538,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3530\/revisions\/3538"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/3535"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}