我正在尝试说出按下按钮后填充HTML段落的文本。我用于语音的库是 speak.js，到目前为止，我把我的网页演讲作品的简单演示放在一起。但是，现在我在按下按钮后从互联网上拉出文本，我希望说出这段文本。我无法弄清楚如何将文本拉入具有speak()功能的 HTML 标签中。
<div class="container well" id="#wiki-body-container">
<p id="wiki-body" onchange="speak('!!! TEXT GOES HERE !!!')"></p>
<div id="audio"></div>
</div>
这就是我拥有的 HTML。按下按钮后，将填充 idwiki-body的段落。本文我想用来填充speak()函数参数。
我该怎么做呢？
编辑(添加更多代码(：
这是我用来填充段落的相应 javascript。
$(document).ready(function(){
$('#wiki-body-container').hide();
$('#search-button').click(function() {
console.log($("#search").val().replace(" ", "_"));
var searchTerm = $("#search").val().replace(" ", "_");
$.ajax({
type: "GET",
url: 'http://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text§ion=0&page=' + searchTerm + '&callback=?',
contentType: "application/json; charset=utf-8",
async: false,
dataType: "jsonp",
success: function (data, textStatus, jqXHR) {
console.log(data);
var markup = data.parse.text["*"];
var section = $('<p></p>').html(markup);
// remove links as they will not work
section.find('a').each(function() { $(this).replaceWith($(this).html()); });
// remove any references
section.find('sup').remove();
// remove cite error
section.find('.mw-ext-cite-error').remove();
// fill in html section with text
$('#wiki-body-container').show();
$('#wiki-body').html($(section).find('p'));
speak(section); // Not able to call
},
error: function (errorMessage) {
console.log(errorMessage)
}
});
});
});
这是完整的 HTML 正文。
<body>
<div class="jumbotron text-center">
<a title="By English: Redrawn in SVG by Otourly (concept by Paullusmagnus)
Deutsch: Nachgezeichnet als Vektorgrafik von Otourly (Konezpt von Paullusmagnus). (Original image Image:Wikipedia-logo.png) [CC BY-SA 3.0 (https://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Wikipedia_svg_logo.svg"><img width="128" alt="Wikipedia svg logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Wikipedia_svg_logo.svg/1000px-Wikipedia_svg_logo.svg.png"></a>
<p>Search Wikipedia by voice!</p>
<form class="form-inline">
<div class="input-group">
<input type="search" id="search" class="form-control" size="50" placeholder="Verbalize a query" required>
<div class="input-group-btn">
<button type="button" class="btn btn-danger" id="search-button"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div>
<div class="container well" id="#wiki-body-container">
<p id="wiki-body"></p>
<div id="audio"></div>
</div>
</body>
如果您不想使用计时器并检查元素<p>内容，可以尝试DOMSubtreeModified事件：
function changeText() {
document.getElementById( 'wiki-body' ).innerText = document.getElementById( 'text' ).value
}
document.getElementById( 'wiki-body' ).addEventListener( 'DOMSubtreeModified', function() {
speak( this.innerText )
} )p {
width: 300px;
height: 50px;
background-color: #efefef;
border: 1px solid #ddd
}<script src="http://yourjavascript.com/21843061212/speakclient.js"></script>
<input type="text" id="text" value="Stack Overflow" />
<button type="button" onclick="changeText()">Add and Speak this text</button>
<p id="wiki-body"></p>
<div id="audio"></div>
注意：上述代码片段的Speak函数无法执行。因为我找不到speak.js脚本的免费 CDN。请在客户端上执行代码。