ReadSpeaker webReader with React

Question

ReadSpeaker webReader with React

1.2k Views Asked by Alirio Diaz At 03 March 2021 at 13:32

i try to add readspeaker webreader to my project in React. Working but only when push to edit options and pulse button play. When he read options and close, play again in webapp page and read OK. I send email to support im waiting for reply and adding the solution here...

Original Q&A

There are 1 best solutions below

**Alirio Diaz** · Answer 1 · 2021-03-03T13:32:09.810000

For websites that heavily use JS to build the website client-side, the solution is to add general: { usePost: true }. That will send the whole loaded website in base64 to Readspeaker servers instead of just sending the URL that needs to be read. Example:

public/index.html:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1"
    />
  </head>
  <body>
    <noscript>
      You Need JS
    </noscript>
    <div id="root"></div>
    <script>
      window.rsConf = { 
       params: `//cdn1.readspeaker.com/script/${ID_CUSTOMER}/webReader/webReader.js?pids=wr`,
       general: { usePost: true }
      };
    </script>
  </body>
</html>

important: window.rsConf

Component .jsx

import React, { useEffect } from "react";
import { Container } from "reactstrap";

const ReadSpeakerReader = () => {

  useEffect(() => {
    var oHead = document.getElementsByTagName('HEAD').item(0);
    var oScript= document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src=`//cdn1.readspeaker.com/script/${ID_USER}/webReader/webReader.js`;
    oHead.appendChild(oScript);
  }, [])

  return (
    <React.Fragment>
      <section className="readspeaker-button-section mt-3 mb-2">
        <Container>
          <div id="readspeaker_button1" className="rs_skip rsbtn">
            <a rel="nofollow"
               className="rsbtn_play"
               accessKey="L"
               title="Escucha esta p&aacute;gina utilizando ReadSpeaker webReader"
               href={`//app-na.readspeaker.com/cgi-bin/rsent?customerid=${ID_CUSTOMER}&amp;lang=es_co&amp;readid=main-content-privateBCI&amp;url=${encodeURIComponent( document.location.href )}`}
            >
              <span className="rsbtn_left rsimg rspart">
                <span className="rsbtn_text">
                  <span>Escuchar</span>
                </span>
              </span>
              <span className="rsbtn_right rsimg rsplay rspart"></span>
            </a>
          </div>
        </Container>
      </section>
    </React.Fragment>
  )
}

export default ReadSpeakerReader

With this your readspeaker webreader working well when your component is mounted in DOM

ReadSpeaker webReader with React

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in REACTJS

Related Questions in READSPEAKER

Trending Questions

Popular # Hahtags

Popular Questions