在頁面加載時運行ResponsiveVoice語音

這樣可以正常工作，它會在點擊時說出文字區域，但是如何將其改爲說話onload？在頁面加載時運行ResponsiveVoice語音

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

但我得到一個「找不到未定義的語音」錯誤。

來源

2015-11-24 James Shelton

'$（「美國英語女」）'不是一個有效的** HTML元素**。 'responsiveVoice.speak（$（'＃text'）。val（），'美國英語女性'）' – jherax

就像評論和答案中提到的一樣，問題不在於語音選擇（api和libs *應該*默認情況下回退）問題在於聲音尚未加載。 – rlemon

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

來源

2015-11-24 19:45:50

爲什麼不會在iphone safari上運行？也爲什麼它停止工作後，4或5刷新10秒後在android broswer？ –

此功能是否被棄用？它不在那裏API，但它的確行得通！ –

請勿使用內聯事件處理。使用抽象事件。它使得更容易理解/閱讀代碼。

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

來源

2015-11-24 19:22:56

假設它很安全，因爲它們已經在使用jQuery對象。但是，我會添加一個香草答案：D –

考慮到OP的代碼包含jQuery ..的鏈接，我認爲它更安全。：D如果有什麼標籤應該添加。 – rlemon

這不是在加載 –

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

來源

2015-11-24 19:44:40 jherax

感謝您使用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

來源

2015-11-26 12:26:01

在頁面加載時運行ResponsiveVoice語音

回答

相關問題