WebspeechAPIとは

W3Cコミュニティグループによって策定されている仕様で、
音声認識と音声合成の2つの大きな機能がある。
「It is not a W3C Standard nor is it on the W3C Standards Track」
(このドキュメントはW3C標準でもなければW3Cの標準トラックに則ったものでもない)
と記載さておりW3C標準ではないが、WebkitやBlinkエンジンを積んだいくつかのブラウザで既に利用可能となっている。


主な機能

・音声認識

認識言語設定

文法、単語予測・変換

連続音声認証

中間結果の表示

他の変換候補案の表示

・音声合成

テキストの読み上げ

発生言語設定

ボリューム、ピッチなどの詳細設定


対応ブラウザ

caniuse.com

音声認識

音声認識の開始・終了

最も簡単な音声認識
start()で認識開始、stop()で認識終了
音声認識が終了するとonresultイベントが呼び出され、処理がされる
最もシンプルな音声認識例を以下に示す

<html>
<head>
<meta charset="UTF-8" />
<title>speechrecognition</title>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
var recognition = new webkitSpeechRecognition(); //オブジェクト宣言
recognition.lang = 'ja'; //認識言語設定

//認識終了時イベント
recognition.onresult = function(event){
var text = event.results[0][0].transcript;
$("#result_text").val(text);
};
</script>
</head>
<body>
<textarea id="result_text" cols="100" rows="10">
</textarea>
<br/>
<input type="button" onClick="recognition.start()" value="録音開始" />
<input type="button" onClick="recognition.stop()" value="録音終了" />
</body>
</html>

実行例


各種イベントの呼び出し

speechRecognitionには様々なイベントがあり、呼び出すことが出来る
(宣言したオブジェクト).onaudiostart -> ユーザの音声キャプチャ開始時のイベント
(宣言したオブジェクト).onsoundstart -> 何らかの音声の検出時のイベント
(宣言したオブジェクト).onspeechstart -> 認識に使用される音声の開始時のイベント
(宣言したオブジェクト).onspeechend -> 認識に使用される音声の終了時のイベント
(宣言したオブジェクト).onsoundend -> 何らかの音声の検出終了時のイベント
(宣言したオブジェクト).onaudioend -> 音声キャプチャ終了時のイベント
(宣言したオブジェクト).onresult -> 認識結果が返された時のイベント
(宣言したオブジェクト).onnomatch -> 一致する認識結果が無い時のイベント
(宣言したオブジェクト).onerror -> エラー発生時のイベント
(宣言したオブジェクト).onstart -> 認識サービス開始時のイベント
(宣言したオブジェクト).onend -> サービスが切断された時のイベント
これらを使えばそのイベントの開始時の処理を詳しく設定することが出来る
サンプルを以下に示す

<html>
<head>
<meta charset="UTF-8" />
<title>speechrecognition</title>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
var recognition = new webkitSpeechRecognition(); //オブジェクト宣言
recognition.lang = 'ja'; //認識言語設定

//認識サービス開始時イベント
recognition.onstart = function(){
$("#state").text("認識サービス開始");
};
//音声キャプチャ開始時イベント
recognition.onaudiostart = function(){
$("#state").text("音声キャプチャ開始");
};
//音声検出開始時イベント
recognition.onsoundstart = function(){
$("#state").text("音声検出開始");
};
//音声認識開始時イベント
recognition.onspeechstart = function(){
$("#state").text("音声認識開始");
};
//一致する認識無し
recognition.onnomatch = function(){
$("#result_text").text("もう一度試してください");
};
//エラー時
recognition.onerror= function(){
$("#result_text").text("エラー");
};
//認識サービス終了時イベント
recognition.onspeechend = function(){
$("#state").text("音声認識終了");
};
//音声検出終了時イベント
recognition.onsoundend = function(){
$("#state").text("音声検出終了");
};
//音声認識終了時イベント
recognition.onaudioend = function(){
$("#state").text("音声キャプチャ終了");
};
//認識サービス終了時イベント
recognition.onend = function(){
$("#state").text("音声サービス終了");
};

//認識結果が返された時のイベント
recognition.onresult = function(event){
var text = event.results[0][0].transcript;
$("#result_text").val(text);
};
</script>
</head>

