(Sample)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Webページの読み上げ</title>
</head>
<body>
<a href="#" id="closeWindow">このウィンドウを閉じる</a>
<h1>Webページの読み上げデモ</h1>
<div id="text">
<p>吾輩は猫である。名前はまだ無い。</p>
<p>どこで生れたかとんと見当がつかぬ。</p>
<p>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
<p>吾輩はここで初めて人間というものを見た。</p>
<p>しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
<p>この書生というのは時々我々を捕えて煮て食うという話である。</p>
<p>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</p>
<p>ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
<p>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう</p>
</div>
<button id="speakToggleButton">読み上げる</button>
<button id="pauseToggleButton">読み上げ一時停止</button>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
const speakToggleButton = document.getElementById('speakToggleButton');
const pauseToggleButton = document.getElementById('pauseToggleButton');
const textElement = document.getElementById('text');
let utterance;
// 読み上げトグルボタンのクリックイベントを設定
speakToggleButton.addEventListener('click', () => {
if ('speechSynthesis' in window) {
if (speakToggleButton.textContent === '読み上げる') {
const text = textElement.textContent; // 読み上げたいテキストを取得
utterance = new SpeechSynthesisUtterance(text); // 読み上げるテキストを設定
utterance.lang = 'ja-JP'; // 日本語の言語コードを設定
utterance.pitch = 1; // ピッチを設定 (0から2の範囲)
utterance.rate = 1; // 読み上げ速度を設定 (0.1から10の範囲)
utterance.volume = 1; // 音量を設定 (0から1の範囲)
// 読み上げを開始
window.speechSynthesis.speak(utterance);
speakToggleButton.textContent = '読み上げ停止';
} else {
window.speechSynthesis.cancel(); // 読み上げを停止
speakToggleButton.textContent = '読み上げる';
}
} else {
alert('このブラウザはWeb Speech APIをサポートしていません。');
}
});
// 読み上げ一時停止トグルボタンのクリックイベントを設定
pauseToggleButton.addEventListener('click', () => {
if ('speechSynthesis' in window) {
if (pauseToggleButton.textContent === '読み上げ一時停止') {
window.speechSynthesis.pause(); // 読み上げを一時停止
pauseToggleButton.textContent = '読み上げ再開';
} else {
window.speechSynthesis.resume(); // 読み上げを再開
pauseToggleButton.textContent = '読み上げ一時停止';
}
}
});
});
</script>
<script src="script.js"></script>
</body>
</html>