文字が長い(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>
この API の v2 では、Twitpic には、2〜5を直接は渡しません。
Twitpicでアカウントが存在するかどうかをチェックする為の Twitter の API を使う
のに必要な最低限のデータを渡します。
とても安心です。API の v1 は直接渡すのでおすすめできませんね。
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
