DokuWiki

Site Tools

Trace:
tutorials:readspeaker

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
tutorials:readspeaker [2022/10/28 18:58] – [What you would normally do] joaosaraivatutorials:readspeaker [2026/03/27 17:24] (current) – external edit 127.0.0.1
Line 1: Line 1:
 +====== Integration with ReadSpeaker ======
 +
 +[[https://www.readspeaker.com|ReadSpeaker]] is a web browser-oriented component that performs text-to-speech, taking HTML content and reading it aloud in a natural-sounding voice, but without the need for any manual (human) processing of content. This effectively allows users to have their web browser read web pages to them, making this component very useful for reading- or vision-impaired users.
 +
 +===== What you intend to do =====
 +
 +You intend to have ReadSpeaker read HTML content protected by Paperview. The content to be read should be the real Paperview-protected content, and not the typical gibberish that is initially rendered in lieu of that protected content.
 +
 +===== What you would normally do =====
 +
 +ReadSpeaker is typically included in a web page by including a small script inside the ''head'' section, right before the closing tag((Values in square brackets [] should be replaced with your specific setup.)):
 +<code html>
 +<head>
 +  ...
 +  <script src="https://cdn-na.readspeaker.com/script/[CUSTOMER_ID]/webReader/webReader.js?pids=wr" type="text/javascript" id="rs_req_Init"></script>
 +</head>
 +</code>
 +
 +Additionally, one or more ReadSpeaker buttons are included in the page((Values in square brackets [] should be replaced with your specific setup.)):
 +<code html>
 +<div id="readspeaker_button1" class="rs_skip rsbtn rs_preserve">
 +  <a rel="nofollow" class="rsbtn_play" accesskey="L" title="Listen to this page using ReadSpeaker webReader" href="https://app-na.readspeaker.com/cgi-bin/rsent?customerid=[CUSTOMER_ID]&amp;lang=en_us&amp;voice=Ashley&amp;readid=[READ_ID]&amp;url=[ENCODED_URL]">
 +    <span class="rsbtn_left rsimg rspart"><span class="rsbtn_text"><span>Listen</span></span></span>
 +    <span class="rsbtn_right rsimg rsplay rspart"></span>
 +  </a>
 +</div>
 +</code>
 +
 +Finally, the content to be read should be included in the page, in an HTML element accessible via the ''READ_ID'' id, like in the following snippet((Values in square brackets [] should be replaced with your specific setup.)):
 +<code html>
 +<div id="[READ_ID]">
 +  <!-- start of Paperview article content -->
 +  <div data-paperview-seller="[PUBLISHER_ID]" data-paperview-publication="[PUBLICATION_ID]" data-paperview-article="[ARTICLE_ID]">
 +    txof lh68ifyitqwzi0<br />
 +    9 iizs 8 o2i g48kl<br />
 +    57mlrq
 +  </div>
 +  <script src="https://cdn.paperview.net/sandbox/paperview.v1.js" async="async"></script>
 +  <!-- end of article content -->
 +</div>
 +</code>
 +
 +In a [[https://wordpress.org|WordPress]] setup, the above HTML would be a part of the theme used, and the post content would be inserted between the ''start of Paperview article content'' and ''end of article content'' comment tags.
 +===== What is the problem =====
 +
 +Following the instructions provided by the ReadSpeaker documentation makes the component read aloud the gibberish that temporarily stands for the Paperview-protected content, not the protected content itself.
 +
 +===== How you can solve the problem =====
 +
 +Instead of adding the ReadSpeaker script via the above-mentioned manner, add the following Javascript snippet to the page (either in a ''script'' tag or an imported Javascript file)((Values in square brackets [] should be replaced with your specific setup.)):
 +<code javascript>
 +window.addEventListener("paperview::content_replaced", function(_event) {
 +  window.rsConf = {
 +    general: { usePost: true }
 +  }
 +
 +  const script = document.createElement('script')
 +  script.id = 'rs_req_Init'
 +  script.async = false
 +  script.defer = false
 +  document.head.appendChild(script)
 +
 +  script.onload = function() {
 +    ReadSpeaker.init()
 +  }
 +
 +  script.src = 'https://cdn-[REGION, e.g. "eu"].readspeaker.com/script/[CUSTOMER_ID]/webReader/webReader.js?pids=wr'
 +});
 +</code>
 +If possible, this script should be included inside the ''head'' element.
 +
 +Add the ReadSpeaker buttons in the usual manner, typically one button per piece of article content. If you're using a WordPress setup, your Paperview articles will typically have a single piece of HTML, and so you would only need to add one ReadSpeaker button.
 +However, you will need to adjust the URL in the ''href'' attribute of each button's HTML anchor element, according to the following template:
 +<code html>
 +https://app-[REGION].readspeaker.com/cgi-bin/rsent?customerid=[CUSTOMER_ID]&lang=[LANGUAGE]&voice=[VOICE_TO_USE]&readid=[READ_ID]&url=
 +</code>
 +
 +The values to include in the placeholders (with square brackets) of the above URLs are the following:
 +  * **REGION** is the geographical region closest to where your article readers are expected to be. Examples include ''eu'' and ''na'' (Europe and North America, respectively).
 +  * **CUSTOMER_ID** (**customerid** parameter) is your customer ID in the ReadSpeaker system.
 +  * **LANGUAGE** (**lang** parameter) is the language in which the content is written and should be read. Examples include ''en_us'' and ''pt_pt''.
 +  * **VOICE_TO_USE** (**voice** parameter) depends on the value of the **lang** parameter (e.g., ''Ashley'' for English, ''Tiago'' for Portuguese).
 +  * **READ_ID** (**readid** parameter) is the ID of the HTML element that contains the content to be read.
 +
 +After this, you should be able to have ReadSpeaker read aloud the Paperview-protected content of your articles. 8-)