Enhancing Sitecore Content with Azure AI Speech: Introducing Text-to-Speech Rendering

September 29th 2024

In today's digital landscape, accessibility and user engagement are more important than ever. To accommodate diverse audiences, offering content in multiple formats, including audio, is essential.

In a recent project, I built a Sitecore rendering component that leverages Azure AI Speech service to allow user to listen to Articles instead of reading them.

Since it was generic enough, I decided to share it with the community as a Sitecore package and open-source code in GitHub (Links below).

Why Add Text-to-Speech to Your Sitecore Site?

• Accessibility: Assist users with visual impairments or reading difficulties.

• User Engagement: Provide an alternative way for users to consume content.

• Multitasking Users: Cater to users who prefer listening over reading, especially on mobile devices.

Overview of the Component

This rendering component seamlessly integrates with Sitecore and Azure AI Speech services to convert one or multiple text fields into audio. Here's what it offers:

• Customizable Voices: Choose from a variety of voices offered by Azure AI Speech.

• Language Support: Support for multiple languages to cater to a global audience.

• Easy Integration: Simply add the rendering to your Sitecore presentation details and flag the renderings you want to be included in the audio. (Demo below)

• On-Demand Audio Generation: Generate audio only when the user click 'Play' icon, to reduce API consumption and $$.

  
  

Getting Started

1. Clone the Repository

   Visit the GitHub repository and clone the project to your local machine.

2. Install the Sitecore Package

   Download the Sitecore package from the 'Sitecore Packages' folder in the repository and install it using the Sitecore Installation Wizard.

3. Configure Azure AI Speech

   • Azure Subscription: Ensure you have an active Azure subscription with the AI Speech service enabled.

   • API Keys: Obtain your API keys and endpoint URL from the Azure portal.

   • Sitecore Configuration: Update Alyas.Feature.Text2Speech.config file in the App_Config folder with your API keys, endpoint and voice of your choice.

     

4. Add the Rendering to Your Site

   • Open the Presentation Details of your Sitecore item.

   • Add the "Text2SpeechPlayer" rendering to the desired placeholder.

     

   • Flag the renderings you want included in the audio using rendering parameter 'IncludeInSpeech' = true

     

How It Works

The component retrieves the specified rich text fields from the context item and sends the text to the Azure AI Speech API. The API returns an audio stream, which is then rendered on the page using an HTML5 audio player.

Customization Options

• Voice Selection: Modify the voice in the config file. If needed, add it as a setting in Sitecore CM instead.

• Language and Locale: Adjust settings to match the language of your content.

• Caching Strategies: Implement caching to improve performance and reduce API calls.

Demo

Here's a quick demo of the component in action:

Conclusion

This Text-to-Speech Rendering Component aims to make your Sitecore content more accessible and engaging.

By open-sourcing it, I hope to collaborate with the community to further enhance its features.

Check out the GitHub repository to get started, and feel free to reach out with any questions or suggestions.

Links

• GitHub Repository

• Azure AI Speech Documentation

Thank you for reading! If you found this helpful, please share it with your network.