Web Speech Synthesis API (音声合成) で利用可能な音声の一覧を手軽に取得する

こんにちは、kenzauros です。

今作っている Web サービスで Web Speech Synthesis API を利用する機会があり、端末ごとに利用できる言語を列挙したくなったため、 CodePen で簡単に作ってみました。

音声の列挙

といってもこのページを開いていただくと、下記の CodePen のテキストエリアにすでに音声の一覧が表示されているはずです。

List Voices with Web Speech Synthesis API (by CodePen)

See the Pen List Voices with Web Speech Synthesis API by Kenji YAMADA (@kenzauros) on CodePen.

実際には言語というよりは発話可能な音声の種類になっています。

取得方法

そのブラウザーで利用できる音声の一覧は JavaScript で window.speechSynthesis.getVoices() を叩けば配列で取得できます。

各要素は下記のようなオブジェクトになっています。

{
  voiceURI: "Microsoft Haruka Desktop - Japanese",
  name: "Microsoft Haruka Desktop - Japanese",
  lang: "ja-JP",
  localService: true,
  default: true
}

iOS はページロード時に即座に取得可能ですが、 Google Chrome だと window.speechSynthesis.onvoiceschanged でイベントの発生を待つ必要があります。

ということで上記 CodePen では一旦 loadVoices という関数にしてロード時に一回呼んでおき、さらに voiceschanged イベントでも呼んでいます。

function loadVoices() {
  document.getElementById("list").value = window.speechSynthesis
    .getVoices()
    .map(x => [x.name, x.lang].join("\t"))
    .join("\r\n");
};

loadVoices();

window.speechSynthesis.onvoiceschanged = function(e) { loadVoices(); }

これによってテキストエリアに 音声名と言語コードの一覧が表示されるというわけです。

音声一覧の例

Google Chrome (Windows 10) の例

iOS (iPad) の例

iOS の場合、キャラクター名 (?) なので、言語名がわからないのがちょっと不便ですね。

Chrome (Android) の場合

Android の場合、 lang の言語と地域をつなぐ文字がアンダースコアになっていることと、末尾にさらに修飾子がついている場合があるので注意が必要です。