Question

这是正常的，它会在点击时说出文字区域，但如何将其更改为说onload？

<script src="http://responsivevoice.org/responsivevoice/responsivevoice.js"></script>
<script src="http://code.jquery.com/jquery-git2.js"></script>

<textarea id="text" cols="45" rows="3"> HHHH</textarea>

<select id="voiceselection"></select>

<input onclick="responsiveVoice.speak($('#text').val(),$('#voiceselection').val());" type="button" value="Play" />
<br>
<button id="isPlaying">Playing:</button>
<p id="r">?</p>

文字区域现在只说四个字母。

我认为这是关键部分，但无法正确执行任何事情：

responsiveVoice.speak($('#text').val(),$('US English Female').val());

我试过了：

var voicelist = responsiveVoice.getVoices();

var vselect = $("#voiceselection");

$.each(voicelist, function() {
  vselect.append($("<option />").val(this.name).text(this.name));
});

// Yours
$('#isPlaying').on('click', function() {
  $('#r').text(window.speechSynthesis.speaking)
})

$(document).ready(function() { //short code: $(function() { ... });
  responsiveVoice.speak($('#text').val(), $('US English Female').val());
});

<script src="http://responsivevoice.org/responsivevoice/responsivevoice.js"></script>
<script src="http://code.jquery.com/jquery-git2.js"></script>

<textarea id="text" cols="45" rows="3">It reads this</textarea>

<select id="voiceselection"></select>
<script>
</script>

<input onclick="responsiveVoice.speak($('#text').val(),$('US English Female').val());" type="button" value="Play" />

但是我得到了“找不到声音：未定义”错误。

Answer 1

挂钩OnVoiceReady处理程序，然后在加载默认语音等后尝试说话：

＆＃13;

responsiveVoice.OnVoiceReady = function() {
  console.log("speech time?");
  responsiveVoice.speak($('#text').val());
};

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//responsivevoice.org/responsivevoice/responsivevoice.js"></script>

<textarea id="text" cols="45" rows="3">one two three</textarea>

＆＃13;

Answer 2

不要使用内联事件处理。使用抽象事件。它使理解/读取代码更容易。

$(document).ready(function() { //short code: $(function() { ... });
    responsiveVoice.speak($('#text').val(),$('#voiceselection').val());
});

在DOM加载完成后触发文档就绪事件。

没有jQuery版本：

window.onload，使用新的ES6标准箭头功能。不需要jQuery！

window.onload = () => {
    responsiveVoice.speak(document.getElementById("text").value, document.getElementById("voiceselection").value);
}

Answer 3

感谢您使用ResponsiveVoice！

您应该使用以下代码附加到OnReady事件：

responsiveVoice.addEventListener("OnReady", myInitFunction);

因为它还不足以等到页面加载。你需要等到语音加载完毕。

为什么不在iphone safari上运行？

Apple禁止在没有用户操作的情况下启动任何语音。因此，您需要在单击按钮后触发speak（）。

为什么在10点之后刷新4或5之后它会停止工作 android broswer上的秒数？

ResponsiveVoice在Android设备上存在一些问题。我们正在努力修复它。我们建议您使用我们的最新版本，您可以在此处找到：

https://code.responsivevoice.org/develop/responsivevoice.js

Answer 4

根据 official site ，第二个参数必须是有效的语音类型，但在您的示例中，元素语音选择没有值，那么API失败。如果您尝试使用默认语音，API将会成功！

var text = $('#text').val(),
    voice = $('#voiceselection').val();

//success
responsiveVoice.speak(text); //HHHH

//fails
responsiveVoice.speak(text, voice); //HHHH, ""

//Uncaught TypeError: Cannot read property 'mappedProfile' of null(…)

在页面加载时运行ResponsiveVoice语音

4 个答案: