【JavaScript】Web Speech APIを使ってみよう

Web Speech APIとは

Web Speech APIは、Webブラウザで音声認識や音声合成を実現するためのAPIです。このAPIを使用することで、ユーザーの音声を認識してテキストに変換したり、テキストを音声に変換して再生したりすることができます。

Web Speech APIには2つの主要な機能があります。

音声認識（Speech Recognition）: ユーザーがマイクを介して話す音声を認識し、テキストに変換します。この機能を使用すると、ユーザーが音声コマンドを使用してウェブページ上のアクションを実行したり、音声入力を介してテキストを入力したりすることができます。
音声合成（Speech Synthesis）: テキストを音声に変換し、再生することができます。これにより、ウェブページ上でテキストを音声として読み上げたり、ナビゲーションの案内、音声ベースのアプリケーションの開発などが可能になります。

Web Speech APIは、JavaScriptを使用してブラウザ上でこれらの機能を制御します。ただし、APIが完全にサポートされているわけではなく、ブラウザやデバイスによって実装の範囲やサポート度合いが異なる場合があります。したがって、使用する前にブラウザの互換性を確認する必要があります。

Web Speech APIを使ったサービスの例

Web Speech APIを使用したサービスの例を以下に挙げます。

音声認識アプリケーション: 音声認識を活用するアプリケーションは、テキスト入力の代わりに音声入力を使用してユーザーとの対話やコマンドの受け付けを行います。例えば、音声アシスタントや音声コマンドツール、音声メモアプリなどがあります。
音声制御デバイス: Web Speech APIを使用して、音声コマンドを介してデバイスを制御する製品やシステムがあります。例えば、スマートホームデバイスや音声アクティベーションされたアプリケーション、自動車の音声制御システムなどです。
音声アクセシビリティツール: Web Speech APIを利用して、視覚障害者や身体障害者のためのアクセシビリティ向上ツールが開発されています。これにより、Webページやアプリケーションのコンテンツを音声合成や音声読み上げによって提供することができます。
音声メッセージングアプリ: Web Speech APIを組み込んだメッセージングアプリケーションでは、ユーザーが音声メッセージを録音して送信したり、受信した音声メッセージを再生したりすることができます。これにより、テキスト入力に代わる新しいコミュニケーション手段が提供されます。
言語学習アプリ: Web Speech APIを使用して、言語学習者が発音を練習するためのアプリケーションが開発されています。音声入力を行い、APIが提供する音声認識機能によって発音の正確性を評価したり、音声合成機能を使用して正しい発音をユーザーに提供したりすることが可能です。

Text-to-Speech APIの比較

Web Speech APIと同様の音声認識や音声合成の機能を提供するAPIは、いくつか存在します。以下にいくつかの代表的なAPIを紹介します。

Google Cloud Speech-to-Text API: Google Cloud Speech-to-Text APIは、Google Cloud Platform上で提供されている音声認識サービスです。リアルタイムストリーミングやバッチ処理による音声認識が可能で、高い精度と多言語サポートが特徴です。
IBM Watson Speech to Text API: IBM Watson Speech to Text APIは、IBM Watsonの一部として提供されている音声認識サービスです。様々な音声形式の認識に対応し、カスタムモデルのトレーニングやリアルタイムストリーミングなどの機能が利用できます。
Microsoft Azure Speech Services: Microsoft Azure Speech Servicesは、Microsoft Azure上で提供されている音声認識および音声合成のサービスです。高い精度の音声認識と自然な音声合成を特徴とし、リアルタイム処理やカスタムモデルの作成が可能です。
Whisper API　OpenAIが提供する「Whisper」という音声からテキストへの変換モデルは、2022年9月にオープンソース化されました。このモデルは開発者コミュニティから非常に高い評価を受けています

これらのAPIは、クラウドベースの音声処理サービスとして広く利用されており、Web Speech APIと同様の機能を提供しています。ただし、利用にはAPIキーの取得や料金体系への対応などが必要です。

音声をテキストに変換してみよう

では下記の記事を参考にViteでJavaScriptのプロジェクトを作成して実際にText-to-Speech APIを使ってみましょう。

ViteとBootstrapで最速で開発しよう

ベースとなるコードはこのようになります。

// ブラウザがWeb Speech APIをサポートしているかを確認
if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
  // SpeechRecognitionオブジェクトを作成
  const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();

  // 認識された結果を表示する要素を取得
  const resultElement = document.getElementById('result');

  // 認識されたテキストを取得したときの処理
  recognition.onresult = (event) => {
    const transcript = event.results[0][0].transcript;
    resultElement.textContent = transcript;
  };

  // 認識エラーが発生したときの処理
  recognition.onerror = (event) => {
    console.error('音声認識エラー', event.error);
  };

  // 音声認識を開始する関数
  function startRecognition() {
    recognition.start();
  }

  // 音声認識を停止する関数
  function stopRecognition() {
    recognition.stop();
  }
} else {
  console.error('Web Speech APIはこのブラウザでサポートされていません');
}

ではViteの場合はJavaScriptのファイルにHTMLを追加するようにしているので、下記の様に変換します。また日本語の音声に対応するコードを追加しましょう。

main.js

import './style.css';

document.querySelector('#app').innerHTML = `
  <div>
    <button id="startBtn">音声入力開始</button>
    <h5>結果</h5>
    <div id='result'></div>
  </div>
`;

// ブラウザがWeb Speech APIをサポートしているかを確認
if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
  // SpeechRecognitionオブジェクトを作成
  const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
  
  // 言語を日本語に設定
  recognition.lang = 'ja-JP';

  // 認識された結果を表示する要素を取得
  const resultElement = document.getElementById('result');
  const startBtn = document.getElementById('startBtn');

  // 認識されたテキストを取得したときの処理
  recognition.onresult = (event) => {
    const transcript = event.results[0][0].transcript;
    resultElement.textContent = transcript;
  };

  // 認識エラーが発生したときの処理
  recognition.onerror = (event) => {
    console.error('音声認識エラー', event.error);
  };

  // 音声認識を開始するイベントリスナーを追加
  startBtn.addEventListener('click', () => {
    recognition.start();
  });

  // 音声認識を停止する関数
  function stopRecognition() {
    recognition.stop();
  }
} else {
  console.error('Web Speech APIはこのブラウザでサポートされていません');
}

ではこれでマイクが接続されていることを確認し、ボタンを押してマイクの使用を許可して何かしゃべってみてください。下記の様に音声がテキストに変換されブラウザに表示されるようになりましたね。

このAPIはブラウザで提供されており無料で使えるので色々試してみましょう。（今回はグーグルクロームで行いました。）