【コピペOK】JavaScriptを使ってウェブサイト上で音声読み上げする方法【Web Speech API】

const uttr = new SpeechSynthesisUtterance('再生するメッセージ');

uttr.lang = 'ja-JP';

speechSynthesis.speak(uttr);

<h1>音声読み上げデモ</h1>
<div class="main">
  <div class="direction">
    <label for="message">しゃべらせたいセリフを以下に入力<br>(日本語のみ、50字以内)</label>
  </div>
  <div class="chat-area">
    <div class="bio">
      <img id="image" src="https://drive.google.com/uc?export=view&id=1FiOWtMk0oi6tsgKD_lIUNX_M_dBQ0jf1" width="50" height="50" alt="site-logo">
    </div>
    <div class="speech-bubbles">
      <textarea id="message" rows="3" cols="30" maxlength="50"></textarea>
    </div>
  </div>
  <div class="bottom-area">
    <button id="play">再生</button>
  </div>
</div>

h1 {
  text-align: center;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.direction {
  margin-bottom: 0.5rem;
}

.chat-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.speech-bubbles {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-left: 1rem;
}

.bottom-area {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

const message = document.getElementById('message'); // セリフの入力エリア
const playButton = document.getElementById('play'); // 再生ボタン

// 再生ボタンをクリックしたとき、デフォルトの音声で再生
playButton.addEventListener('click', () => {
  const uttr = new SpeechSynthesisUtterance(message.value);
  uttr.lang = 'ja-JP';
  speechSynthesis.speak(uttr);
});

const message = document.getElementById('message'); // セリフの入力エリア
const playButton = document.getElementById('play'); // 再生ボタン

playButton.addEventListener('click', () => {
  // この部分は再生ボタンをクリックしたときに実行される
});

// セリフの入力エリアの中身(message.value)を読み上げるメッセージとしてセットする
const uttr = new SpeechSynthesisUtterance(message.value);

// 日本語に設定する
uttr.lang = 'ja-JP';

// 音声を読み上げる
speechSynthesis.speak(uttr);

const voiceList = speechSynthesis.getVoices();

Microsoft Ayumi - Japanese (Japan)
Microsoft Haruka - Japanese (Japan)
Microsoft Ichiro - Japanese (Japan)
Microsoft Sayaka - Japanese (Japan)
Google Deutsch
Google US English
Google UK English Female
Google UK English Male
(以下省略)

{
  default: true, // デフォルトの音声か
  lang: "ja-JP", // 言語
  localService: true, // OSに付属している音声か
  name: "Microsoft Ayumi - Japanese (Japan)", // 音声の名称
  voiceURI: "Microsoft Ayumi - Japanese (Japan)", // 音声の識別子（一意な値）
}

<select id="voiceSelect"></select>

const voiceSelect = document.getElementById('voiceSelect');

// 音声一覧をセレクトボックスに追加する関数
const addVoiceList = () => {
  const voiceList = speechSynthesis.getVoices();

  for (let i=0; i<voiceList.length; i++) {
    // 日本語の音声以外はスキップ
    if (!voiceList[i].lang.startsWith('ja')) continue;

    // selectタグ内の選択肢として、optionタグを新たに作成
    const newOption = document.createElement('option');

    // optionタグのテキストに音声の名称を設定
    newOption.value = voiceList[i].voiceURI;
    newOption.text = voiceList[i].name;

    // デフォルトの音声の場合、選択済みにする
    newOption.selected = voiceList[i].default;

    // selectタグの選択肢として追加
    voiceSelect.appendChild(newOption);
  }
}

// 音声一覧をセレクトボックスに追加する関数を実行
addVoiceList();

<select id="voiceSelect">
  <option value="Microsoft Ayumi - Japanese (Japan)" selected>Microsoft Ayumi - Japanese (Japan)</option>
  <option value="Microsoft Haruka - Japanese (Japan)">Microsoft Haruka - Japanese (Japan)</option>
  <option value="Microsoft Ichiro - Japanese (Japan)">Microsoft Ichiro - Japanese (Japan)</option>
  <option value="Microsoft Sayaka - Japanese (Japan)">Microsoft Sayaka - Japanese (Japan)</option>
  <option value="Google 日本語">Google 日本語</option>
</select>

// 後から使用できる音声の種類に変更があった場合にこの処理が行われる
speechSynthesis.onvoiceschanged = (e) => {
  // 一度select内のoptionをすべて削除
  while (voiceSelect.firstChild) {
    voiceSelect.removeChild(voiceSelect.firstChild);
  }
  // 再度音声一覧を追加
  addVoiceList();
}

/* 選択した音声の値（voiceSelect.value）とvoiceURIが一致する音声の配列内で、
   最初のもの（0番目）を選択 */
uttr.voice = speechSynthesis
  .getVoices()
  .filter((voice) => voice.voiceURI === voiceSelect.value)[0];