Activate text-to-speech on your website for longer visitor engagelment. Use global Shopify settings to upgrade later.
Publish Insights 12 March 2022
Now Read This
People are reading much less today than they have in recent history. The way we interact with the internet has undergone dramatic change. Rather than typing keyword phrases into a search bar, many consumers ask Alexa questions.
For entertainment, viewers bypass reading in favor of streaming video. Social media that was once synonymous with chat rooms is dominated by video snippets and images.
🤓 Readership of Americans aged 15 and over dropped from roughly 28% in 2004 to about 19% in 2018. —Novellas
Blame it on the pandemic, artificial intelligence, fake news, or a new generation of adults. Reading is on the decline. So if you have a blog, you may need to make it easier to consume your content. The best way is to record videos. Most visitors rather watch those than read. Another way is to embed text-to-speech.
Talking Back
MacOS computers allow you to highlight text and hear a pretty robotic sounding reading. It’s satisfactory for proofreading—less so for engaging visitors. The best way to include audio on your website is to record podcasts. This allows you to use different voices and background music. It also provides inbound links to your website.
You may not want to devote so much time into audio recording and editing. In this case, some AI text-to-speech options can be useful. The broad price range goes from free to absurd. Higher end services include more customizations, voice options, and recognition of nuances. For example, bold text has one emphasis that differs from italic text.
At the time of this writing, there was one text-to-speech option in the Shopify marketplace for apps. It automatically reads an entire page in realtime using the default computer voice. The app programmer would benefit from considering internet audio history.
When audio and video first became available, many sites played background music or audible videos to welcome visitors. This sent them scrambling for the audio button to silence rich media. Most users prefer an option to enable audio themselves. Unexpected audio can be jarring when in a meeting, in a cubicle, or while near someone sleeping. Most site visitors prefer to click to listen when they’re ready.
First Words
It’s wise to gauge visitor response to your new feature. For this reason, beginning with a low-end solution is best. Some solutions offer a free or trial version. BingeWith [1] works on virtually all platforms, offering either free or nominal paid service. For a monthly fee, you gain color customization and a choice of male or female voice.
A programmer at BingeWith may need to perform some custom parsing to get things up and running for you. Thereafter, you click the button on each page to generate an audio mp3 file hosted on the BingeWith server. If you edit text or the recording has errors, contact BingeWith to have them clear the file. Audio quality is better than MacOS text-to-speech.
Future-Proofing
Installation is straightforward if you have access to global page headers. Add a javascript string in the page header. Then add a BingeWith placeholder on each page where you want the controller to appear.
If your site has many pages, adding a specific placeholder throughout your site sort of ties you to one vendor. If you later decide to use another speech option, replacing that string in all those pages can be tedious. You may also have some conditions where audio does not perform well. For example, reading text within long tables or programming code is not practical. On those pages, you can omit the placeholder.
Customizations like this are best handled with a bit of programming. Basically, you create a generic placeholder string that is replaced by the required string from whichever service you choose.
Modify Liquid Code
Shopify is an e-commerce platform on which sellers build custom websites based on themes. Each theme adheres to similar underlying structure based on programming code called Liquid. [2]
Before making modifications to your Shopify theme, duplicate it. Within Admin, under the lefthand navigation, choose Online Store: Themes. Click the menu for the active theme, Actions: Duplicate. Work on the duplicate and preview before activating when done.
Now you access the Liquid programming code with Actions: Edit code. Beneath the area called Sections, click to open article-template.liquid. (The name may vary according to themes. But it will have the word article and be located within Sections or Templates.)
Control these options within the schema at the bottom of the article-template page.
{
"type": "header",
"content": "Text-to-Speech"
},
{
"type": "checkbox",
"id": "enable_reader",
"label": "Enable text-to-speech",
"info": "Install 3rd-party script",
"default": false
},
{
"type": "text",
"id": "speak_blogs",
"label": "Text-to-speech blogs",
"info": "Comma-separated blog titles"
},
{
"type": "text",
"id": "reader_tag",
"label": "Text-to-speech reader code when logged in",
"info": "Tag varies by service"
},
{
"type": "select",
"id": "speech_position",
"label": "Speech control position",
"info": "For manual position, place '<!--reader-->' on each page",
"default": "manual",
"options": [
{
"value": "manual",
"label": "Manual"
},
{
"value": "title",
"label": "Below title"
},
{
"value": "body",
"label": "Above body text"
}
]
}There is an option for programmers is to inject the text-to-speech code automatically in a consistent page location, like just below the <H1> page title or just above the article.content (body). You then need to add extra code in corresponding areas within your theme.
{% comment %} // add text-to-speech component above body // {% endcomment %}
{%- assign contains_reader = false -%}{%- if article.content contains '<!--reader-->' -%}{%- assign contains_reader = true -%}{%- endif -%}
{%- if section.settings.speech_position == 'manual' and contains_reader == false -%}{%- assign no_reader = true -%}{%- endif -%}
{%- if section.settings.enable_reader and section.settings.speak_blogs contains blog.title and section.settings.reader_tag != blank -%}
{%- if no_reader or section.settings.speech_position == 'body' -%}
{{ section.settings.reader_tag }}
{%- endif -%}
{%- endif -%}As mentioned earlier, you can simply choose to manually omit the placeholder on specific pages if you do not wish to use the unless option. But in the example above, I include the no_reader variable that injects the player javascript on pages that do not have <!--reader-->.
From within the Liquid code editing environment, you may switch to Customize Theme to locate a Blog post page to access settings for enabling the feature and pasting in javascript placeholder.
Compare Speech TechnologiesBingeWith
With free or nominal cost, BingeWith is the low hanging fruit. Its two lines of code are simple to install. There are limitations to voice options but choices sound reasonably well. Some simple improvements would make the software better.
When playback time exceeds three digits, it may awkwardly wrap within the controller on some devices. The BingeWith developer should either increase the controller width, limit the decimal points, or both.
⚠️ One potential issue with pages relying on external scripts is that if those servers become unreachable, your site performance can suffer. If they shut down, your entire library of audio is lost. During the first week of April 2022, the BingeWith server stopped responding. So the extension on this site was replaced.
For better or worse, from a privacy standpoint, your audio files are publicly accessible from the BingeWith website. Users should be able to login and adjust options and privacy permissions for audio files. There are no analytics to determine usage.
BeyondWords
Offering hundreds of voices with customizations, BeyondWords is a significant step beyond its competition. Each project can include a different language, default set of voices, and other customizations.
It’s possible to build manual audio files that combine many voices, with a custom intro and outro message. In addition to publishing on your own website, you can upload audio on popular Podcast networks from Apple, Google, and Spotify.
Audio embedding can occur manually or automatically. Manual recordings may require a unique snippet of code for each article. Automated text-to-speech uses a default set of code for all pages. Edits to your text generate a new audio file that counts towards your quota.
Each BeyondWords pricing tier includes analytics and an RSS feeder option for automatic updates. Initial configuration requires light programming skills for automation. Onboarding is available at custom-quote enterprise level. A WordPress plugin is available but the site can read virtually any valid RSS feed.
The company charges by monthly character count. The free option has a 30,000 character limit. At the time of this writing, a $25 monthly subscription increases your non-cumulative character limit to 500,000 and 2 projects. That’s about a hundred pages averaging 1000 words each.
The next subscription rate takes a significant jump to 4 million characters and 5 projects. Save 10 percent with annual subscription.
There is an option other than waiting for your monthly quota to reset. When you’re nearing your limit, buy Boosters of 1 million characters as a supplemental $50 monthly subscription. BeyondWords automatically credits remaining characters to maintain your original monthly renewal date.
DIY
If you’re not afraid of a little programming and are happy with a basic robotic voice, you can follow directions at hongkiat.com to add text-to-speach on your site for free. Other commercial options are available within references below.
