試したくて、マイクを見にヤマダ電機に言ったら、最低でも780円くらいしたのでやめて、古い WEBカメラを引っ張り出して使ったら使えました。 参考にしたのは、こちら 処理の中核を確認して、音声が途切れる毎に表示 DIV を追加する方式にして実装しました。イベントはたくさんありますが、直接必要なのは result イベントです。全く音声がない時間が５秒くらい? 続くと自動的に終わります。 Google Chrome の設定のプライバシーのコンテンツの設定でマイクを選びました。例外の管理では、一度ブロックしたサイトの削除して使えるようにできます。ソースコード
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<input id="st_btn" type="button" value="開始">
<input id="ed_btn" type="button" value="終了">
<div id="info"></div>
<div id="result">
<div id="first_text"></div>
</div>
<script>
var rec = null;
var target = $("#first_text");
$(function(){
if ( typeof webkitSpeechRecognition === 'undefined' ) {
$("#info").text("使用できません");
$("#st_btn").prop("disabled", true);
$("#ed_btn").prop("disabled", true);
}
else {
// インスタンス作成
rec = new webkitSpeechRecognition();
// 初期設定
rec.lang = "ja-JP";
rec.interimResults = true;
rec.continuous = true;
// イベント登録
rec.onerror = function(){
$("#info").text("error");
};
rec.onnomatch = function(){
$("#info").text("nomatch");
};
rec.onsoundstart = function(){
$("#info").text("音検知");
};
rec.onsoundend = function(){
$("#info").text("soundend");
};
rec.onspeechstart = function(){
$("#info").text("スピーチ開始");
};
rec.onspeechend = function(){
$("#info").text("スピーチ終了");
};
rec.onstart = function(){
$("#info").text("開始");
};
rec.onend = function(){
$("#info").text("終了");
};
// 結果テキストの作成
rec.onresult = function(ev){
var obj = ev.results;
for (var i = ev.resultIndex; i < obj.length; i++ ) {
if( obj[i].isFinal ) {
target.text(obj[i][0].transcript);
target = $("<div></div>");
$("#result").append(target);
}
else {
target.text(obj[i][0].transcript);
}
}
};
// ボタンイベント
$("#st_btn").on("click",function(){
rec.start();
$("#st_btn").prop("disabled",true);
})
$("#ed_btn").on("click",function(){
rec.stop();
$("#st_btn").prop("disabled",false);
})
}
});
</script>
関連する記事 ほぼ、Google Chrome 限定ですが Web Speech API の現時点での実装と問題点回避方法
|
|
【JavaScript オブジェクトの最新記事】
- JavaScript : window オブジェクトのプロパティとしてグローバル変数を定義する
- ほぼ、Google Chrome 限定ですが Web Speech API の現時点での実装と問題点回避方法
- 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 メソッドの第二引数に関数を指定する一括置き換え処理
