<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>テキスト読み上げ</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 10px;
background-color: mediumseagreen;
color: white;
}
textarea {
direction: ltr;
text-align: left;
}
</style>
</head>
<body>
<h3>テキスト読み上げ</h3>
<textarea id="userText" rows="8" cols="55"></textarea><br>
<!-- textarea に入力されたテキストを読み上げ -->
<label>速 度: <input type="range" id="rate" min="0.5"
max="2" step="0.1" value="1"></label><br>
<label>音 程: <input type="range" id="pitch" min="0.5"
max="2" step="0.1" value="1"></label><br>
<label>音 量: <input type="range" id="volume"
min="0" max="1" step="0.1" value="1"></label><br>
<!-- rate (速度): 0.5（遅い）～ 2.0（速い）
pitch (音程): 0.5（低い）～ 2.0（高い）
volume (音量): 0.0（ミュート）～ 1.0（最大）-->
<label>声を選択:
<select id="voiceSelect"></select></label><br><br>
<button onclick="speakText()">▶ 読み上げ</button>
<button onclick="pauseSpeech()">⏸ 一時停止</button>
<button onclick="resumeSpeech()">▶ 再 開</button>
<button onclick="stopSpeech()">⏹ 停 止</button>
<script>
let voices = [];
let utterance = new SpeechSynthesisUtterance();
// 音声リストを取得してドロップダウンに追加
// speechSynthesis.getVoices(); を使い、
// ブラウザが提供する音声リストを取得
// option を生成して <select> に追加
function loadVoices() {
voices = speechSynthesis.getVoices();
let voiceSelect = document.getElementById("voiceSelect");
voiceSelect.innerHTML = "";
voices.forEach((voice, index) => {
let option = document.createElement("option");
option.value = index;
option.textContent = `${voice.name} (${voice.lang})`;
voiceSelect.appendChild(option);
});
}
// 開始 (speakText()) → speechSynthesis.speak(utterance);
function speakText() {
if (speechSynthesis.speaking) {
speechSynthesis.cancel(); // 連続読み上げ防止
}
utterance.text =
document.getElementById("userText").value;
utterance.rate =
document.getElementById("rate").value; // 速度
utterance.pitch =
document.getElementById("pitch").value; // 声の高さ
utterance.volume =
document.getElementById("volume").value; // 音量
let selectedVoice =
voices[document.getElementById("voiceSelect").value];
if (selectedVoice) {
utterance.voice = selectedVoice;
}
speechSynthesis.speak(utterance);
}
// 一時停止 (pauseSpeech()) → speechSynthesis.pause();
function pauseSpeech() {
speechSynthesis.pause(); // 一時停止
}
// 再開 (resumeSpeech()) → speechSynthesis.resume();
function resumeSpeech() {
speechSynthesis.resume(); // 再開
}
// 停止 (stopSpeech()) → speechSynthesis.cancel();
function stopSpeech() {
speechSynthesis.cancel(); // 停止
}
// 音声データがロードされたときに実行
speechSynthesis.onvoiceschanged = loadVoices;
</script>
</body>
</html>
