ほぼ、Google Chrome 限定ですが Web Speech API の現時点での実装と問題点回避方法

※ 長い文章を試すと、安全なのは 70文字くらいでした。長すぎると壊れて、Google Chrome を再起動する必要がありました

Window.speechSynthesis

何故か最初のロードで speechSynthesis.getVoices() は一覧を取って来ません。この一覧でコンボボックスを作る必要があるので、とても回りくどい事をしています。

インターネットを調べましたが、過去のものは動かないものが多く、理由はこの Voice をセットしていない事が原因でした。

こんにちは

UI を jQuery で実装

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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>

<script>
var voice_types;

$(function(){

	if ( typeof SpeechSynthesisUtterance === 'undefined' ) {
		$('#target_text').val("Web Speech API は使えません");
	}

	// 初回ロード
	speechSynthesis.getVoices();
	// 詳細取得
	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.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($('<option>').text(voice_types[i].name).val(i));
			}
			$('#voice').prop("value",12);
		},100);
}

</script>

ここでは使っていませんが、pitch は声の高さを 0.1 づつで 1.6 ぐらいが限界みたいです(それ以上はかすれた変な声)。rate は速さで 0.1 づつ増やせますが、1.8 くらいで聞き取りは限界です。

関連する記事

Google Chrome での音声認識処理

JavaScript オブジェクト

JavaScript : window オブジェクトのプロパティとしてグローバル変数を定義する

Google Chrome での音声認識処理

JavaScript でテーブル要素の td をクリックしてテキストを選択する / Range オブジェクト

Google Chrome で音声認識の結果をブログの投稿テキストエリアに転送するブックマークレット

JavaScript の String と Date オブシェクトに、9999/99/99 書式の文字列日付を取り出すメソッドを追加する

JavaScript オブジェクト作成の４態

JavaScript の function を new したものが、JSON フォーマットで記述した『Object』と同じである事のテスト

JavaScript による半角と全角の相互変換(カタカナを除く)完成版

Three.js で行われている整然としたクラス作成

JSON オブジェクトの stringify メソッドの第３引数の使い方

JS : 自分用名前空間を使ってページのロードイベントを登録

Object.prototype が window オブジェクトに適用されるおはなし

JS : クロスドメインの IFRAME からデータを JSON 形式で引き渡す

JavaScript : 右から指定した文字数を取りだす right メソッドを String オブジェクトに追加

JSON と文字列の関係

JavaScript : ネームスペースの作成

JavaScript : HTMLの要素内のイベント記述で複雑な処理を書く方法( 関数を定義したく無い場合 )

JavaScript : 無名関数(メソッド)の実行

JavaScript : Numberオブジェクトに16進数文字列に変換して指定した長さで前にゼロを付けるメソッドを追加する

JavaScript : String オブジェクトの replace メソッドの第二引数に関数を指定する一括置き換え処理