运行页面加载时的 ResponsiveVoice 语音

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

但是我得到一个 "No voice found for: undefined" 错误。

Answer 1

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

$(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 2

根据 official site，第二个参数必须是有效的语音类型，但在您的示例中，元素 voiceselection 没有值，则 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(…)

Answer 3

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

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

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

Answer 4

感谢您使用 ResponsiveVoice！

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

responsiveVoice.addEventListener("OnReady", myInitFunction);

因为等到页面加载还不够。您需要等到语音加载完成。

why wont this run on iphone safari?

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

also why does it stop working after after 4 or 5 refresh after 10 seconds on android broswer?

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

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

运行页面加载时的 ResponsiveVoice 语音

Run ResponsiveVoice speech on page load

javascript

jquery

function

onload

responsivevoice

运行 页面加载时的 ResponsiveVoice 语音

Run ResponsiveVoice speech on page load

javascript

jquery

function

onload

responsivevoice

运行页面加载时的 ResponsiveVoice 语音