Product Specification

The Text to Speech extension for Magento 2 offers advanced audio conversion capabilities, allowing users to transform webpage text into speech. This feature-rich tool primarily focuses on frontend audio control, offering a highly customizable experience for users.

It empowers users to have precise control over the generated speech, allowing them to adjust the volume to ensure optimal clarity, fine-tune the pitch according to their preferences and set the speech rate. These intuitive settings enable users to customize their unique needs and preferences, making it a highly versatile tool that can be seamlessly integrated into their online shopping experience. This high degree of audio customization not only enhances the overall accessibility of the online store but also significantly improves the user experience, ensuring that it caters to a wide range of customer requirements.

The flexibility of element identifier is a key aspect of the Text to Speech extension for Magento 2, further extending its user-friendly and adaptable design. This flexibility means that wherever the Text to Speech (TTS) feature is to be implemented on the frontend, administrators have the freedom to specify which webpage elements, including CMS pages and product details pages, they want to be converted to speech. This level of control allows for a highly tailored user experience, as different online stores may have varying content structures. The extension ensures that users have a fully auditory experience when browsing through CMS pages and product details. This capability adds an extra layer of versatility to the extension, making it a valuable tool for e-commerce businesses looking to enhance their accessibility and user engagement.This extension has Hyvä theme support which is a responsive and lightning-fast Magento 2 theme.

In the backend, the webpage text into speech feature is specifically designed for creating audio from description and short description elements, but it does not include audio customization options. This functionality provides administrators with a convenient way to ensure that the audio output accurately reflects the content, contributing to a more seamless and efficient management of audio content generation. This, in turn, enhances the efficiency of managing audio content within the system, even though advanced audio customization features are not available in the backend.

The versatility in audio customization offered by the Text to Speech extension for Magento 2 is a pivotal feature that significantly enhances the overall accessibility and user experience for online shoppers. This level of customization can lead to higher customer satisfaction and, potentially, increased sales, as customers can have a more enjoyable and accessible shopping experience

Features

Certainly, here is a comprehensive list of the features included in the Text to Speech extension

1. Webpage Text to Speech Conversion: This extension facilitates the conversion of webpage text into speech, allowing users to enjoy content through audio playback.

2. Frontend Audio Customization: The customization of audio output is specifically designed for the frontend of your website. This empowers users to tailor the generated speech to their preferences. Here are the customizable aspects of the audio control:

  • Volume Control: You can easily adjust the volume of the generated speech. This is particularly useful for ensuring that the audio is clear and audible without being too loud or too quiet.
  • Pitch Adjustment: Fine-tuning the pitch of the speech allows you to make it sound more natural and appealing to the listener. This feature is especially beneficial for maintaining a consistent brand voice or ensuring that the speech aligns with your website's tone.
  • Speech Rate: The extension allows you to control the speed at which the text is converted into speech. You can slow it down for a more deliberate and understandable pace or speed it up to cover more content in a shorter time. 

3.Improved Accessibility: By offering text-to-speech functionality, you're making your website more accessible to a wider range of users. This is particularly beneficial for individuals with visual impairments, as it enables them to access your content through audio. It also benefits users who prefer to listen rather than read, enhancing their experience on your website.

4. Enhanced User Experience: The ability to customize audio output ensures that the TTS feature seamlessly integrates with your website's design and content. This, in turn, enhances the overall user experience. Visitors can engage with your site in a way that suits their preferences, whether they choose to read or listen to the content.

5. Admin Preview Functionality: This feature is exclusively designed for administrators, offering a comprehensive preview capability for both description and short description within the product edit page. Administrators can leverage this feature to ensure the text-to-speech (TTS) function aligns perfectly with their content.

6.Hyva theme compatible: Hyvä themes is a sane alternative for headless/PWA solutions, using the PHP-templating system that is built into Magento. This extension is compatible with hyva theme. 

Admin Panel Configuration

Stores -> Configuration -> Pits Extensions -> Text to Speech

Figure 1.a - Admin panel configuration
Figure 1.b – Element Identifier for Description in Product Detail Page

Figure 1.a displays the admin configurations of the extension, which specifies location or placement of the Text to Speech (TTS) feature. The fields are: 

Module Enable – Enable / Disable module.

