「Amazon Echo」が11月8日上陸、ただＡＩスピーカーって、自作できるんだよね…
http://blog.goo.ne.jp/xmldtp/e/0fee5f6a3d65e4f9b963b58b1930a6dd
で書いた、自作する方法。音声認識と音声出力（音声合成）部分のプログラムを
紹介してみる
っていっても、ほとんど
Web Speech APIで途切れない音声認識
http://jellyware.jp/kurage/iot/webspeechapi.html
と
Web Speech APIを使ってみる
https://qiita.com/skanehira/items/7fb501608d7d85c4241e
に書いてあることと同じというか、前者のエントリーの「長時間途切れることなく使う」
をJQueryに書き換えて、最後の出力部分（停止したところ、つまりonsoundend()
のところ）に、後者の音声出力をいれただけ。
ソースはこんなかんじ。
これを、htmlとして保存(下ではrec.html)、サーバー上において、
chromeから、アクセスする。
イメージは、こんなかんじ。
alertで表示しているけど、本来は、そこに何か処理したいことがはいる。
今は、認識した内容を読み上げているだけだけど、
実際には、答えの文字列を読み上げる（bufに答え文字列セットして）に
なるかんじかな・・・
http://blog.goo.ne.jp/xmldtp/e/0fee5f6a3d65e4f9b963b58b1930a6dd
で書いた、自作する方法。音声認識と音声出力（音声合成）部分のプログラムを
紹介してみる
っていっても、ほとんど
Web Speech APIで途切れない音声認識
http://jellyware.jp/kurage/iot/webspeechapi.html
と
Web Speech APIを使ってみる
https://qiita.com/skanehira/items/7fb501608d7d85c4241e
に書いてあることと同じというか、前者のエントリーの「長時間途切れることなく使う」
をJQueryに書き換えて、最後の出力部分（停止したところ、つまりonsoundend()
のところ）に、後者の音声出力をいれただけ。
ソースはこんなかんじ。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>Web Speech API</title>
<script>
//==============================//
// 変数宣言 //
//==============================//
var recognition; // 音声認識オブジェクト
var flag_speech; // 認識中フラグ 1 認識中
//==============================//
// 音声変換設定 //
//==============================//
function vr_function()
{
// 音声認識の設定
window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
recognition = new webkitSpeechRecognition();
recognition.lang = 'ja';
recognition.interimResults = true;
recognition.continuous = true;
//==============================//
// 認識開始 //
//==============================//
recognition.onsoundstart = function()
{
$("#status").text("認識中");
flag_speech = 1;
};
//==============================//
// エラー時 //
//==============================//
recognition.onerror = function()
{
$("#status").text("エラー");
// 再開する
vr_function();
};
//==============================//
// 音が終わった //
// 停止中または //
// 認識中でTimeout //
//==============================//
recognition.onsoundend = function()
{
// 認識データを取ってくる
var buf = $("#result_text").text();
// 今、表示しているだけだけど
// 本来は、ここに処理を書く
alert(buf);
// 今、読み込んだ内容を
// 単純に音声出力している
var ss = new SpeechSynthesisUtterance();
ss.text = buf;
ss.lang = "ja-JP";
speechSynthesis.speak(ss);
// もう一度はじめから
vr_function();
};
//==============================//
// 結果 //
//==============================//
recognition.onresult = function(event)
{
var buf = "";
// 結果データ入手
var results = event.results;
// 認識中のとき表示
if ( flag_speech == 1)
{
// 変換中に大幅に文字列が変わることがあるので
// はじめから作り直している
for (var i = event.resultIndex; i < results.length; i++)
{
buf = buf + results[i][0].transcript;
}
// 表示
$("#result_text").text(buf);
}
};
// 初期設定
$("#status").text("start");
flag_speech = 0;
$("#result_text").text(" ");
// 音声認識開始
recognition.start();
}
//==============================//
// 音声変換中断・終了 //
// １回目で中断 //
// なにも話さず２回目で終了//
// 音認開始で再開 //
//==============================//
function vr_end()
{
recognition.stop();
$("#status").text("停止中");
flag_speech = 0;
}
//==============================//
// 初期設定 //
//==============================//
$(function()
{
$("#status").text("停止中");
$("#result_text").text(" ");
flag_speech = 0;
});
</script>
</head>
<body>
認識文字：<BR/>
<div id="result_text" style="width:400px;border:#A6523F solid 3px;"> </div>
<br/>
<input type="button" onClick="vr_function();" value="音認開始" />
<input type="button" onClick="vr_end()" value="停止" />
<BR/>
<div id="status"></div><BR/>
</body>
</html>
|
これを、htmlとして保存(下ではrec.html)、サーバー上において、
chromeから、アクセスする。
イメージは、こんなかんじ。
alertで表示しているけど、本来は、そこに何か処理したいことがはいる。
今は、認識した内容を読み上げているだけだけど、
実際には、答えの文字列を読み上げる（bufに答え文字列セットして）に
なるかんじかな・・・
アクセス
トータル
ランキング
