How to ignore a particular `
` while using Responsive Speech API for Text-To-Speech

Question

I am using the ResponsiveSpeech API and I have incorporated this plugin in my sample working application.

Now if you will observe here that the plugin is correctly speaking the given article under the <div id="row_view"> container. The problem that I am encountering is that I wanted to ignore the div id="googleadframe" style="border: 0pt none;">container. The plugin will speak the text inside the frame and I want to ignore that text. Has anyone who has used this API been able to do this successfully?

I have done research on their API and tried to find examples but I was not able to do so. Any help would be appreciated. Here is my code for sample reference:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>TestingOnlyDemo</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://code.responsivevoice.org/responsivevoice.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            disableSourceEdit();
        });

        function speak(obj) {

                $("#listenBtn").hide();
                $("#speechoperation").show();
                responsiveVoice.speak($('#row_view').text(), "UK English Female");
        };

        function pause() {
            responsiveVoice.pause();
        };

        function resume() {
            responsiveVoice.resume();
        };

        function stop() {
            $("#listenBtn").show();
            $("#speechoperation").hide();
            responsiveVoice.cancel();
        };
    </script>
</head>
<body>
    <center>
        <div>
            <hgroup>
                <h2>Text To Speech Application Demo</h2>
            </hgroup>

            <div class="article_body" id="row_view">
                <div id="body"><p>This article includes definition, types of articles – a, an, the.There are example sentences.</p></div>
                <div id="googleadframe" style="border: 0pt none;"><iframe id="google_ads_iframe_/1055314/LM_MF_WAP_ePaper_Interstitial_0" title="3rd party ad content" name="google_ads_iframe_/1055314/LM_MF_WAP_ePaper_Interstitial_0" width="30" height="25" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" srcdoc="" data-google-container-id="3" style="border: 0px; vertical-align: bottom;" data-load-complete="true">HERE IS THE IFRAME THAT WE NEED TO HIDE</iframe></div>
                <div>The definite article is the word the. It limits the meaning of a noun to one particular thing.</div>
            </div>
            <div class="articulate-area">
                <button class="btn btn-primary" id="listenBtn" onclick="speak('article')">Listen</button>
                <span id="speechoperation" style="display:none">
                    <button class="btn btn-primary" onclick="pause()">Pause</button>
                    <button class="btn btn-primary" onclick="resume()">Resume</button>
                    <button class="btn btn-primary" onclick="stop()">Stop</button>
                </span>
            </div>
        </div>
    </center>
</body>
</html>

NOTE: I cannot change the HTML structure of the View. I need a way to ignore the iframe div tag when the speak operation is underway. Adding any div element wont help me to solve this problem

Thanks in advance!

score 1 · Accepted Answer · answered Jul 10 '19 at 22:19

Instead of speaking the entire contents of #row_view, speak the contents of every child of #row_view that isn't the ad frame:

responsiveVoice.speak($('#row_view > :not(#googleadframe)').text(), "UK English Female");

Note that this will only grab text from child elements of #row_view, not text directly inside it.

<div class="article_body" id="row_view">
  ********THIS TEXT WILL NOT BE SPOKEN********
  <div id="body">
    <p>But this will.</p>
  </div>
  <div id="googleadframe" style="border: 0pt none;">Nothing in here</div>
  <div>Back to speaking</div>
</div>

I had to tweak it a little bit for my case to work but this definitely did help out. Thanks — Rahul Sharma, Jul 12 '19 at 08:26

Satish Patil · Answer 2 · 2019-07-10T18:19:43.780

<!DOCTYPE html>

 <html>
  <head>
<meta name="viewport" content="width=device-width" />
<title>TestingOnlyDemo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.responsivevoice.org/responsivevoice.js"> 
 </script>
 <script type="text/javascript">



    function speak(obj) {
       $("#listenBtn").hide();
        $("#speechoperation").show();

        responsiveVoice.speak($(".speak").text(), "UK English Female");
    };

    function pause() {
        responsiveVoice.pause();
    };

    function resume() {
        responsiveVoice.resume();
    };

    function stop() {
        $("#listenBtn").show();
        $("#speechoperation").hide();
        responsiveVoice.cancel();
    };
</script>
 </head>
  <body>
      <center>
       <div>
                <hgroup>
                  <h2>Text To Speech Application Demo</h2>
              </hgroup>

        <div class="article_body" >
            <div class="speak" id="body"><p>This article includes definition, types of articles – a, an, the.There are example sentences.</p></div>
            <div id="googleadframe" style="border: 0pt none;"><iframe id="google_ads_iframe_/1055314/LM_MF_WAP_ePaper_Interstitial_0" title="3rd party ad content" name="google_ads_iframe_/1055314/LM_MF_WAP_ePaper_Interstitial_0" width="30" height="25" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" srcdoc="" data-google-container-id="3" style="border: 0px; vertical-align: bottom;" data-load-complete="true">HERE IS THE IFRAME THAT WE NEED TO HIDE</iframe></div>
            <div  class="speak">The definite article is the word the. It limits the meaning of a noun to one particular thing.</div>
        </div>
        <div class="articulate-area">
            <button class="btn btn-primary" id="listenBtn" onclick="speak('article')">Listen</button>
            <span id="speechoperation" style="display:none">
                <button class="btn btn-primary" onclick="pause()">Pause</button>
                <button class="btn btn-primary" onclick="resume()">Resume</button>
                <button class="btn btn-primary" onclick="stop()">Stop</button>
            </span>
        </div>
    </div>
</center>

Working example at jsfiddle

I am not able to understand your answer. Can you show an example of how to use the `class` selector? A working fiddle can be of help. — Rahul Sharma, Jul 10 '19 at 17:44
I have updated answer, and also see working demo https://jsfiddle.net/satsvelke/gz3dbu59/ — Satish Patil, Jul 10 '19 at 18:23
Thank you for the answer but unfortunately that is not what I was looking for. My `HTML` structure if fixed so I cannot add/remove any `classe` or `id`. What I am looking for is to ignore the iframe div without restructuring the `HTML` body of the View. I hope you understand by what I mean here. — Rahul Sharma, Jul 10 '19 at 18:58
I know what you are trying to imply here but I cannot do that since the `HTML` structure is static. Think of it as a `HTML` page coming from a server. I cannot add any `class` to the `div` element also. — Rahul Sharma, Jul 10 '19 at 19:02

How to ignore a particular `` while using Responsive Speech API for Text-To-Speech

2 Answers2

How to ignore a particular `
` while using Responsive Speech API for Text-To-Speech