<body>
<textarea id="result_text" cols="100" rows="10">
</textarea>
<br/>
<div id="state">停止中</div>
<input type="button" onClick="recognition.start()" value="録音開始" />
<input type="button" onClick="recognition.stop()" value="録音終了" />
</body>
</html>

実行例


認識言語設定

(宣言したオブジェクト).lang = ‘認識言語’;
と記述することで認識する言語を設定することができる。
認識言語はBCP47の言語タグで指定でき、
様々な言語に対応している。
サンプルコードを以下に示す。
(サンプルは認識言語を英語に設定した。)

<html>
<head>
<meta charset="UTF-8" />
<title>rec03</title>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
var recognition = new webkitSpeechRecognition(); //オブジェクト宣言
recognition.lang = 'en'; //認識言語設定

//認識終了時イベント
recognition.onresult = function(event){
var text = event.results[0][0].transcript;
$("#result_text").val(text);
};
</script>
</head>
<body>
<textarea id="result_text" cols="100" rows="10">
</textarea>
<br/>
<input type="button" onClick="recognition.start()" value="録音開始" />
<input type="button" onClick="recognition.stop()" value="録音終了" />
</body>
</html>

実行例

途中認識結果の表示

(宣言したオブジェクト).interimResults = true;
と記述することで認識途中の値を取得することが出来る
サンプルを以下に示す

<html>
<head>
<meta charset="UTF-8" />
<title>speechrecognition</title>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
var recognition = new webkitSpeechRecognition(); //オブジェクト宣言

recognition.lang = 'ja'; //認識言語設定
recognition.interimResults = true; //中間結果の表示オン

//認識終了時イベント
recognition.onresult = function(event){
var text = event.results;
for (var i = event.resultIndex; i<text.length; i++){
//認識の最終結果
if(text[i].isFinal){
$("#result_text").val(text[i][0].transcript);
}
//認識の中間結果
else{
$("#result_text").val(text[i][0].transcript);
}
}
};
</script>
</head>
<body>
<textarea id="result_text" cols="100" rows="10">
</textarea>
<br/>
<input type="button" onClick="recognition.start()" value="録音開始" />
<input type="button" onClick="recognition.stop()" value="録音終了" />
</body>
</html>

実行例


連続した音声認識

(宣言したオブジェクト).continuous = true;
と記述することでバックグラウンドで音声認識を続けることが可能になる。
サンプルを以下に示す

<html>
<head>
<meta charset="UTF-8" />
<title>speechrecognition</title>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
var recognition = new webkitSpeechRecognition(); //オブジェクト宣言
recognition.lang = 'ja'; //認識言語設定
recognition.continuous = true //連続音声認識オン

//認識終了時イベント
recognition.onresult = function(event){
var text = event.results[0][0].transcript;
$("#result_text").val(text);
};
</script>
</head>
<body>
<textarea id="result_text" cols="100" rows="10">
</textarea>
<br/>
<input type="button" onClick="recognition.start()" value="録音開始" />
<input type="button" onClick="recognition.stop()" value="録音終了" />
</body>
</html>

実行例


複数の認識仮説の取得と認識信頼度

recognition.maxAlternatives = x;
と記述することでx個の認識仮説を取得することができる
.confidenceで認識信頼度を呼び出すことができる
サンプルを以下に示す

<html>
<head>
<meta charset="UTF-8" />
<title>speechrecognition</title>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
var recognition = new webkitSpeechRecognition(); //オブジェクト宣言
recognition.lang = 'ja'; //認識言語設定
recognition.maxAlternatives = 10; //最大10個の認識仮説を取得

//認識終了時イベント
recognition.onresult = function(event){
var text = event.results;
$("#result_text").val(text[0][0].transcript);
$("#alternatives").empty();
for (var i = event.resultIndex; i<text.length; i++){
if(text[i].isFinal){
for (var j = 0; j<recognition.maxAlternatives; j++){
$("#alternatives").append("<p>" + "候補" + j + " " + text[i][j].transcript +
": " + text[i][j].confidence +
"</p>");
}
}
}
};
</script>
</head>
<body>
<textarea id="result_text" cols="100" rows="10">
</textarea>
<br/>
<input type="button" onClick="recognition.start()" value="録音開始" />
<input type="button" onClick="recognition.stop()" value="録音終了" />
</body>
</html>

