Run ResponsiveVoice speech on page load

问题:

This works properly, it speaks the text area on click, but how can I change it to speak 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>

Text area just says four letters now.

I imagine this is the key part, but can not fit it into anything properly to execute:

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

I tried:

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

But I get a "No voice found for: undefined" error.

回答1:

Hook into the OnVoiceReady handler, then try to speak once the default voice, etc. is loaded:

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>

回答2:

Thanks for using ResponsiveVoice!

You should attach to the OnReady event using this code:

responsiveVoice.addEventListener("OnReady", myInitFunction);

as it's not enough to wait until page load. You need to wait until voices are loaded.

why wont this run on iphone safari?

Apple prevents any speech to be initiated without a user action. So you would need to trigger speak() after a button click, for example.

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

ResponsiveVoice has some issues on Android devices. We're working on fixing it. We recommend using our latest release which you can find here:

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

回答3:

Don't use inline event handling. Use abstracted events. It makes for easier to understand/read code.

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

The document ready event is triggered when the DOM is finished loading.

No jQuery version:

window.onload, using the new ES6 standard arrow function. No jQuery needed!

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

回答4:

According to the official site, the second argument must be a valid voice type, but in your example, the element voiceselection has no values, then the API fails. If you try with the default voice, the API will succeed!

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