如何忽略特定的` <div> `，同时将自适应语音API用于语音转语音

Question

I am using the ResponsiveSpeech API and I have incorporated this plugin in my sample working application . 我正在使用ResponsiveSpeech API，并且已将此插件合并到示例工作应用程序中。

Now if you will observe here that the plugin is correctly speaking the given article under the <div id="row_view"> container. 现在，如果您在这里观察到该插件正确地讲了<div id="row_view">容器下的给定文章。 The problem that I am encountering is that I wanted to ignore the div id="googleadframe" style="border: 0pt none;"> container. 我遇到的问题是我想忽略div id="googleadframe" style="border: 0pt none;">容器。 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? 使用此API的任何人都能成功做到这一点吗？

I have done research on their API and tried to find examples but I was not able to do so. 我已经对他们的API进行了研究，并试图找到示例，但我未能做到。 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. 注意： 我不能更改视图的HTML结构。 I need a way to ignore the iframe div tag when the speak operation is underway. 我需要一种在进行语音操作时忽略iframe div标签的方法。 Adding any div element wont help me to solve this problem 添加任何div元素不会帮助我解决此问题

Thanks in advance! 提前致谢！

Answer 1

Instead of speaking the entire contents of #row_view , speak the contents of every child of #row_view that isn't the ad frame: #row_view的全部内容， #row_view说不是广告框架的#row_view的每个子对象的内容：

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. 请注意，这只会从#row_view 子元素中获取文本，而不是直接从其中的文本获取。

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

Answer 2

<!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 jsfiddle的工作示例

如何忽略特定的` <div> `，同时将自适应语音API用于语音转语音

问题描述

2 个解决方案

解决方案1
1 已采纳 2019-07-10 22:19:59

解决方案2
0 2019-07-10 13:25:06

如何忽略特定的` <div> `，同时将自适应语音API用于语音转语音

问题描述

2 个解决方案

解决方案1 1 已采纳 2019-07-10 22:19:59

解决方案2 0 2019-07-10 13:25:06

解决方案1
1 已采纳 2019-07-10 22:19:59

解决方案2
0 2019-07-10 13:25:06