How to convert text-to-speech to listen to any article on blog for Shopify
Sometimes, it’s better to listen than to read. When you walk, bike, or drive, for example, it’s safer to keep your eyes focused on the world around you.
Text-to-speech (TTS) offers an alternative to listening to music, podcasts, or audiobooks. TTS can be a great way to catch up on articles you intend to read.
The below guide will helps you know how to add the feature – convert text-to-speech to listen to any article on blog for Shopify.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- In the Layout directory, click article.liquid.
- Add the below code to the end of this file.12345678910<script src="//code.responsivevoice.org/responsivevoice.js"></script><script>$('.shopifytips-listen-article').click(function(){if(responsiveVoice.isPlaying()){responsiveVoice.cancel();}else{responsiveVoice.speak('{{article.content|strip_html|escape|json}}');}});</script>
- Click Save
- Finallly, you add the below code where you want to show the control button.123<a href="javascript:void(0);" class="shopifytips-listen-article"><button><i class="fa fa-volume-up"></i> listen to article</button></a>
Attention: Make sure the jQuery library to load before the script in step 4.
