在页面加载时运行 ResponsiveVoice 语音答案

【问题标题】：Run ResponsiveVoice speech on page load在页面加载时运行 ResponsiveVoice 语音
【发布时间】：2015-11-24 19:20:33
【问题描述】：

这可以正常工作，它会在点击时说出文本区域，但我怎样才能将其更改为说出 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" />

但我收到“未找到语音：未定义”错误。

【问题讨论】：

$('US English Female') 不是有效的 HTML 元素。 responsiveVoice.speak($('#text').val(), 'US English Female')
就像在 cmets 和答案中提到的那样，问题不在于语音选择（api 和库应该回退到默认值）问题是语音有尚未加载。

标签： javascript jquery function onload responsivevoice

【解决方案1】：

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

【讨论】：

为什么不能在 iphone safari 上运行？还有为什么它在android broswer上10秒后刷新4或5次后停止工作？
这个函数会被弃用吗？它不在 API 中，但它确实有效！

【解决方案2】：

感谢您使用 ResponsiveVoice！

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

responsiveVoice.addEventListener("OnReady", myInitFunction);

因为等待页面加载是不够的。您需要等到声音加载完毕。

为什么不能在 iphone safari 上运行？

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

还有为什么它在 4 或 5 后停止工作 10 后刷新 android 浏览器上的秒数？

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

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

【讨论】：

【解决方案3】：

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

$(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);
}

【讨论】：

假设是相当安全的，因为他们已经在使用 jQuery 对象。但是，我会添加一个普通的答案：D
这不是在加载时播放
它仍然需要点击
@JamesShelton 您只是在更改 onclick="" 代码吗？因为这需要包含在新的脚本标签中或作为外部脚本，所以它不会是 onclick 内容的 1:1 替换。

【解决方案4】：

根据 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(…)

【讨论】：