Element Identifiers – Specify the position required to activate the Text to Speech (TTS) functionality on the website's frontend (Figure 1.b). It is flexible for frontend integration, allowing for seamless adaptation to your website's layout and structure. Additionally, multiple identifiers can be added, granting you granular control over which elements are converted into speech, resulting in a highly customizable and accessible user experience.

How It Works in Frontend

When customers navigate to a product page, they can click a speaker icon to access an TTS feature, enabling them to listen to the product's content. This provides an alternative way to engage with the information, enhancing the user experience. It caters to different preferences and accessibility needs, making the product details more accessible.

Figure 2 – Product details page TTS feature for description
Figure 2.1 (Hyva) – Product details page TTS feature for description
Figure 3 – Product details page TTS feature for short description
Figure 3.1 (Hyva) – Product details page TTS feature for short description
Figure 4 – Audio control interface
Figure 4.1 (Hyva) – Audio control interface
Figure 5 – Settings - Audio control interface
Figure 5.1 (Hyva) – Settings - Audio control interface

In Figure 4, There is a symbol representing "Pause audio" which, when clicked, changes to "Resume audio" allowing users to switch between pausing and resuming audio playback seamlessly.

Furthermore, when user click the settings, users have the option to fine-tune their audio experience with customizable settings. They can adjust parameters such as playback rate, pitch, and volume to suit their personal preferences and requirements, giving them control over how the audio is heard (Figure 5). There is a "cancel audio" function indicated by an 'X' sign. This function likely allows users to terminate audio playback completely.

In addition, the Text-to-Speech (TTS) feature can be seamlessly integrated into CMS pages (Figure 6) by including the unique element identifier in the admin configurations. This customization allows for the dynamic conversion of text content on these pages into spoken words, enhancing accessibility and user experience. By specifying the element identifier in the admin settings, administrators can easily enable TTS for specific content areas, making their Magento 2 website more inclusive and user-friendly. This feature greatly benefits users those who prefer auditory interactions with the site.

Figure 6 – CMS Page TTS feature
Figure 6.1 (Hyva) – CMS Page TTS feature

How It Works in Backend

When administrators navigate to a product edit page and click on the content tab, this action triggers the addition of a preview button next to the save button. Within the preview button, options for reading description and short description are available. In addition, it has controls for pausing, resuming, and cancelling audio playback. The audio playback controls become active only when the reading description or short description options are clicked, providing administrators with on-demand control over the audio preview. It's important to note that there are no additional customization controls for audio in the Admin Panel beyond the features mentioned above.

Figure 7 – Product edit page before content tab is clicked
Figure 8 – Product edit page after content tab is clicked
Figure 9 – Product edit page admin preview options
Figure 10 – Preview options when read description or read short description is clicked.

In Figure 10, the Pause audio toggles to resume when audio is paused and vice versa. Here are the options available in admin preview.

  • Read Description: Clicking this option initiates the audio playback of the product description. It allows administrators to listen to the description to ensure it aligns perfectly with their content.
  • Read Short Description: Selecting this option triggers the audio playback of the product's short description. This provides administrators with an auditory preview of the short description's content.
  • Pause Audio: This control allows administrators to temporarily halt the audio playback. Pausing the audio is useful when they need to briefly interrupt the playback to discuss or make changes.
  • Resume Audio: Clicking this control resumes audio playback from where it was paused, ensuring that administrators can continue reviewing the content seamlessly.
  • Cancel Audio: The Cancel Audio option stops the audio playback entirely. Administrators can use this if they wish to end the audio preview and make further adjustments to the product content.

Limitation 

Resume after Pause is not supported in Android devices.

Installation Requirements

Magento 2.3.0 to 2.4.6-p4

Installation Steps 

To install the Text to Speech module, follow the steps below. 

  • Download the module/extension and unzip it.
  • Access your web server directories and upload the content of the folder into
    app/code/Pits/VoiceSearch/ directory.
  • Run the following commands to complete the installation.
    • Enable the module - php bin/magento module:enable
    • Update of the database - php bin/magento setup:upgrade
    • Generate and pre-compile classes - php bin/magento setup:di:compile
    • Deploy static files - php bin/magento setup:static-content:deploy

Supported Languages

English, German, French, Italian, Spanish

Change Log / Release Notes

• Version: 1.0.1: February, 2024

- Hyvä Theme compatibility

• Version: 1.0.0: October, 2023

- Initial version

Support

If you have questions, use our contact form at webshopextension.com or email at support@webshopextension.com