Запуск ResponsiveVoice speech на загрузке страницы

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

Но я получаю Msgstr "Не найден признанный голос: неопределенный".

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>

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

Согласно 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 4

Спасибо за использование ResponsiveVoice!

Вы должны приложить к OnReady события, используя этот код:

responsiveVoice.addEventListener("OnReady", myInitFunction); 

, как это не достаточно подождать, пока при загрузке страницы. Вам нужно подождать, пока не будут загружены голоса.

why wont this run on iphone safari?

Apple запрещает любую речь инициировать без действия пользователя. Например, вам нужно будет вызвать слово() после нажатия кнопки, например.

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