Developer Portal

「とりまわかる 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 イベント内で利用可能な音声を取得する

constspeechSynthesis = window.speechSynthesis;

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

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

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

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

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

f:id:medley_inc:20181019115926p:plain

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) {
  constchoices = 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 を使ってみてはいかがでしょう？

前の記事 次の記事