<!DOCTYPE html>
<html>
<head>
    <title>Speech to Text</title>
    <!-- CSS styles are defined in the head section -->
</head>
<body>
    <!-- Content of the webpage is in the body section -->
</body>
</html>
  • This section defines the basic structure of an HTML document, including the document type, <html>, <head>, and <body> elements.

Segment 2: CSS Styles

<style>
    /* CSS styles for the entire page */
</style>
  • Inside the <style> tags, you define the CSS styles for your webpage, which will affect how elements are displayed.

Segment 3: Body Styles

body {
    /* CSS styles for the body element */
}
  • These styles affect the entire webpage's body. They center the content vertically and horizontally on the page, set the font to Arial, and reset margin and padding to zero.

Segment 4: Container Styles

#container {
    /* Styles for the container div */
}
  • These styles are applied to a <div> element with the ID "container." They set the background color to light pink, add rounded corners with a border radius, provide padding, apply a subtle box shadow, and center text within the container.

Segment 5: Paragraph Styles

#p1 {
    /* Styles for a paragraph with the ID "p1" */
}
  • These styles are applied to a <p> element with the ID "p1." They set the font size and create some bottom margin for spacing.

Segment 6: Microphone Icon Styles

#speaker-icon {
    /* Styles for the microphone icon image */
}
  • These styles are applied to an <img> element with the ID "speaker-icon." They define the width, height, cursor (hand pointer for interactivity), and a scaling effect on hover.

Segment 7: Button Styles

button {
    /* Styles for all buttons on the page */
}
  • These styles are applied to all <button> elements. They define the button's background color, text color, padding, border radius, cursor (hand pointer for interactivity), font size, and a background color change on hover.

Segment 8: JavaScript Function

function startSpeechRecognition() {
    // JavaScript code for starting speech recognition
}
  • This JavaScript function, startSpeechRecognition(), is defined. It is responsible for initiating speech recognition when called.

Segment 9: Speech Recognition Setup

var SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;
var recognition = new SpeechRecognition();
  • This code sets up speech recognition using the SpeechRecognition API. It checks for browser-specific prefixes, like webkit, for compatibility.

Segment 10: Speech Recognition Event Handlers

recognition.onstart = function() {
    // Code to run when speech recognition starts
};
recognition.onresult = function(event) {
    // Code to run when speech recognition results are available
};
  • These event handlers define what happens when speech recognition starts (onstart) and when results are available (onresult).

Segment 11: HTML Content

<div id="container">
    <p id='p1'></p>
    <button onclick='startSpeechRecognition()'>Start Speaking</button>
</div>
  • This section contains the actual content of the webpage. It includes a container <div>, a <p> element with the ID "p1" for displaying speech recognition results, and a button that triggers the startSpeechRecognition() function when clicked.

🟩 Complete code

None
None

🟩 Output

None