🎙️ Read Aloud Web Component

"Just Read Out" – A Simple, Powerful Way to Bring Voice to Your Content!

Overview

The Read Aloud Web Component is a customizable, lightweight solution that allows you to add text-to-speech functionality to any webpage. With built-in support for the Web Speech API, it provides a seamless reading experience, highlighting words as they are read aloud.

LAUNCH DEMO

✨ Features

• 🎤 Web Speech API Integration: Uses the browser's native speech recognition capabilities.
• 📝 Customizable Text: Style your text any way you like—functionality stays intact.
• 🌍 Language Flexibility: Set the speech language through a simple lang attribute.
• 🔍 Live Word Highlighting: Automatically highlights the current word being read.
• 🌐 Cross-Browser Compatibility: Works in browsers that support the Web Speech API (Chrome, Safari, Edge, etc.).

🚀 How to Use

1. Add the custom component to your HTML:

   <read-aloud-component lang="en-US">
     <p slot="paragraph">The quick brown fox jumps over the lazy dog.</p>
     <button slot="start-btn">Start Reading</button>
   </read-aloud-component>

2. Style the component (paragraph and button) with CSS as desired.

   read-aloud-component {
     display: block;
     margin: 20px 0;
   }
   
   read-aloud-component p {
     font-size: 1.2em;
     color: #333;
   }
   
   read-aloud-component button {
     background-color: #007bff;
     color: white;
     border: none;
     border-radius: 5px;
     padding: 10px 15px;
     cursor: pointer;
     transition: background-color 0.3s ease;
   }
   
   read-aloud-component button:hover {
     background-color: #0056b3;
   }

3. Start the reading session! Click "Start Reading," and the text will be read aloud while highlighting each word.

📋 Attributes and Methods

| Attribute | Type | Description | Default Value | | ----------- | ------- | ----------------------------------------------------------- | ------------- | | lang | String | Defines the language for speech recognition (en-US, etc.) | en-US | | highlight | Boolean | Enables/disables live word highlighting | true | | voice | String | Selects the voice for speech output (native browser voices) | default | | rate | Number | Controls the speech speed (0.1 - 10) | 1 |

Available Methods

| Method | Description | Usage Example | | ----------------- | ------------------------------------- | ------------------------- | | startReading() | Starts reading the content aloud. | element.startReading() | | stopReading() | Stops the current reading session. | element.stopReading() | | pauseReading() | Pauses the speech temporarily. | element.pauseReading() | | resumeReading() | Resumes speech from the paused point. | element.resumeReading() |

🎯 Example Usage

<read-aloud-component lang="en-GB" highlight="true" rate="1.2">
  <p slot="paragraph">
    A journey of a thousand miles begins with a single step.
  </p>
  <button slot="start-btn">Read Aloud</button>
</read-aloud-component>

With this example:

• The text is read in British English (en-GB).
• Word highlighting is enabled.
• The reading speed is slightly faster than normal (rate="1.2").

🛠️ Installation

1. Include the JavaScript file in your project:

   <script src="app.js"></script>

   OR USE unpkg

   <script src="https://unpkg.com/[email protected]/app.js"></script>

You're ready to go! Simply add the component to your HTML and style it.

NPM LINK

Use Cases

• 🌍 Language Learning
  Helps learners follow along as each word is highlighted during speech, improving comprehension and pronunciation.

• 👩‍🏫 Educational Tool
  Teachers can use it on smartboards to guide students through reading, making lessons more interactive.

• 👶 Reading Practice for Kids
  Parents can add custom sentences or stories to aid children in reading development with real-time word tracking.

• 🗣️ Speech Development
  Learners can improve fluency by listening to text read aloud while following the highlighted words.

• ♿ Accessibility
  Assists individuals with reading challenges by highlighting spoken words, enhancing focus and reducing cognitive load.

EXAMPLE USING YOUR OWN TEXT

💻 Browser Support

Works on all major browsers with Web Speech API support:

• Google Chrome
• Safari
• Microsoft Edge

Enhance the accessibility of your website by making it more engaging and easier to use with the Read Aloud Web Component! 😃