文字が長い(80くらい)と Google Chrome レベルでクラッシュして動かなくなる。そうなると、Google Chrome の再起動。 Voice の一覧を取得して適宜正しい言語設定する必要あるのですが、最初の取得で取り出せない。 まあ、そのへんを納得して作れば子供の絵本の朗読くらいならできるかもです。
多くすると高い声 多くすると早く
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea id="target_text" style='width:300px;height:60px;'>ある日の事でございます。御釈迦様は極楽の
蓮池のふちを、独りでぶらぶら御歩きになっ
ていらっしゃいました。</textarea><br>
<input type="button" id="speech_button" value="実行">
<select id="voice"></select>
<br>
多くすると高い声 <input id="vh" type="number" value="1" step="0.1" min="0.5" max="2">
多くすると早く <input id="vs" type="number" value="1" step="0.1" min="0.5" max="2">
<script>
var voice_types;
$(function(){
if ( typeof SpeechSynthesisUtterance === 'undefined' ) {
$('#target_text').val("Web Speech API は使えません");
}
// 何故か初回が取れない
voice_types = speechSynthesis.getVoices();
if ( voice_types.length == 0 || $('#voice').children().length == 0 ) {
// 無かった場合、もう一度
get_voice_type ()
}
$("#speech_button").on("click", function() {
// 念のために取り出す
voice_types = speechSynthesis.getVoices();
if ( voice_types.length == 0 ) {
// 再取得で無かった場合、もう一度
get_voice_type ();
return;
}
var speech = new SpeechSynthesisUtterance($("#target_text").val());
speech.pitch = $("#vh").val();
speech.rate = $("#vs").val();
// 選択した言語を使う
speech.voice = voice_types[ $('#voice > option:selected').val() ];
speechSynthesis.speak(speech);
});
});
function get_voice_type () {
setTimeout(function(){
voice_types = speechSynthesis.getVoices();
$('#voice > option').remove();
for( i = 0; i < voice_types.length; i++) {
$('#voice').append(function(){
var option = $('<option>');
option
.text(voice_types[i].name)
.val(i);
return option;
});
}
$('#voice').prop("value",11);
},1);
}
</script>
|
|
