Chromeで日本語音声認識して、しゃべらせてみる
http://blog.goo.ne.jp/xmldtp/e/0480f55d4ad3e6df568eae8336bc4d7c
では、chromeの機能を使ってしゃべらせたけど、AI Talk Web APIを使って
しゃべらせることを考える。
AI Talk Web APIは
https://www.ai-j.jp/cloud/webapi/
にあるけど、POST/GETで音声にしたい言葉をUTF-8エンコードで送ると、
音声のoggファイル等（wav,mp3とかもOK)がバイナリで返ってくるというもの。
なので、このデータをaudioタグで読み込めばよい。
具体的には、以下のかんじ
（赤字以外は、上記「Chromeで日本語音声認識して、しゃべらせてみる」のソースと同じ）
赤字が今回のところ。音声を受け付けたらエンコーディングして、
URLをaudioのsrcにセットすると、結果が返ってきたとことでautoplayしてくれる。
getにしたら、同じことばを入れたら、キャッシュが返ってきてしまうけど、
同じ言葉なら同じ音声でOKのはずなので、問題ない。
ユーザー名、パスワードは、契約のものに入れ替える。
マッシュアップアワードやっている人は、それを入れる。
契約する人は、契約方法が上記ページに書いてある。
http://blog.goo.ne.jp/xmldtp/e/0480f55d4ad3e6df568eae8336bc4d7c
では、chromeの機能を使ってしゃべらせたけど、AI Talk Web APIを使って
しゃべらせることを考える。
AI Talk Web APIは
https://www.ai-j.jp/cloud/webapi/
にあるけど、POST/GETで音声にしたい言葉をUTF-8エンコードで送ると、
音声のoggファイル等（wav,mp3とかもOK)がバイナリで返ってくるというもの。
なので、このデータをaudioタグで読み込めばよい。
具体的には、以下のかんじ
（赤字以外は、上記「Chromeで日本語音声認識して、しゃべらせてみる」のソースと同じ）
<!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);
// 今、読み込んだ内容を
// 単純に音声出力している
url = "http://webapi.aitalk.jp/webapi/v2/ttsget.php"
url = url + "?username=ここにユーザー名が入る";
url = url + "&password=ここにパスワードが入る";
url = url + "&speaker_name=reina";
url = url + "&text=" + encodeURIComponent(buf);
$("#voice").attr("src",url);
// もう一度はじめから
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/>
<audio id="voice" autoplay/>
</body>
</html>
|
赤字が今回のところ。音声を受け付けたらエンコーディングして、
URLをaudioのsrcにセットすると、結果が返ってきたとことでautoplayしてくれる。
getにしたら、同じことばを入れたら、キャッシュが返ってきてしまうけど、
同じ言葉なら同じ音声でOKのはずなので、問題ない。
ユーザー名、パスワードは、契約のものに入れ替える。
マッシュアップアワードやっている人は、それを入れる。
契約する人は、契約方法が上記ページに書いてある。
アクセス
トータル
ランキング
