はじめに
Webサイト上に、入力した文章を音声で読み上げる機能を追加したい場合、必ずしもサーバー処理や外部APIが必要になるわけではありません。
ブラウザには、標準機能として音声読み上げに対応しているものがあります。
この機能を利用すると、ユーザーが画面上に文字を入力し、「読み上げる」ボタンを押すだけで、入力した文章を音声で再生できます。
今回作るのは、次のようなシンプルなWebツールです。
テキスト読み上げツール - OYAKUNET｜無料で使える便利ツール集テキスト読み上げツール 入力した文章を、ブラウザ上で音声読み上げできます。 音声 音声を読み込み中... 速度oyaku.net
作るツールの内容
今回作るツールは、次の流れで動きます。
-
ユーザーが文章を入力する
-
読み上げるボタンを押す
-
ブラウザが入力文を音声で読み上げる
-
必要に応じて一時停止・再開・停止する
-
速度・高さ・音量も調整できる
外部APIを使わないため、構成はかなりシンプルです。
必要な技術
今回使う技術は、次の3つです。
技術役割HTML入力欄、ボタン、設定項目を作るCSS見た目を整えるJavaScript入力文を取得し、音声読み上げを実行する
サーバー側の処理は不要です。
PHP、Node.js、データベースなども使いません。
そのため、WordPressの固定ページや投稿ページにも設置しやすい構成です。
音声読み上げに使う仕組み
今回の中心になるのは、JavaScriptの音声合成機能です。
ブラウザには、音声読み上げを行うための機能があります。
JavaScriptでは、主に次の2つを使います。
機能内容speechSynthesis読み上げを実行する機能SpeechSynthesisUtterance読み上げる文章や音声設定をまとめる機能
イメージとしては、次のような流れです。
const utterance = new SpeechSynthesisUtterance('こんにちは');
speechSynthesis.speak(utterance);
このコードだけでも、ブラウザが対応していれば「こんにちは」と読み上げます。フロントエンドだけで作るメリット
フロントエンドだけで作るメリットは大きく分けて4つあります。
1. サーバー費用がかからない
外部APIを使わないため、API利用料が発生しません。
音声読み上げは、ユーザーのブラウザ側で実行されます。
そのため、アクセスが増えても読み上げ処理そのものに課金されることはありません。
2. 実装がシンプル
サーバーとの通信処理が不要です。
HTML、CSS、JavaScriptだけで完結するため、構造が分かりやすくなります。
WordPressのカスタムHTMLブロックに貼り付けるだけでも動かせます。
3. 個人情報を送信しない
入力された文章を外部サーバーに送らず、ブラウザ内で処理できます。
文章の内容をサーバーに保存しない設計にしやすいため、プライバシー面でも扱いやすいです。
ただし、ブラウザや端末の仕様に依存する部分はあります。
4. お役立ちツールサイトと相性が良い
「テキスト読み上げツール」「文章読み上げツール」「日本語読み上げツール」のようなページは、検索需要があります。
シンプルな機能でも、ユーザーの目的が明確です。
お役立ちツール系のサイトに設置する機能として相性が良いです。
注意点
フロントエンドだけで実装する場合、注意点もあります。
1. ブラウザによって音声が異なる
読み上げに使える音声は、ユーザーの端末やブラウザに依存します。
同じコードでも、Windows、Mac、iPhone、Androidで音声の種類が異なる場合があります。
2. 完全に同じ読み上げにはならない
音声の高さ、速度、イントネーションは、環境によって差が出ます。
そのため、「全ユーザーに完全に同じ音声を聞かせる」用途には向いていません。
3. 長文は分割したほうが安定する
非常に長い文章を一度に読み上げると、環境によっては途中で止まる場合があります。
そのため、句点や改行などで文章を分割して読み上げる処理を入れると安定しやすくなります。
今回の完成イメージ