実行例


音声合成

音声合成の開始・終了

最も簡単な音声合成
各種パラメータを設定し
speechSynthesis.speak(宣言したオブジェクト);
で音声合成が実行できる
最もシンプルな音声合成例を以下に示す

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>syn01</title>

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>

function Speech(){
var synthes = new SpeechSynthesisUtterance(); //オブジェクト宣言

// オプション設定
synthes.lang = 'ja-JP'; //発話言語
synthes.volume = 1 // 音量 min 0 ~ max 1
synthes.rate = 1 // 速度 min 0.5 ~ max 3
synthes.pitch = 1 // 音程 min 0 ~ max 2
synthes.text = $('#text').val(); // 喋る内容

speechSynthesis.speak(synthes); // 発話実行

}

</script>

</head>
<body>
<input id="text" type="text" value="こんにちは">
<input id="btn" type="button" value="speech" onClick="Speech()">

</body>
</html>

実行例


発声言語設定

(宣言したオブジェクト).lang = ‘発声言語’;
と記述することで認識する言語を設定することができる。
認識言語はBCP47の言語タグで指定でき、様々な言語に対応している。
サンプルコードを以下に示す。
(サンプルは発声言語を英語に設定した。)

<html>
<head>
<meta charset="UTF-8">
<title>syn03</title>

<script src=
"http://code.jquery.com/jquery-2.0.3.min.js"></script>

<script>

function Speech(){
//オブジェクト宣言
var synthes = new SpeechSynthesisUtterance();

synthes.lang = 'en'; //発話言語

synthes.text = $('#text').val(); // 喋る内容
speechSynthesis.speak(synthes); // 発話実行

}

</script>

</head>
<body>
<input id="text" type="text" value="こんにちは">
<input id="btn" type="button"
value="speech" onClick="Speech()">
</body>
</html>

実行例


ボリューム・レート・ピッチの設定

ボリューム(大きさ)は (宣言したオブジェクト).volume = x;
レート(速さ)は    (宣言したオブジェクト).rate = y;
ピッチ(高さ)は    (宣言したオブジェクト).pitch = z;
でパラメータを設定することができる
それぞれの値の範囲は決まっており、
ボリュームは 0 ≦ x ≦ 1
レートは  0.5 ≦ y ≦ 3
ピッチは   0 ≦ z ≦ 2  と設定されている。
サンプルコードを以下に示す

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
function Speech(){
var synthes = new SpeechSynthesisUtterance(); // 発話機能をインスタンス化
// オプション設定
synthes.lang = 'ja-JP'; //発話言語
synthes.volume = $('#volume').val(); // 音量 min 0 ~ max 1
synthes.rate = $('#rate').val(); // 速度 min 0.5 ~ max 3
synthes.pitch = $('#pitch').val(); // 音程 min 0 ~ max 2
synthes.text = $('#text').val(); // 喋る内容
speechSynthesis.speak(synthes); // 発話実行
}
</script>

</head>
<body>
<div>
<div>
<label for="text">Input text</label>
<input id="text" type="text" value="こんにちは">
</div>
<div>
<label for="volume">Volume</label>
<input type="range" min="0" max="1" step="0.1" name="volume" id="volume" value="1">
</div>
<div>
<label for="rate">Rate</label>
<input type="range" min="0.5" max="3" step="0.1" name="rate" id="rate" value="1">
</div>
<div>
<label for="pitch">Pitch</label>
<input type="range" min="0" max="2" step="0.1" name="pitch" id="pitch" value="1">
</div>
<div>
<input id="btn" type="button" value="speech" onClick="Speech()">
</div>
</div>
</body>
</html>

実行例


実用例

早口バトルオンライン

時間内に早口言葉をいくつ言えるかを競うWebアプリケーション
音声認識を使い、発声した言葉を認識する。

hayakuchi

早口バトルオンライン


対話型チャットボット

音声を用いた対話型チャットボット
音声認識、音声合成の両方を使い音声だけでの会話が出来る
中に使用しているbotはdocomoの雑談対話APIを使用 →  docomo雑談対話API

chatbot

対話型チャットボット