{"id":16842,"date":"2020-12-02T15:00:37","date_gmt":"2020-12-02T14:00:37","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=16842"},"modified":"2020-12-02T10:13:53","modified_gmt":"2020-12-02T09:13:53","slug":"how-to-add-text-to-speech-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-text-to-speech-in-wordpress\/","title":{"rendered":"How to Add the Text to Speech Feature in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]As a website owner or administrator, it\u2019s in your interest to make your website easily available and accessible to your audience. That means, of course, ensuring that the website has a good uptime, that it loads quickly, and that it\u2019s easy to navigate. But it also means giving the visitors alternative ways of consuming the content on your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That\u2019s exactly what text-to-speech does, to the joy of many people who have problems with seeing or reading. In WordPress, however, text-to-speech isn\u2019t available out of the box, so you have to add it using a plugin.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we\u2019ll show you:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-text-to-speech\">What Is Text-to-Speech?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#why-would-you-need-text-to-speech\">Why Would You Need Text-to-Speech?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-add-text-to-speech-to-your-website\">How to Add Text-to-Speech to Your Website<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-text-to-speech\"><\/a>What Is Text-to-Speech?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"401\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/What-Is-Text-to-Speech.jpg\" class=\"attachment-full size-full\" alt=\"What Is Text-to-Speech\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/What-Is-Text-to-Speech.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/What-Is-Text-to-Speech-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/What-Is-Text-to-Speech-620x355.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Text-to-speech is the kind of technology that transfers the words as they\u2019re written on a web page into spoken word.<\/strong> What happens behind the hood of one such program is probably exponentially more complicated than the \u201cit reads from the page\u201d explanation, but it\u2019s still how most of us get to experience text-to-speech.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Text-to-speech is a common component of operating systems and even some word processors.<\/strong> It is usually bundled with other accessibility features because, at its core, text-to-speech is used to read aloud the contents of the page to those who can\u2019t do it on their own.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The opposite of text-to-speech is called speech-to-text or voice recognition.<\/strong> As its name says, it takes the words you speak, and it \u201chears\u201d and then transcribes them onto a medium.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"why-would-you-need-text-to-speech\"><\/a>Why Would You Need Text-to-Speech?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"401\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Why-Would-You-Need-Text-to-Speech.jpg\" class=\"attachment-full size-full\" alt=\"Why Would You Need Text-to-Speech\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Why-Would-You-Need-Text-to-Speech.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Why-Would-You-Need-Text-to-Speech-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Why-Would-You-Need-Text-to-Speech-620x355.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The obvious answer to this question is because some people either can\u2019t see well or can\u2019t read.<strong> If your website doesn\u2019t have text-to-speech features, you\u2019re robbing them of all of the great content you\u2019ve created, and that\u2019s not fair to either of you, right<\/strong>? You might be their favorite writer and they might be your most loyal audience member, and you can never know it just because your website didn\u2019t have enabled text-to-speech.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Okay, yes, the operating system might take care of it if you don\u2019t. But do you want to rely on its accessibility options for assisting your readers?<strong> Best be proactive and do it on your own<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There is another very neat trick writers can do with text-to-speech. If the word processor you use has a good text-to-speech feature, you can use it as one layer of proofreading. <strong>There\u2019s nothing like hearing your words being read in a strange, slightly fake voice to point out the mistakes you\u2019ve made when writing<\/strong>. So go ahead, give it a go, and see if it helps you cut down on the proofreading time.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-add-text-to-speech-to-your-website\"><\/a>How to Add Text-to-Speech to Your Website<\/h2>\n<p>[\/vc_column_text][vc_column_text]It\u2019s fairly simple to add text-to-speech to your website thanks to the <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/responsivevoice-text-to-speech\/\" target=\"_blank\" rel=\"noopener noreferrer\">ResponsiveVoice Text to Speech<\/a> plugin. You can easily find the plugin by navigating to your website\u2019s backend, going to <em><strong>Plugins &gt; Add New<\/strong><\/em>, and searching for ResponsiveVoice. After installing and activating it, the plugin will be ready to go.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"416\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/ResponsiveVoice.jpg\" class=\"attachment-full size-full\" alt=\"ResponsiveVoice\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/ResponsiveVoice.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/ResponsiveVoice-300x178.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/ResponsiveVoice-620x368.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>The plugin won\u2019t bother you with many options in the backend of your website.<\/strong> If you want to use it to add a button that will allow people to hear the contents of a whole page, simply add this shortcode to your page:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[responsivevoice_button voice=\"UK English Female\" buttontext=\"Listen to Post\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Shortcode-Insert.jpg\" class=\"attachment-full size-full\" alt=\"Shortcode Insert\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Shortcode-Insert.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Shortcode-Insert-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Shortcode-Insert-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Upon previewing or publishing, you will see a \u201clisten to post\u201d button that will, if you click on it, read the whole post for you.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Listen-to-Post-Button.jpg\" class=\"attachment-full size-full\" alt=\"Listen to Post Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Listen-to-Post-Button.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Listen-to-Post-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Listen-to-Post-Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Of course, you don\u2019t have to add the feature to a whole post.<\/strong> You can only enable text-to-voice on a certain paragraph or two using the following code:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[responsivevoice voice=\"UK English Female\" buttontext=\"Listen to this\"] A button to read only the text surrounded by these shortcodes. [\/responsivevoice]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s how it would look if you used it on your web page:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Responsive-Voice-Code.jpg\" class=\"attachment-full size-full\" alt=\"Responsive Voice Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Responsive-Voice-Code.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Responsive-Voice-Code-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Responsive-Voice-Code-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When you preview it and listen to it, you\u2019ll only hear the part of the content that\u2019s in between the text-to-voice tags. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Listen-to-This-Button.jpg\" class=\"attachment-full size-full\" alt=\"Listen to This Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Listen-to-This-Button.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Listen-to-This-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Listen-to-This-Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The plugin lets you <a href=\"https:\/\/responsivevoice.com\/wordpress-text-to-speech-plugin\/\" target=\"_blank\" rel=\"noopener noreferrer\">change several things<\/a>, including the pitch, the rate, and the volume of the voice, as well as the voice itself. <strong>The English female is the default, but you can just as easily have your Joyce narrated by an American male<\/strong>. The plugin is free in its basic version, which does more than enough, but also comes in Pro and Enterprise versions.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]The written \u2013 and spoken \u2013 word is one of the best things about being human, if not <em>the<\/em> best thing. It would be a real shame if someone was denied that enjoyment simply for a lack of education or a health or cognitive predicament.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But luckily for us who like to write \u2013 and who live off of it \u2013 and for those who like to read, there\u2019s a way around issues with reading and readability. Text-to-speech is a great innovative technology that\u2019s widely available and it\u2019s getting better by the day. So while it would be best if no one would ever need it, we sure should be glad it\u2019s there![\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>When it comes to accessibility features for WordPress, text-to-speech is one of the most important. Learn how you can easily add it to your website.<\/p>\n","protected":false},"author":9295,"featured_media":16868,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-16842","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/16842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=16842"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/16842\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/16868"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=16842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=16842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=16842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}