WordPressにテキスト音声読み上げ機能を実装する方法。プラグイン無し。

今回は、WordPressのサイトに「テキストの音声読み上げ機能」を、プラグインを使わずに実装する方法をご紹介します。

「アクセシビリティを高めたい」「語学学習コンテンツを作りたい」といった場合に非常に便利な機能です。専門的な知識は不要で、基本的にコピー＆ペーストだけで実装できるので、ぜひ挑戦してみてください。

完成すると、このように日本語と英語をそれぞれ適切な発音で読み上げるテキストエリアを設置できます。

デモ画面で試してみよう
実装は「カスタムHTML」ブロックに貼るだけ
1. 日本語・英語読み上げ用のコード
【少し詳しく】Web Speech APIの仕様解説
まとめ

デモ画面で試してみよう

まずは下のボタンを押下してみてください。テキストエリアの文字を読み上げてくれます。。

日本語テキスト

English Text

実装は「カスタムHTML」ブロックに貼るだけ

実装は非常に簡単です。WordPressの投稿や固定ページの編集画面で**「カスタムHTML」ブロック**を追加し、これから紹介するコードを貼り付けるだけで完了します。

日本語・英語読み上げ用のコード

以下のコードをすべてコピーして、カスタムHTMLブロックに貼り付けてください。

<div>
  <h5>日本語テキスト</h5>
  <textarea id="text-to-speak-ja" rows="5" style="width:100%;">こんにちは。ブラウザの音声合成機能のデモです。</textarea>
  <button id="speak-btn-ja" style="margin-top: 1px; padding: 5px 20px; border: none; background-color: #0073aa; color: white; border-radius: 10px; cursor: pointer;">日本語で読み上げる</button>
</div>

<div style="margin-top:25px;">
  <h5>English Text</h5>
  <textarea id="text-to-speak-en" rows="5" style="width:100%;">Hello. This is a demonstration of the browser's speech synthesis feature.</textarea>
  <button id="speak-btn-en" style="margin-top: 1px; padding: 5px 20px; border: none; background-color: #2ca02c; color: white; border-radius: 10px; cursor: pointer;">Read in English</button>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 日本語
  const btnJa = document.getElementById('speak-btn-ja');
  const txtJa = document.getElementById('text-to-speak-ja');
  
  btnJa.addEventListener('click', function() {
    const utterance = new SpeechSynthesisUtterance(txtJa.value);
    utterance.lang = 'ja-JP';
    window.speechSynthesis.speak(utterance);
  });

  // 英語
  const btnEn = document.getElementById('speak-btn-en');
  const txtEn = document.getElementById('text-to-speak-en');
  
  btnEn.addEventListener('click', function() {
    const utterance = new SpeechSynthesisUtterance(txtEn.value);
    utterance.lang = 'en-US';
    window.speechSynthesis.speak(utterance);
  });
  
  // 安全対策
  window.addEventListener('beforeunload', function() {
    window.speechSynthesis.cancel();
  });
});
</script>

たったこれだけで、あなたのページに音声読み上げ機能が実装されました！

【少し詳しく】Web Speech APIの仕様解説

今回利用しているのは、Web Speech API という、ブラウザに標準で搭載されている機能の一部です。

この機能はWordPress専用のものではなく、HTMLとJavaScriptが使える環境であれば、どんなウェブサイトでも利用できる標準的なWeb技術です。

より詳しい技術仕様に興味がある方は、以下のリファレンスサイトも参考にしてみてください。

公式仕様: MDN Web Docs: Web Speech API

このAPIを使うことで、JavaScriptから簡単にブラウザの音声合成（テキスト読み上げ）や音声認識を操作できます。

ここでは、今回のテキスト読み上げで使っている「音声合成（Speech Synthesis）」について、少し詳しく見ていきましょう。

登場する主なオブジェクト

音声合成は、主に2つのオブジェクト（命令を出すための部品のようなもの）を組み合わせて使います。

SpeechSynthesis: ブラウザの音声合成機能を制御する司令塔です。読み上げの実行、一時停止、再開、停止などの命令を出します。window.speechSynthesis という形でアクセスできます。
SpeechSynthesisUtterance: 「発話」そのものを表すオブジェクトです。ここに、「何を（text）」「どの言語で（lang）」「どんな速さで（rate）」話すか、といった詳細な設定を格納します。

コードの流れとしては、 ① SpeechSynthesisUtterance に発話内容を設定し、 ② それを SpeechSynthesis に speak() メソッドで渡して実行してもらう というイメージです。

SpeechSynthesisUtteranceの主な設定項目

utterance には、読み上げ方を細かく設定できるプロパティがたくさん用意されています。

プロパティ	説明	例
`text`	【必須】読み上げる文字列。	`utterance.text = 'サンプルです';`
`lang`	【重要】言語コード。これを正しく設定しないと、意図しない発音になります（例: 日本語を英語っぽく読んでしまう）。	`utterance.lang = 'ja-JP';` (日本語) `utterance.lang = 'en-US';` (アメリカ英語)
`rate`	読み上げの速さ。`0.1`（遅い）～`10`（速い）の範囲で指定。`1` が標準です。	`utterance.rate = 1.2;` (少し速く)
`pitch`	声の高さ。`0`（低い）～`2`（高い）の範囲で指定。`1` が標準です。	`utterance.pitch = 0.8;` (少し低く)
`volume`	音量。`0`（無音）～`1`（最大）の範囲で指定。`1` が標準です。	`utterance.volume = 0.9;` (少し小さく)
`voice`	使用する音声。ブラウザやOSにインストールされている音声を選択できますが、少し高度な設定が必要です。	–

今回のコードでは、特に重要なlangプロパティを日本語用では 'ja-JP'、英語用では 'en-US' と切り替えることで、それぞれの言語に合った自然な発音を実現しています。

注意点

対応ブラウザ: この機能はChrome, Safari, Edge, Firefoxなどの主要なモダンブラウザで動作しますが、Internet Explorerなどの古いブラウザでは対応していません。
詳細はMDN Web Docsのページをご覧ください。
利用できる音声: 実際に再生される声の種類は、ユーザーが使っているOS（Windows, macOS, Androidなど）やブラウザに依存します。不特定多数に向けたサイトの場合は、サーバー側で特定の声質を指定することは難しいです。
なお、ChromeのWeb Speechは、昔から音声種類によっては15秒間しか音声出力できない問題がありましたが、2025年に改善したようです（私の検証では長時間音声出力可能になりました）。

まとめ

いかがでしたでしょうか。プラグインを追加することなく、HTMLと少しのJavaScriptだけで、高機能な音声読み上げ機能を実装する方法をご紹介しました。

コード内のrateやpitchの数値を変更して、声の速さや高さを変えてみるのも面白いですよ。ぜひ、あなたのサイトでもこの機能を活用してみてください！