(Sample)

「音声入力ができるチャットアプリ」のHTML＋JavaScript実装を、新人エンジニアの方向けに丁寧に解説していきます。

このアプリは、ユーザーがマイクボタンを押しながらしゃべると、それが文字としてチャットに表示されるという仕組みになっています。しかも、2人分のマイクボタンがありますので、会話形式での練習やインタラクションにぴったりです！

どんなことができるのか？

まず、このアプリの主な特徴を確認しましょう。

  • ユーザー1・ユーザー2の2人分の音声入力ボタンがある
  • 発話内容をリアルタイムで音声認識してチャット欄に表示
  • デザインはBootstrapで簡単かつ綺麗に整っている
  • Web Speech API（音声認識API）を使ってマイク入力に対応

「マイクに向かってしゃべる → 文字になる → チャットに表示」これが一連の流れです。

HTMLとデザインの構造

Bootstrapで簡単に美しく！

Bootstrapを使うと、複雑なCSSを書かずにボタンやレイアウトを整えることができます。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
  • btn-lg クラス：大きなボタン
  • bi bi-mic-fill：Bootstrap Iconsでマイクのアイコンを表示
  • col-md-6：2つのボタンを左右に分けて表示

チャット欄の設計

チャット欄は .chat-container というクラスで定義されています。

.chat-container {
  border: 1px solid #ccc;
  padding: 10px;
  height: 400px;
  overflow-y: scroll;
}

このスタイルによって、メッセージがたくさんたまってもスクロールできるようになります。

音声認識のしくみを解説！

ここがこのアプリの「心臓部」ともいえる部分です。JavaScriptの Web Speech API を使っています。

SpeechRecognition オブジェクトとは？

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

これは「音声認識をブラウザで実行するためのインターフェース」です。Chrome系のブラウザのみ対応という制限があります。

2人分のインスタンスを作成

const recognition1 = new SpeechRecognition();
const recognition2 = new SpeechRecognition();

それぞれのボタンに対して独立した認識インスタンスを用意しています。

マイク入力→メッセージ表示の流れ

スタートとストップ

user1VoiceButton.addEventListener("mousedown", () => {
  recognition1.start();
});
user1VoiceButton.addEventListener("mouseup", () => {
  recognition1.stop();
});

ボタンを押し続けている間だけ録音されるという、スマートフォンのLINEのような直感的な操作が再現されています。

音声結果をチャットに表示

recognition1.onresult = (event) => {
  const transcript = event.results[0][0].transcript;
  addMessage("user1", transcript);
};

ここで transcript（文字起こし結果）が取り出され、addMessage 関数を通じてチャット欄に追加されます。

addMessage関数のしくみ

function addMessage(userClass, message) {
  const messageElement = document.createElement("div");
  messageElement.className = "message " + userClass;
  messageElement.textContent = message;
  chatContainer.appendChild(messageElement);
  chatContainer.scrollTop = chatContainer.scrollHeight;
}

新しいメッセージを .chat-container に追加して、自動でスクロール位置も最下部に移動してくれる親切設計です！

エラー処理も忘れずに！

recognition1.onerror = (event) => {
  console.error("User1 Error:", event.error);
};

エラーが起きたら、開発者コンソールに表示されるようにしてあります。ユーザーに表示する場合は alert() などを追加すると良いでしょう。

応用するならこんなアイデアも！

  • 発話中はボタンの色やアイコンを変更（録音中マーク）
  • 音声をテキストだけでなく「音声データ」として保存
  • 自動で文字起こしした内容をサーバーに送信
  • 翻訳APIと連携してリアルタイム翻訳チャットに！

よくある質問：Q&A

Q. iPhoneのSafariでも使えますか？

A. 使えません。現状Web Speech APIの音声認識は、Chrome系のブラウザ（PC/Android）限定です。

Q. 録音時間は最大何秒ですか？

A. 明確な上限はありませんが、recognition.stop() を自分で呼び出さないと録音が継続してしまうため、今回の実装のように「ボタンを離したら止める」が重要です。

今後の学習の指針

このアプリをベースに、以下のステップを踏んでレベルアップしていきましょう！

  1. 非同期処理（Promise / async/await）の理解
  2. Web APIとFetchの連携（サーバー送信）
  3. 音声合成（Speech Synthesis）との組み合わせ
  4. Node.jsとExpressを使ったバックエンド追加
  5. スマートフォン対応のUI最適化

音声認識の仕組みを学ぶことで、チャットアプリだけでなく、「音声日記」や「会話記録アプリ」、「読み上げ学習アプリ」などさまざまな応用ができるようになります。