スペースお借りいたします.
今回, 作ってみたのは英語の発音練習アプリです.
一応, Chrome Extension です.
ここの Wiki に掲載されている, Extension の作り方と, style については, 随分と参考にさせていただきました.
使い方
注意) マイクを接続しないとうまく動きません.
1) ユーザーは, 左上の入力フォームへ単語(文でも良い)を入力する.
2) speak ボタンをクリックし, 1) で入力した単語を話す.
3) 音声認識に成功すれば, speak ボタンの下に, 認識された音声がテキストで表示される.
発音が正しいかどうかの結果について
1) で入力した単語と, 2) でユーザーが話した単語との近さによって, 以下のようにアラームが表示されます.
ユーザーの話した単語とフォームへ入力した単語が, ほぼ同じだった場合, Great!
ユーザーの話した単語とフォームへ入力した単語が, 近いけど少し違う場合, Good!
そうでなければ, Bad!
使用している技術
chrome.experimental.* APIs の chrome.experimental.speechInput
【コメント】
Chrome Extension の音声認識モジュール（？）である, speechinput を利用しています.
しかしながら, 2012/4/26 現在, speechinput は, まだ試験的な Chrome API (experimental.* API と呼ばれるもの? )であるそうです.
なので, speechinput を利用するためには, manifest.json の記述と, Chrome の設定を少し変更する必要があるみたいです.
私の場合, 以下のように変更を加えたらうまくいきました.
1) manifest.json に, 次を加える.
"permissions" : "experimental"
2) Chrome のアドレスバーに, chrome://flags/ と入力し Enter を押す. すると, 試験運用機能の設定画面のようなものが表示される. 表示された項目のうち, "試験運用版の拡張機能 API" というものがあるので, これを有効にする.
詳細に関しては, chrome.experimental.* APIs のリファレンスの参照をお願いいたします.
多分ですが, Chrome のバージョンは最新のものにしたほうが良いです.
Android で動くかどうかは未確認です.
あと, "speechinput により音声認識がされる=正しい発音"ではないだろう！というツッコミはなしでお願いします(笑
【バグ】
- 英語以外の音声認識ができない. 日本語とかもサポートされているみたいですが, 上手く動きませんでした.
128x128 ピクセルの, "icon_128.png"という名前のファイルを, html, json ファイルがあるフォルダと同じフォルダへ配置してください.
{
"name": "Speech Example",
"description": "Testing",
"version": "1.0",
"app" : {
"launch": {
"local_path": "speech.html"
}
},
"icons": {
"128": "icon_128.png"
},
"permissions": [
"notifications",
"experimental"
]
}
<!DOCTYPE html>
<html lang = "ja" >
<head>
<meta charset = "utf-8" >
<title> How to be heard</title>
<style>
#userText
{
width : 500px
}
#userInputButton
{
width : 100px
}
#log
{
width : 500px
}
</style>
<script>
function checkStart()
{
if( chrome.extension.lastError )
{
alert( "Could not start speech input: "
+ chrome.extension.lastError.message );
}
else
{
var log = document.getElementById( "log" );
log.innerHTML = "Hearing ...........";
}
}
// ---------------
// ---- Event ----
// ---------------
function failRecognition( _err )
{
alert( "Speech input failed: " + _err.code );
if( _err.code == "noSpeechHeard" )
{ alert( "noSpeechHeard" ); }
else if( _err.code == "noResults" )
{ alert( "noResults" ); }
else if( _err.code == "captureError" )
{ alert( "captureError" ); }
else if( _err.code == "networkError" )
{ alert( "networkError" ); }
else
{ alert( "??" ); }
}
var resultString = "";
function succeedRecognition( _result )
{
resultString = "";
for( i = 0; i < _result.hypotheses.length; i++ )
{
//resultString += _result.hypotheses[i].confidence;
//resultString += " : ";
resultString += _result.hypotheses[i].utterance;
resultString += "</br>";
}
// display result
var log = document.getElementById( "log" );
log.innerHTML = resultString;
// checking
var userText = document.getElementById( "userText" );
userInputString = userText.value;
for( i = 0; i < _result.hypotheses.length; i++ )
{
if( userInputString == _result.hypotheses[i].utterance )
{
switch( i )
{
case 0:
alert( "Great!" );
break;
case 1:
alert( "Good!" );
break;
default:
alert( "Bad!" );
break;
}
}
}
}
function endSound()
{
var log = document.getElementById( "log" );
log.innerHTML = "You speak ...";
}
chrome.experimental.speechInput.onError.addListener( failRecognition );
chrome.experimental.speechInput.onResult.addListener( succeedRecognition );
chrome.experimental.speechInput.onSoundEnd.addListener( endSound );
function init()
{
chrome.experimental.speechInput.start( {"language" : "en" }, checkStart );
}
</script>
</head>
<body>
</br>
<form>
<input type = "text" id = "userText" placeholder = "Please input a word" >
</form>
<form>
<input type = "checkbox" value = "English" >English</input></br>
<input type = "checkbox" value = "Japanese" >Japanese</input></br>
<input type = "checkbox" value = "Chinese" >Chinese</input></br>
</form>
<button type = button id = "userInputButton" onclick = init() >speak</button>
<div>Your words is heard as follows...</div>
<div id = "log" >...</div>
</body>
</html>
最終更新：2012年04月27日 00:09
