Integration with ReadSpeaker

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¹⁾:

<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>

Additionally, one or more ReadSpeaker buttons are included in the page²⁾:

<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>

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³⁾:

<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>

In a 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)⁴⁾:

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'
});

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:

https://app-[REGION].readspeaker.com/cgi-bin/rsent?customerid=[CUSTOMER_ID]&lang=[LANGUAGE]&voice=[VOICE_TO_USE]&readid=[READ_ID]&url=

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.

¹⁾ , ²⁾ , ³⁾ , ⁴⁾

Values in square brackets [] should be replaced with your specific setup.

DokuWiki

Table of Contents

Integration with ReadSpeaker

What you intend to do

What you would normally do

What is the problem

How you can solve the problem