WebSpeechAPIお試しツール作ってみる

はじめに

前回はじめてWeb Speech APIを触ってみてみたが、

今回は、Web Speech APIには音量やピッチだけでなく様々な声の設定ができるようなので

自由にWeb Speech APIの設定して出力できるアプリを作ってみる。

前回の記事

Web Speech API　とは(参考記事)

成果物の画像

プロジェクトの作成

今回は、Svelteベースに作成してみる

(だた、筆者がsvelte(ver5)使ってみたかっただけで選定理由はありません🙇‍♂️)

下記がコードになりますが、

speechSynthesisを扱う際に注意しなければいけないところは、

window.speechSynthesis.getVoices()　は、非同期で読み込まれるため、

Mount時にwindow.speechSynthesis.onvoiceschangedを使用して設定する。

（はじめて使用したときに、このことを知らなくてSelectBoxが空になり焦りました🥲）

App.svelte

  // 略
<script>
  import { onMount } from "svelte";

  let voices = $state([]);
  let voiceIx = $state(0);
  let volume = $state(1);
  let pitch = $state(1);
  let rate = $state(1);
  let text = $state("");

  onMount(() => {
    voices = window.speechSynthesis.getVoices();
    if (
      voices.length > 0 &&
      (voiceIx === undefined || voiceIx >= voices.length)
    ) {
      voiceIx = 0;
    }
    window.speechSynthesis.onvoiceschanged = () => {
      voices = window.speechSynthesis.getVoices();
    };   
  });
  const Speech = () => {
    const utterance = new SpeechSynthesisUtterance();
    utterance.voice = voices[voiceIx];
    utterance.lang = voices[voiceIx].lang;
    utterance.volume = volume;
    utterance.pitch = pitch;
    utterance.rate = rate;
    utterance.text = text;
    speechSynthesis.speak(utterance);
  };
</script>

App.svelte

<main>
  <h1>Web Speech Sample</h1>
  <div class="set">
    <label for="voicetext">VoiceText</label>
    <input type="text" id="voicetext" bind:value={text} />
  </div>
  <div class="set">
    <label for="voice">Voice</label>
    <select name="voice" id="voice" bind:value={voiceIx}>
      {#each voices as voice, i}
        <option value={i}>{voice.name}</option>
      {/each}
    </select>
  </div>
  <div class="set">
    <label for="volume">Volume_{volume}</label>
    <input
      type="range"
      min="0"
      max="1"
      step="0.1"
      id="volume"
      bind:value={volume}
    />
  </div>
  <div class="set">
    <label for="pitch">Pitch_{pitch}</label>
    <input
      type="range"
      min="0"
      max="2"
      step="0.1"
      id="pitch"
      bind:value={pitch}
    />
  </div>
  <div class="set">
    <label for="rate">Rate_{rate}</label>
    <input
      type="range"
      min="0.1"
      max="10"
      step="0.1"
      id="rate"
      bind:value={rate}
    />
  </div>
  <button onclick={Speech}>Speech</button>
</main>

// 略

完成！

成果物ソース

デモURL

ソース

まとめ

Web Speech APIの機能と出力サンプルアプリを実装してみた。

上記で記載した通り、speechSynthesis の voices は非同期で読み込まれるため、

初期化時など注意をして使っていきたい。