テキストを音声認識
無料の音声認識はあるの？
**はい、あります！しかも無料です。**
前回ご紹介した「読み上げ機能（Text-to-Speech）」と同じ **Web Speech API** という技術の中に、対になる**「音声認識機能（Speech-to-Text）」**も標準で用意されています。
ブラウザに標準搭載されている機能を使うため、Google Cloud や Amazon (AWS) のような**有料のAPI契約は一切不要**です。
以下に、コピペで動く実装例と仕組みを作成しました。
### 音声認識の実装コード（無料・ブラウザ標準）
前回の読み上げ機能の逆を行うコードです。ボタンを押して話すと、その内容がテキストエリアに入力されます。
**JavaScript**
```javascript
function startListening(textareaId) {
// ブラウザの互換性を保つための記述（ChromeなどはwebkitSpeechRecognition）
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (SpeechRecognition) {
const recognition = new SpeechRecognition();
// 日本語に設定
recognition.lang = 'ja-JP';
// 認識途中の結果を表示するか（true:リアルタイム表示, false:確定後のみ）
recognition.interimResults = false;
// 録音開始
recognition.start();
// 【1】音声認識が開始されたら
recognition.onstart = function() {
alert('音声認識を開始します。マイクに向かって話してください。');
};
// 【2】音声認識の結果が出たら
recognition.onresult = function(event) {
const speechResult = event.results[0][0].transcript;
// 認識結果をテキストエリアに追記（または上書き）
const textarea = document.getElementById(textareaId);
textarea.value += speechResult + ' '; // 既存の文字の後ろに追加
};
// 【3】音声認識が終了したら
recognition.onend = function() {
console.log('音声認識終了');
};
// エラーハンドリング
recognition.onerror = function(event) {
console.error('エラーが発生しました:', event.error);
alert('エラーが発生しました: ' + event.error);
};
} else {
alert('ごめんなさい、お使いのブラウザは音声認識に対応していません。Google Chromeなどをご利用ください。');
}
}
```
**HTML**
```html
<TEXTAREA id="inputArea" rows="4" cols="50">ここに音声入力されます。</TEXTAREA><br>
<INPUT type="button" value="🎤 マイクで入力する" onClick="startListening('inputArea');">
```
---
### 導入前に知っておくべき3つのポイント
無料でお手軽ですが、いくつかの「クセ」があります。
#### 1. 対応ブラウザに偏りがある
読み上げ機能よりも対応状況が少しシビアです。
* **Google Chrome / Edge / Safari:** 基本的に動作します。
* **Firefox:** デフォルトでは無効化されていることが多く、設定が必要な場合があります。
* **IE:** 動きません。
※基本的には **Google Chrome** での利用が最も安定しています。
#### 2. マイクの許可が必要
ボタンを押すと、ブラウザの上部に「マイクの使用を許可しますか？」というポップアップが出ます。ユーザーが「許可」を押さないと機能しません。
#### 3. サーバー通信が発生する場合がある
ブラウザの機能ですが、音声データを解析するために、背後でブラウザ提供元（GoogleやAppleなど）のサーバーに音声を送って文字化している場合があります。そのため、**インターネット接続が必要**になることがほとんどです。
### まとめ
前回の「読み上げ」と今回の「音声認識」を組み合わせれば、**「声で書き込み、声で読み上げる掲示板」**が、追加費用なしで作れます。
まずは上記のコードをご自身の掲示板の「投稿フォーム」付近に追加して、マイク入力を試してみるのはいかがでしょうか？