在页面加载时运行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" />

但我得到了"找不到声音:未定义"错误.

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