「とりまわかるTTS」というお話

こんにちは、開発本部の宮内です。先日のメドレーの社内勉強会「TechLunch」で、「とりまわかるTTS」と題してWeb Speech APIのお話をしました。

 Web Speech APIとは？

macOSに、sayというコマンドがあるのはご存知でしょうか？ このコマンドは引数で受け取った文字列を発音してくれるというコマンドです。

ターミナルアプリを開いて、次のようなコマンドを入力してみてください。

say -v Kyoko "ご用件は何でしょう？"

このようにテキストから人間の声のように発音させる仕組みを音声合成といいます。

このような音声合成や音声認識に関してはmacOS以外にもAmazon TranscribeやGoogle Cloud Speech APIなどのクラウドサービスやAndroidではTextToSpeechクラスというAPIが用意されていたりもします。

今回の発表で使ったWeb Speech APIは、ブラウザでこれらの音声合成・認識を行うためのAPI仕様です。

 実際に試してみる

音声合成のサンプルページを作りましたので、サンプルプログラムを抜粋して使い方の説明をしていきます。

 voiceschangedイベント内で利用可能な音声を取得する

const speechSynthesis = window.speechSynthesis;

speechSynthesis.addEventListener("voiceschanged", () => {
  buildVoiceOption($voices, speechSynthesis.getVoices());
});

window.speechSynthesis.getVoices関数を使うと利用可能な音声の一覧が取得できます。

ただし、ページロード直後ですと、タイミングによっては空配列が帰ってくることがあります。 そのため、voiceschangedイベントを受け取ってから、window.speechSynthesis.getVoices関数を呼び出すことによって、確実に実行できるようにしています。

返却されてくるvoiceは仕様としてはユーザエージェントとブラウザの場合だとローカルに用意されている音声の種類で決ってくることになっています。

macOSの日本語であれば以下のような種類のvoiceが返ってきます。

buildVoiceOptionは利用する音声をselectタグで選択できるように設定する関数なので割愛します。

 SpeechSynthesisUtteranceで音声の設定をしていく

SpeechSynthesisUtteranceとは以下のような働きをするAPIになります。

Web Speech APIのSpeechSynthesisUtteranceインターフェイスは、音声要求を表現します。 これには、音声サービスが読むべき内容とその読み方に関する情報(例えば、言語、ピッチ、音量など)が含まれています。

https://developer.mozilla.org/ja/docs/Web/API/SpeechSynthesisUtterance

SpeechSynthesisを使って実際に音声を発音させるにはこのAPIを使ってどのように発音させるのか？を設定していく必要があります。

function setVoice(utterance, voices, voiceName) {
  const choices = voices.filter(voice => voice.name === voiceName);
  if (choices.length > 0) {
    utterance.voice = choices[0];
  } else {
    const defaultVoice = voices.find(voice => voice.default);
    if (defaultVoice) {
      utterance.voice = defaultVoice;
    }
  }
}

$form.addEventListener("submit", event => {
  event.preventDefault();
  const utterance = new SpeechSynthesisUtterance($textarea.value);
  setVoice(utterance, speechSynthesis.getVoices(), $voices.selectedOptions[0].dataset.name);
  utterance.pitch = $pitch.valueAsNumber;
  utterance.rate = $rate.valueAsNumber;
  utterance.volume = $volume.valueAsNumber;
  speechSynthesis.speak(utterance);
});

フォームがサブミットされたら SpeechSynthesisUtteranceクラスのインスタンスを作成し、 それを引数にspeechSynthesis.speak関数を呼び出せば、テキストボックスに入力されたテキストとSpeechSynthesisUtteranceで設定したピッチ、音量などを元に設定された音声が出力されるようにしています。

（サンプルプログラムではエラー処理を省いているため、ピッチや音量の調整スライダーで極端な値を指定すると、正しく音声が出力されないことがあります）

今回の記事では紹介していませんが、Web Speech APIにはもうひとつSpeechRecognition APIがあり、こちらは音声認識をブラウザでできるようにするAPIになっています。興味があればぜひ調べてみてください。

 まとめ

今回はWeb Speech APIの音声合成のさわりを紹介しましたが、ご覧のとおりとても簡単に使うことができます。

例えば、ブラウザの内容の読み上げをしてアクセシビリティを高めたりなどの使い方や、読みが難しい専門用語の発音を聞かせるようにするなど色々な使いかたが考えられるのではないでしょうか？

この記事をご覧のみなさんもちょっと忘れかけられた、このAPIを使ってみてはいかがでしょう？