コピペで簡単！ブログに英語の音声読み上げボタンを追加する方法【初心者向け】
こんにちは！英語の学習ブログを運営している皆さん、お疲れ様です。
「単語や例文に音声も付けられたら、もっと読者の学習がはかどるのに…」と考えたことはありませんか？
実はそれ、外部のサービスや難しいソフトを使わずに、簡単なコードをコピペするだけで実現できるんです！
この記事では、あなたのブログの
- 英語の文章（長文）
- 英単語の表
この2つのパターンに「🔊 読み上げボタン」を設置する方法を、誰でもできるように丁寧に解説します。完成版コードをコピーして、テキストを自分のものに書き換えるだけですぐに使えますよ！
💡 まずは仕組みを簡単解説
今回使うのは、Web Speech API という技術です。
難しく考える必要はありません。これは「ブラウザ自体に標準で備わっている多言語ナレーター機能」だと思ってください。このナレーターに、簡単な命令文（JavaScript）を使って「この文章を英語で読んで！」とお願いするだけ。だから、音声ファイルを自分で用意する必要が一切ないんです。
それでは、さっそく実践してみましょう！
実践①：文章を丸ごと読み上げるボタンの作り方
長文の例文などを丸ごと読み上げさせたい場合のコードです。
ステップ1：HTMLで文章とボタンを用意する
まず、ブログの記事作成画面で「HTML編集モード」に切り替えて、以下のように記述します。
- 読み上げたい英語の文章を
<p class="english-text">で囲みます。 - そのすぐ下に
<button class="speak-button">を置きます。 - この2つをセットで
<div class="speak-block">という箱に入れます。
<!-- ↓↓↓ このセットを使いたい文章の数だけコピーして使います ↓↓↓ -->
<div class="speak-block">
<p class="english-text">Good morning. Today is starting out as a truly beautiful day.</p>
<button class="speak-button">🔊 Read aloud</button>
</div>
<!-- ↑↑↑ ここまでが1セット ↑↑↑ -->
<div class="speak-block">
<p class="english-text">I like to buy books, because it's like an investment in my future.</p>
<button class="speak-button">🔊 Read aloud</button>
</div>
ステップ2：魔法の呪文（JavaScript）を貼り付ける
次に、このボタンを機能させるためのJavaScriptコードをコピペします。このコードは1ページに1回だけ、記事の一番下に貼り付ければOKです。
<script>
document.addEventListener('DOMContentLoaded', () => {
if ('speechSynthesis' in window) {
let englishVoice = null;
function loadVoices() {
const voices = window.speechSynthesis.getVoices();
// アメリカ英語の音声を探します
englishVoice = voices.find(voice => voice.lang === 'en-US');
}
loadVoices();
if (window.speechSynthesis.onvoiceschanged !== undefined) {
window.speechSynthesis.onvoiceschanged = loadVoices;
}
const speakButtons = document.querySelectorAll('.speak-button');
speakButtons.forEach(button => {
button.addEventListener('click', (event) => {
let textToSpeak = event.currentTarget.previousElementSibling.textContent;
const utterance = new SpeechSynthesisUtterance(textToSpeak);
// 言語を英語に設定します
utterance.lang = 'en-US';
if (englishVoice) {
utterance.voice = englishVoice;
}
window.speechSynthesis.cancel();
window.speechSynthesis.speak(utterance);
});
});
}
});
</script>
✨ 文章読み上げの完成コード（全体像）
下のコードを丸ごとコピーして、<p class="english-text">の中身をあなたの文章に入れ替えれば、すぐに動作を確認できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文章読み上げサンプル</title>
<style>
.speak-block { margin-bottom: 1em; }
.english-text { font-style: italic; background-color: #ecf0f1; padding: 15px; border-radius: 5px 5px 0 0; border: 1px solid #ddd; margin: 0; }
.speak-button { background-color: #3498db; color: white; border: none; padding: 8px 12px; border-radius: 0 0 5px 5px; cursor: pointer; width: 100%; border: 1px solid #2980b9; border-top: none; }
.speak-button:hover { background-color: #2980b9; }
</style>
</head>
<body>
<h3>例文の読み上げ</h3>
<div class="speak-block">
<p class="english-text">Good morning. Today is starting out as a truly beautiful day.</p>
<button class="speak-button">🔊 Read aloud</button>
</div>
<!-- ページの一番下に1回だけ貼り付ける -->
<script>
/* ... 上記のJavaScriptコード ... */
</script>
</body>
</html>
実践②：単語表の単語を読み上げるボタンの作り方
単語リストの一つ一つの単語を読み上げさせたい場合のコードです。
ステップ1：HTMLで表とボタンを用意する
表の中の「発音」列に、<button class="speak-btn-table">🔊</button>を設置します。
<table>
<thead>
<tr>
<td><strong>英単語</strong></td>
<td><strong>発音</strong></td>
<td><strong>日本語訳</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td>water</td>
<td><button class="speak-btn-table">🔊</button></td>
<td>水</td>
</tr>
<tr>
<td>apple</td>
<td><button class="speak-btn-table">🔊</button></td>
<td>リンゴ</td>
</tr>
</tbody>
</table>
ステップ2：単語表用の魔法の呪文（JavaScript）を貼り付ける
こちらも1ページに1回だけ、記事の一番下に貼り付ければOKです。
<script>
document.addEventListener('DOMContentLoaded', () => {
if ('speechSynthesis' in window) {
let englishVoice = null;
function loadVoices() {
const voices = window.speechSynthesis.getVoices();
// アメリカ英語の音声を探します
englishVoice = voices.find(voice => voice.lang === 'en-US');
}
loadVoices();
if (window.speechSynthesis.onvoiceschanged !== undefined) {
window.speechSynthesis.onvoiceschanged = loadVoices;
}
const speakButtons = document.querySelectorAll('.speak-btn-table');
speakButtons.forEach(button => {
button.addEventListener('click', (event) => {
const row = event.currentTarget.closest('tr');
const textToSpeak = row.querySelector('td:first-child').textContent.trim();
if (textToSpeak) {
const utterance = new SpeechSynthesisUtterance(textToSpeak);
// 言語を英語に設定します
utterance.lang = 'en-US';
if (englishVoice) {
utterance.voice = englishVoice;
}
window.speechSynthesis.cancel();
window.speechSynthesis.speak(utterance);
}
});
});
}
});
</script>
【重要】iPhoneでの注意点とコードの設置場所
iPhoneでの再生について
このコードはiPhoneでも動作しますが、最高のパフォーマンスを発揮させるには、iPhone側に英語の音声データがインストールされている必要があります（通常はデフォルトで入っています）。もし発音が不自然な場合は、読者さんに以下の設定を案内してあげると親切です。
コードの設置場所
- HTML: ブログ記事エディタの「テキストモード」や「HTMLモード」で、記事の本文として貼り付けます。
- CSS (
<style>タグ): ブログ全体のCSS設定に記述するのが望ましいですが、よく分からなければ、HTMLコードの<head>タグの中にそのまま貼り付けてもOKです。 - JavaScript (
<script>タグ): 必ず記事の最後、</body>タグの直前に貼り付けてください。
まとめ
いかがでしたか？思ったより簡単だったのではないでしょうか。
この機能をブログに追加すれば、読者の満足度が格段に上がり、より価値のある学習コンテンツを提供できます。ぜひ、あなたのブログにも導入して、英語学習をサポートしてあげてくださいね！🚀
