{"id":7801,"date":"2024-05-31T16:04:54","date_gmt":"2024-05-31T16:04:54","guid":{"rendered":"https:\/\/foolishdeveloper.com\/?p=7801"},"modified":"2024-05-31T16:04:56","modified_gmt":"2024-05-31T16:04:56","slug":"speech-to-text-converter-html-css-javascript","status":"publish","type":"post","link":"https:\/\/foolishdeveloper.com\/speech-to-text-converter-html-css-javascript\/","title":{"rendered":"Speech to Text Convertor Using HTML, CSS and JavaScript"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7801\" class=\"elementor elementor-7801\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-cbf9466 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"cbf9466\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e0b8576\" data-id=\"e0b8576\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4758e7c elementor-widget elementor-widget-heading\" data-id=\"4758e7c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Introduction :<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b17cb56 elementor-widget elementor-widget-text-editor\" data-id=\"b17cb56\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The Speech to Text Converter project is a web-based application designed to transform spoken language into written text. Utilizing HTML, CSS, and JavaScript, this application leverages the Web Speech API to provide a seamless speech recognition experience. The primary interface includes a text area for displaying transcriptions and a microphone button to start and stop the speech recognition process.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-293ea9b elementor-widget elementor-widget-heading\" data-id=\"293ea9b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Explanation :<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a9ce526 elementor-widget elementor-widget-text-editor\" data-id=\"a9ce526\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>HTML Structure<\/h4><p>The HTML structure of the Speech to Text Converter includes several key components:<\/p><ol><li><strong>Title<\/strong>: The <code>&lt;title&gt;<\/code> element sets the title of the webpage, which appears on the browser tab.<\/li><li><strong>Heading<\/strong>: An <code>&lt;h1&gt;<\/code> element provides the main title of the page, &#8220;Speech to Text Converter,&#8221; making it clear to the user what the application does.<\/li><li><strong>Wrapper Div<\/strong>: A <code>&lt;div&gt;<\/code> element with the ID <code>wrapper<\/code> contains a <code>&lt;textarea&gt;<\/code> where the transcribed text will be displayed. This textarea is styled to appear as a large box suitable for displaying long text.<\/li><li><strong>Container Div<\/strong>: Another <code>&lt;div&gt;<\/code> element with the class <code>container<\/code> holds the interactive elements, such as the microphone button (<code>&lt;img&gt;<\/code> element) and an instructional text (<code>&lt;span&gt;<\/code> element). This container is centrally positioned and styled to provide a user-friendly interface.<\/li><\/ol><h4>CSS Styling<\/h4><p>The CSS styles applied to the HTML elements enhance the visual appeal and usability of the application:<\/p><ol><li><strong>Body Styling<\/strong>: The background color of the body is set to a light gray (<code>#dbdbdb<\/code>), providing a neutral and calming background.<\/li><li><strong>Container Positioning<\/strong>: The container is centrally aligned and given a high z-index to ensure it stays on top of other elements. Its opacity is set for a subtle visual effect.<\/li><li><strong>Heading Styling<\/strong>: The heading uses a sans-serif font and has some opacity to blend softly with the background.<\/li><li><strong>Play Button<\/strong>: The microphone button (<code>.playButton<\/code>) is styled with specific dimensions and a hover effect that adds a box shadow, making it visually responsive to user interaction.<\/li><li><strong>Textarea Styling<\/strong>: The textarea is styled with ample padding and a light background color to ensure text readability. It also has rounded corners and is made non-resizable to maintain consistent layout.<\/li><li><strong>Instruction Text<\/strong>: This text is styled with a clear, sans-serif font for easy readability.<\/li><\/ol><h4>JavaScript Logic<\/h4><p>The JavaScript file contains the core functionality of the speech recognition process:<\/p><ol><li><strong>Initialization<\/strong>: Upon loading the page, the <code>speechToTextConversion<\/code> function initializes the speech recognition service. This function sets up the speech recognition object from the Web Speech API, configuring it for continuous recognition in English (India).<\/li><li><strong>Microphone Button<\/strong>: The microphone button is set up with an <code>onclick<\/code> event handler that toggles the speech recognition on and off. When the button is clicked:<ul><li>If recognition is not started, the button image changes to indicate recording, and the recognition service starts.<\/li><li>If recognition is already started, the button image reverts to its original state, and the recognition service stops.<\/li><\/ul><\/li><li><strong>Handling Recognition Results<\/strong>: The <code>onresult<\/code> event handler processes the speech recognition results:<ul><li>It captures the transcribed text from the speech recognition event and updates the textarea with this text.<\/li><li>The confidence level of the recognition result is logged to the console for debugging purposes.<\/li><\/ul><\/li><li><strong>Error Handling<\/strong>:<ul><li>The <code>onnomatch<\/code> event handler displays a message in the textarea if the speech is not recognized.<\/li><li>The <code>onerror<\/code> event handler displays an error message in the textarea if an error occurs during recognition.<\/li><\/ul><\/li><\/ol><h3>Purpose of Functions<\/h3><ul><li><strong>speechToTextConversion Function<\/strong>: This function initializes the speech recognition settings and defines the behavior for starting and stopping the recognition process.<\/li><li><strong>Microphone Button Event Handler<\/strong>: This function toggles the state of the microphone button, switching between starting and stopping the speech recognition process.<\/li><li><strong>onresult Event Handler<\/strong>: This function handles the results from the speech recognition service, updating the textarea with the transcribed text and logging the confidence level.<\/li><li><strong>onnomatch Event Handler<\/strong>: This function provides user feedback when the speech input is not recognized.<\/li><li><strong>onerror Event Handler<\/strong>: This function provides user feedback in case of errors during the speech recognition process.<\/li><\/ul><h3>Conclusion<\/h3><p>The Speech to Text Converter project combines HTML, CSS, and JavaScript to create a functional and visually appealing application that converts spoken language into text. By utilizing the Web Speech API, it offers a modern and interactive experience for users, making speech recognition accessible through a simple web interface. This project can serve as a foundation for more advanced applications or be extended with additional features such as language selection, improved error handling, and integration with other services.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f14c150 elementor-widget elementor-widget-heading\" data-id=\"f14c150\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">SOURCE CODE:<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-af30ad0 elementor-widget elementor-widget-heading\" data-id=\"af30ad0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">HTML (Index.html)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f9128e elementor-widget elementor-widget-code-highlight\" data-id=\"2f9128e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia  word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html \">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><title>Speech to Text<\/title>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\t<h1>Speech to Text Converter<\/h1>\r\n\t<div id=\"wrapper\">\r\n\r\n\t\t\t<textarea id=\"text\" name=\"text\" rows=\"4\" style=\"overflow: hidden;height: 160px\"><\/textarea>\r\n\r\n\t<\/div>\r\n\r\n\t<div class=\"container\">\r\n\t\t<br><br><br>\r\n\t\t<img decoding=\"async\" id=\"playButton\" class=\"playButton\" src=\"mic.png\">\r\n\t\t<br>\r\n\t\t<span class=\"instruction\">\r\n\t\t\tClick on the mic to start recording\r\n\t\t<\/span>\r\n\t<\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-abb84d6 elementor-widget elementor-widget-heading\" data-id=\"abb84d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CSS (style.css)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5e4d937 elementor-widget elementor-widget-code-highlight\" data-id=\"5e4d937\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia  word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css \">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>body {\r\n\tbackground-color: #dbdbdb;\r\n\r\n}\r\n\r\n.container {\r\n\tposition: block;\r\n\tz-index: 3;\r\n\ttop: 40%;\r\n\tleft: 5%;\r\n\topacity: 1;\r\n\r\n}\r\n\r\nh1 {\r\n\tmargin-top: 3rem;\r\n\tfont-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n\topacity: .8;\r\n}\r\n\r\n.playButton {\r\n\tposition: inline;\r\n\theight: 70px;\r\n\twidth: 70px;\r\n}\r\n\r\n.playButton:hover {\r\n\tbox-shadow: 0 6px 20px 0 #00ff15;\r\n}\r\n\r\n.submitButton {\r\n\tposition: relative;\r\n\twidth: 30%;\r\n\tborder: none;\r\n\tfont-size: 28px;\r\n\tcolor: black;\r\n\tpadding: 10px;\r\n\twidth: 1rem;\r\n\ttext-align: center;\r\n\t-webkit-transition-duration: 0.4s;\r\n\ttransition-duration: 0.4s;\r\n\ttext-decoration: none;\r\n\toverflow: hidden;\r\n\tcursor: pointer;\r\n\tborder-radius: 10px 10px 10px 10px;\r\n\r\n}\r\n\r\n.submitButton:hover {\r\n\tbox-shadow: 0px 7px 1px 0px rgba(0, 0, 0, 0.0), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\r\n\r\n}\r\n\r\n.submitButton:after {\r\n\tcontent: \"\";\r\n\tdisplay: block;\r\n\tposition: absolute;\r\n\tpadding-top: 300%;\r\n\tpadding-left: 350%;\r\n\tmargin-left: -20px !important;\r\n\tmargin-top: -120%;\r\n\topacity: 0;\r\n\ttransition: all 0.8s\r\n}\r\n\r\n.submitButton:active:after {\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\topacity: 1;\r\n\ttransition: 0s;\r\n}\r\n\r\n.recogText {\r\n\tposition: block;\r\n\ttop: 70%;\r\n\tleft: 5%;\r\n\tright: 5%;\r\n\theight: 100%;\r\n\twidth: 99.3%;\r\n\tfont-size: 25px;\r\n}\r\n\r\n\r\n#paper {\r\n\tfont-size: 20px;\r\n\tz-index: 2;\r\n}\r\n\r\n#margin {\r\n\tmargin-left: 12px;\r\n\tmargin-bottom: 20px;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\t-o-user-select: none;\r\n\tuser-select: none;\r\n}\r\n\r\n#text {\r\n\twidth: 500px;\r\n\theight: 1000px;\r\n\toverflow: hidden;\r\n\tbackground-color: #cdcdcd;\r\n\tborder: none;\r\n\tcolor: #222;\r\n\tfont-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n\tfont-weight: normal;\r\n\tfont-size: 24px;\r\n\tresize: none;\r\n\tline-height: 40px;\r\n\tpadding-left: 50px;\r\n\tpadding-right: 50px;\r\n\tpadding-top: 20px;\r\n\tpadding-bottom: 120px;\r\n\t-webkit-border-radius: 12px;\r\n\tborder-radius: 12px;\r\n\tmargin-top: 5rem;\r\n}\r\n\r\n#title {\r\n\tbackground-color: transparent;\r\n\tborder-bottom: 3px solid #FFF;\r\n\tcolor: #FFF;\r\n\tfont-size: 20px;\r\n\tfont-family: Courier, monospace;\r\n\theight: 28px;\r\n\tfont-weight: bold;\r\n\twidth: 220px;\r\n}\r\n\r\n.instruction {\r\n\tfont-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serifS;\r\n}\r\n\r\n#button {\r\n\tcursor: pointer;\r\n\tmargin-top: 20px;\r\n\tfloat: right;\r\n\theight: 40px;\r\n\tpadding-left: 24px;\r\n\tpadding-right: 24px;\r\n\tfont-family: Arial, Helvetica, sans-serif;\r\n\tfont-weight: bold;\r\n\tfont-size: 20px;\r\n\tcolor: red;\r\n\ttext-shadow: 0px -1px 0px #000000;\r\n\t-webkit-border-radius: 8px;\r\n\tborder-radius: 8px;\r\n\tborder-top: 1px solid #FFF;\r\n\t-webkit-box-shadow: 0px 2px 14px #000;\r\n\tbox-shadow: 0px 2px 14px #000;\r\n\tbackground-color: #62add6;\r\n\tbackground-image: url(https:\/\/static.tumblr.com\/maopbtg\/ZHLmgtok7\/button.png);\r\n\tbackground-repeat: repeat-x;\r\n}\r\n\r\n#button:active {\r\n\tzoom: 1;\r\n\tfilter: alpha(opacity=80);\r\n\topacity: 0.8;\r\n}\r\n\r\n#button:focus {\r\n\tzoom: 1;\r\n\tfilter: alpha(opacity=80);\r\n\topacity: 0.8;\r\n}\r\n\r\n#wrapper {\r\n\twidth: 700px;\r\n\theight: auto;\r\n\tmargin-left: auto;\r\n\tmargin-right: auto;\r\n\tmargin-top: 24px;\r\n\t\/* margin-bottom: 100px; *\/\r\n}\r\n\r\n\r\n.th {\r\n\tposition: absolute;\r\n\ttransition: transform .2s;\r\n\ttop: 200px;\r\n\tfont-family: Segoe Print;\r\n\tleft: 50px;\r\n\tcolor: yellow;\r\n\t-ms-transform: rotate(278deg);\r\n\ttransform: rotate(342deg);\r\n\ttext-shadow: 1px 3px #8CF7F2;\r\n\tfont-size: 25px;\r\n\t-webkit-animation: glow 1s ease-in-out infinite alternate;\r\n\t-moz-animation: glow 1s ease-in-out infinite alternate;\r\n\tanimation: glow 1s ease-in-out infinite alternate;\r\n\r\n}\r\n\r\n.th:hover {\r\n\r\n\ttransform: scale(1.1);\r\n\t-ms-transform: rotate(278deg);\r\n\t\/* IE 9 *\/\r\n\ttransform: rotate(350deg);\r\n\tfont-size: 40px\r\n}\r\n\r\n.blink {\r\n\tanimation: blinker 1s linear infinite;\r\n\tcolor: yellow;\r\n\tfont-size: 26px;\r\n\tfont-weight: bold;\r\n\tfont-family: cursive;\r\n}\r\n\r\n@keyframes blinker {\r\n\t50% {\r\n\t\topacity: 0;\r\n\t}\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-10061f7 elementor-widget elementor-widget-heading\" data-id=\"10061f7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">JavaScript (app.js)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e68c63 elementor-widget elementor-widget-code-highlight\" data-id=\"4e68c63\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia  word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>var i = 0;\r\n\r\n\r\nfunction speechToTextConversion() {\r\n\tvar SpeechRecognition = SpeechRecognition || webkitSpeechRecognition\r\n\r\n\tvar SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent\r\n\r\n\tvar recognition = new SpeechRecognition();\r\n\r\n\trecognition.continuous = true;\r\n\trecognition.lang = 'en-IN';\r\n\trecognition.interimResults = true;\r\n\trecognition.maxAlternatives = 1;\r\n\r\n\tvar diagnostic = document.getElementById('text');\r\n\r\n\r\n\tvar i = 0;\r\n\tvar j = 0;\r\n\tdocument.getElementById(\"playButton\").onclick = function () {\r\n\t\tif (i == 0) {\r\n\t\t\tdocument.getElementById(\"playButton\").src = \"record-button-thumb.png\";\r\n\t\t\trecognition.start();\r\n\t\t\ti = 1;\r\n\t\t}\r\n\t\telse {\r\n\t\t\tdocument.getElementById(\"playButton\").src = \"mic.png\";\r\n\t\t\trecognition.stop();\r\n\t\t\ti = 0;\r\n\t\t}\r\n\t}\r\n\trecognition.onresult = function (event) {\r\n\t\tvar last = event.results.length - 1;\r\n\t\tvar convertedText = event.results[last][0].transcript;\r\n\t\tdiagnostic.value = convertedText;\r\n\t\tconsole.log('Confidence: ' + event.results[0][0].confidence);\r\n\t}\r\n\r\n\trecognition.onnomatch = function (event) {\r\n\t\tdiagnostic.value = 'I didnt recognise that.';\r\n\t}\r\n\trecognition.onerror = function (event) {\r\n\t\tdiagnostic.value = 'Error occurred in recognition: ' + event.error;\r\n\t}\r\n};<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f02b941 elementor-widget elementor-widget-heading\" data-id=\"f02b941\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Download the resources used in this project :<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4491e06 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"4491e06\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/img.zip\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-file-download\"><\/i>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Download Resources<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-36cd964 elementor-widget elementor-widget-heading\" data-id=\"36cd964\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">OUTPUT :<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ec354a1 elementor-widget elementor-widget-image\" data-id=\"ec354a1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op-22-1024x576.png\" class=\"attachment-large size-large wp-image-7802\" alt=\"OUTPUT\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op-22-1024x576.png 1024w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op-22-300x169.png 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op-22-768x432.png 768w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op-22-800x450.png 800w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op-22-150x84.png 150w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op-22.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Introduction : The Speech to Text Converter project is a web-based application designed to transform spoken language into written text. Utilizing HTML, CSS, and JavaScript, this application leverages the Web Speech API to provide a seamless speech recognition experience. The primary interface includes a text area for displaying transcriptions and a microphone button to start [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":7803,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[41],"tags":[],"class_list":["post-7801","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript_app","entry","has-media"],"_links":{"self":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/7801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/comments?post=7801"}],"version-history":[{"count":17,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/7801\/revisions"}],"predecessor-version":[{"id":7821,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/7801\/revisions\/7821"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media\/7803"}],"wp:attachment":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media?parent=7801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/categories?post=7801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/tags?post=7801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}