{"id":20804322,"url":"https://github.com/yashrajbharti/read-out","last_synced_at":"2026-02-11T19:31:26.478Z","repository":{"id":263067983,"uuid":"862891494","full_name":"yashrajbharti/read-out","owner":"yashrajbharti","description":"Reads out what you speak. Annotates where you are at. 📖 NPM: https://www.npmjs.com/package/read-aloud-component","archived":false,"fork":false,"pushed_at":"2024-09-26T17:05:36.000Z","size":31,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-08T08:26:01.234Z","etag":null,"topics":["npm","web-components","webspeech-api"],"latest_commit_sha":null,"homepage":"https://yashrajbharti.github.io/read-out/demos/example.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yashrajbharti.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-09-25T11:12:36.000Z","updated_at":"2025-02-09T17:16:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"035ccba6-76fc-460f-90ea-1fa49b94d9f4","html_url":"https://github.com/yashrajbharti/read-out","commit_stats":null,"previous_names":["yashrajbharti/read-out"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yashrajbharti/read-out","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yashrajbharti%2Fread-out","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yashrajbharti%2Fread-out/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yashrajbharti%2Fread-out/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yashrajbharti%2Fread-out/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yashrajbharti","download_url":"https://codeload.github.com/yashrajbharti/read-out/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yashrajbharti%2Fread-out/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29342086,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-11T18:58:20.535Z","status":"ssl_error","status_checked_at":"2026-02-11T18:56:44.814Z","response_time":97,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["npm","web-components","webspeech-api"],"created_at":"2024-11-17T19:08:42.208Z","updated_at":"2026-02-11T19:31:26.473Z","avatar_url":"https://github.com/yashrajbharti.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎙️ **Read Aloud Web Component**\n\n### _\"Just Read Out\"_ – A Simple, Powerful Way to Bring Voice to Your Content!\n\n![Demo for read out](https://github.com/user-attachments/assets/7ae9d27f-2362-4f12-9ed2-7337b70a9e8e)\n\n## Overview\n\nThe **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.\n\n[LAUNCH DEMO](https://yashrajbharti.github.io/read-out/)\n\n---\n\n## ✨ Features\n\n- **🎤 Web Speech API Integration**: Uses the browser's native speech recognition capabilities.\n- **📝 Customizable Text**: Style your text any way you like—functionality stays intact.\n- **🌍 Language Flexibility**: Set the speech language through a simple `lang` attribute.\n- **🔍 Live Word Highlighting**: Automatically highlights the current word being read.\n- **🌐 Cross-Browser Compatibility**: Works in browsers that support the Web Speech API (Chrome, Safari, Edge, etc.).\n\n---\n\n## 🚀 How to Use\n\n1. **Add the custom component to your HTML:**\n\n   ```html\n   \u003cread-aloud-component lang=\"en-US\"\u003e\n     \u003cp slot=\"paragraph\"\u003eThe quick brown fox jumps over the lazy dog.\u003c/p\u003e\n     \u003cbutton slot=\"start-btn\"\u003eStart Reading\u003c/button\u003e\n   \u003c/read-aloud-component\u003e\n   ```\n\n2. **Style the component** (paragraph and button) with CSS as desired.\n\n   ```css\n   read-aloud-component {\n     display: block;\n     margin: 20px 0;\n   }\n\n   read-aloud-component p {\n     font-size: 1.2em;\n     color: #333;\n   }\n\n   read-aloud-component button {\n     background-color: #007bff;\n     color: white;\n     border: none;\n     border-radius: 5px;\n     padding: 10px 15px;\n     cursor: pointer;\n     transition: background-color 0.3s ease;\n   }\n\n   read-aloud-component button:hover {\n     background-color: #0056b3;\n   }\n   ```\n\n3. **Start the reading session!** Click \"Start Reading,\" and the text will be read aloud while highlighting each word.\n\n---\n\n## 📋 Attributes and Methods\n\n| Attribute   | Type    | Description                                                 | Default Value |\n| ----------- | ------- | ----------------------------------------------------------- | ------------- |\n| `lang`      | String  | Defines the language for speech recognition (`en-US`, etc.) | `en-US`       |\n| `highlight` | Boolean | Enables/disables live word highlighting                     | `true`        |\n| `voice`     | String  | Selects the voice for speech output (native browser voices) | `default`     |\n| `rate`      | Number  | Controls the speech speed (0.1 - 10)                        | `1`           |\n\n### Available Methods\n\n| Method            | Description                           | Usage Example             |\n| ----------------- | ------------------------------------- | ------------------------- |\n| `startReading()`  | Starts reading the content aloud.     | `element.startReading()`  |\n| `stopReading()`   | Stops the current reading session.    | `element.stopReading()`   |\n| `pauseReading()`  | Pauses the speech temporarily.        | `element.pauseReading()`  |\n| `resumeReading()` | Resumes speech from the paused point. | `element.resumeReading()` |\n\n---\n\n## 🎯 Example Usage\n\n```html\n\u003cread-aloud-component lang=\"en-GB\" highlight=\"true\" rate=\"1.2\"\u003e\n  \u003cp slot=\"paragraph\"\u003e\n    A journey of a thousand miles begins with a single step.\n  \u003c/p\u003e\n  \u003cbutton slot=\"start-btn\"\u003eRead Aloud\u003c/button\u003e\n\u003c/read-aloud-component\u003e\n```\n\nWith this example:\n\n- The **text is read in British English** (`en-GB`).\n- **Word highlighting** is enabled.\n- The **reading speed is slightly faster** than normal (`rate=\"1.2\"`).\n\n---\n\n## 🛠️ Installation\n\n1. Include the JavaScript file in your project:\n\n   ```html\n   \u003cscript src=\"app.js\"\u003e\u003c/script\u003e\n   ```\n\n   OR USE `unpkg`\n\n   ```html\n   \u003cscript src=\"https://unpkg.com/read-aloud-component@1.0.3/app.js\"\u003e\u003c/script\u003e\n   ```\n\nYou're ready to go! Simply add the component to your HTML and style it.\n\n#### [NPM LINK](https://www.npmjs.com/package/read-aloud-component)\n\n## Use Cases\n\n- 🌍 **Language Learning**  \n  Helps learners follow along as each word is highlighted during speech, improving comprehension and pronunciation.\n\n- 👩‍🏫 **Educational Tool**  \n  Teachers can use it on smartboards to guide students through reading, making lessons more interactive.\n\n- 👶 **Reading Practice for Kids**  \n  Parents can add custom sentences or stories to aid children in reading development with real-time word tracking.\n\n- 🗣️ **Speech Development**  \n  Learners can improve fluency by listening to text read aloud while following the highlighted words.\n\n- ♿ **Accessibility**  \n  Assists individuals with reading challenges by highlighting spoken words, enhancing focus and reducing cognitive load.\n\n#### [EXAMPLE USING YOUR OWN TEXT](https://yashrajbharti.github.io/read-out/demos/example.html)\n\n## 💻 Browser Support\n\nWorks on all major browsers with Web Speech API support:\n\n- **Google Chrome**\n- **Safari**\n- **Microsoft Edge**\n\n---\n\nEnhance the accessibility of your website by making it more engaging and easier to use with the **Read Aloud Web Component**! 😃\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyashrajbharti%2Fread-out","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyashrajbharti%2Fread-out","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyashrajbharti%2Fread-out/lists"}