Enhancing story narrating experience by introducing audio in story books

[Monu2114]

Add Read-Aloud Functionality for Storybooks

Description: It would be highly beneficial to introduce a "read-aloud" feature that allows children to listen to storybooks being narrated in a natural, human-like voice. This would enhance the user experience, especially for younger audiences who may prefer or require auditory learning. The goal is to provide a more immersive, humanized storytelling experience.

Proposed Implementation:

Text-to-Speech Integration:

We can leverage a Text-to-Speech (TTS) API to convert the story text into speech. These services offer natural-sounding voices that can mimic human narration.

Voice Customization:
Users can choose between different voice types (e.g., gender, accent) to cater to different preferences and languages.
User Interface:

Add a "Read Aloud" button on the storybook interface, which, when clicked, triggers the TTS engine to start narrating the story.
Include basic playback controls (play, pause, stop) for better user control.

Performance Considerations:
Caching the audio output for frequently accessed books to minimize API calls and improve performance.
Ensuring the feature runs smoothly across all supported platforms.
Benefits:

Enhances accessibility for children with visual impairments or reading difficulties.
Provides a comforting, human-like storytelling experience.
Supports auditory learners and adds a layer of engagement to the story-reading process.

[llaske]

It could be a good idea. It's what Speak activity do so it could be interesting to have this feature on e-books.
BTW the implementation should respect two major rules of Sugarizer:

• It should work offline
• It should use only Free/Libre Open Source library/service.

[Monu2114]

Hey am fairly new to this open source. But I wanna work on this issue. And I wanna take part in gsoc 25 as well. Can I work on this ?

…

On Wed, Oct 9, 2024, 02:15 Lionel Laské ***@***.***> wrote: It could be a good idea. It's what Speak activity do so it could be interesting to have this feature on e-books. BTW the implementation should respect two major rules of Sugarizer: - It should work offline - It should use only Free/Libre Open Source library/service. — Reply to this email directly, view it on GitHub <#1666 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A33RIC5SXY5KV4P5XGIYPZDZ2Q76BAVCNFSM6AAAAABPPDFIZSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMBQG44DQMJYGY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[llaske]

@Monu2114 there is no need to ask permission to work on an issue, everyone can work on anything. See here.
There is no plan for GSoC 2025 today and there is plenty of time before the next GSoC.

[Devmoni]

@llaske
This issue has not been verified yet, even though the response seems positive.
Thanks.

[llaske]

@Devmoni it will not be a GSoC 2025 project but it's a good idea if it could be done with constraints I've mentioned above.

[Devmoni]

@Devmoni it will not be a GSoC 2025 project but it's a good idea if it could be done with constraints I've mentioned above.

Thanks for the feedback!
I’ll look into this and see how it can be implemented while considering the mentioned constraints.

[AliHassan245]

@llaske, Sir, I have been working on this issue for a while and have made significant progress.

I have addressed the requirement for offline functionality by ensuring that the solution relies only on Free/Libre Open-Source libraries and services.

For the Text-to-Speech (TTS) API integration, I have implemented a system that converts the entire story text from the iframe container into speech. Additionally, I have added a Read Aloud button to the toolbar such that clicking the button starts the speech narration, while double-clicking it stops the narration.

I would like to confirm if this approach is suitable for our use case. Also, could you please suggest an appropriate SVG icon for the Read Aloud button in the toolbar?

[Monu2114]

Dude are you targeting for GSOC ? Even i wanted to work on it...(I was the one who raised the issue). Shall we work together ?

…

On Wed, Mar 12, 2025, 00:16 Ali Hassan ***@***.***> wrote: @llaske <https://github.com/llaske>, Sir, I have been working on this issue for a while and have made significant progress. I have addressed the requirement for offline functionality by ensuring that the solution relies only on Free/Libre Open-Source libraries and services. For the Text-to-Speech (TTS) API integration, I have implemented a system that converts the entire story text from the iframe container into speech. Additionally, I have added a Read Aloud button to the toolbar such that clicking the button starts the speech narration, while double-clicking it stops the narration. I would like to confirm if this approach is suitable for our use case. Also, could you please suggest an appropriate SVG icon for the Read Aloud button in the toolbar? — Reply to this email directly, view it on GitHub <#1666 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A33RIC5CDJPX7BNIT5M6YTL2T4VR3AVCNFSM6AAAAABPPDFIZSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMJVGM4DSNRYG4> . You are receiving this because you were mentioned.Message ID: ***@***.***> [image: AliHassan245]*AliHassan245* left a comment (llaske/sugarizer#1666) <#1666 (comment)> @llaske <https://github.com/llaske>, Sir, I have been working on this issue for a while and have made significant progress. I have addressed the requirement for offline functionality by ensuring that the solution relies only on Free/Libre Open-Source libraries and services. For the Text-to-Speech (TTS) API integration, I have implemented a system that converts the entire story text from the iframe container into speech. Additionally, I have added a Read Aloud button to the toolbar such that clicking the button starts the speech narration, while double-clicking it stops the narration. I would like to confirm if this approach is suitable for our use case. Also, could you please suggest an appropriate SVG icon for the Read Aloud button in the toolbar? — Reply to this email directly, view it on GitHub <#1666 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A33RIC5CDJPX7BNIT5M6YTL2T4VR3AVCNFSM6AAAAABPPDFIZSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMJVGM4DSNRYG4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[AdityaKrSingh26]

@llaske, Sir, I have been working on this issue for a while and have made significant progress.

I have addressed the requirement for offline functionality by ensuring that the solution relies only on Free/Libre Open-Source libraries and services.

For the Text-to-Speech (TTS) API integration, I have implemented a system that converts the entire story text from the iframe container into speech. Additionally, I have added a Read Aloud button to the toolbar such that clicking the button starts the speech narration, while double-clicking it stops the narration.

I would like to confirm if this approach is suitable for our use case. Also, could you please suggest an appropriate SVG icon for the Read Aloud button in the toolbar?

@AliHassan245 One you need to keep in mind while solving this issue is that Text-to-Speech need a server side therefore it will not be able to work offline.

[AliHassan245]

@AdityaKrSingh26, I've integrated the browser’s native SpeechSynthesis API into the codebase for smooth offline functionality using a completely free/open-source approach.

[AdityaKrSingh26]

@AdityaKrSingh26, I've integrated the browser’s native SpeechSynthesis API into the codebase for smooth offline functionality using a completely free/open-source approach.

One thing to note is that Sugarizer already includes the Speak activity. However, we need something more realistic here, and the browser's SpeechSynthesis API does not provide a sufficiently natural voice for narrating children's stories.

[llaske]

@llaske, Sir, I have been working on this issue for a while and have made significant progress.

I have addressed the requirement for offline functionality by ensuring that the solution relies only on Free/Libre Open-Source libraries and services.

For the Text-to-Speech (TTS) API integration, I have implemented a system that converts the entire story text from the iframe container into speech. Additionally, I have added a Read Aloud button to the toolbar such that clicking the button starts the speech narration, while double-clicking it stops the narration.

I would like to confirm if this approach is suitable for our use case. Also, could you please suggest an appropriate SVG icon for the Read Aloud button in the toolbar?

Cool. I can't evaluate without PR.