kazuhito-m/WebSpeechAPISpeechSynthesis.html

## WebSpeechAPISpeechSynthesis.html
<!DOCTYPE html>
<html>
  <head>
    <title>Web Speech API Speech Synthesis の基本的なサンプル</title>
  </head>
  <body>
    <h1> Web Speech API Speech Synthesis の基本的なサンプル</h1>
    <p><textarea id="speachText">日本語でしゃべります。ro-majidemo,ikemasu.</textarea></p>
    <p>
      rate:
      <input type="number" id="rateText" min="0.1" max="2" value="1">
      <input type="range" id="rateRange" min="0.1" max="2" step="0.1" value="1">
    </p>
    <p>
      pitch:
      <input type="number" id="pitchText" min="0" max="2" value="1">
      <input type="range" id="pitchRange" min="0" max="2" step="0.1" value="1">
    </p>
    <p>
      volume:
      <input type="number" id="volumeText" min="0" max="1" value="0.5">
      <input type="range" id="volumeRange" min="0" max="1" step="0.01" value="0.5">
    </p>
    <p>
      voice (声タイプ):
      <select id="voiceSelector"></select>
      <input type="checkbox" id="onlyJapaneseVocieCheck" checked>日本語で絞る</input>
    </p>
    <button id="speachExecute">喋らせる</button>
    <hr>
    参考
    <ul>
      <li><a href="https://developer.mozilla.org/ja/docs/Web/API/SpeechSynthesis">https://developer.mozilla.org/ja/docs/Web/API/SpeechSynthesis</a></li>
      <li><a href="https://developer.mozilla.org/ja/docs/Web/API/SpeechSynthesisUtterance">https://developer.mozilla.org/ja/docs/Web/API/SpeechSynthesisUtterance</a></li>
      <li><a href="https://qiita.com/hmmrjn/items/be29c62ba4e4a02d305c">https://qiita.com/hmmrjn/items/be29c62ba4e4a02d305c</a></li>
      <li><a href="https://stackoverflow.com/questions/21513706/getting-the-list-of-voices-in-speechsynthesis-web-speech-api">https://stackoverflow.com/questions/21513706/getting-the-list-of-voices-in-speechsynthesis-web-speech-api</a></li>
    </ul>
  </body>
  <script type="text/javascript">
    function executeSpeach(speachText, voice, rate, pitch, volume) {
      const uttr = new SpeechSynthesisUtterance();
      uttr.text = speachText;
      uttr.rate = rate;
      uttr.pitch = pitch
      uttr.volume = volume;
      uttr.voice = voice;
      speechSynthesis.speak(uttr);
    }

    function clearOptionOnSelect(selectElement) {
      while (selectElement.childNodes.length > 0)
        selectElement.removeChild(selectElement.firstChild)
    }

    function writeVoiceSelector(selectElement, onlyJapaneseVocie) {
      clearOptionOnSelect(selectElement);
      const voices = speechSynthesis.getVoices();
      voices.forEach((voice) => {
        if (onlyJapaneseVocie && !voice.lang.match('ja')) return;
        const option = document.createElement("option");
        option.value = voice.name;
        option.text = voice.name + " (" + voice.lang + ")";
        option.setAttribute("selected", voice.default);
        selectElement.appendChild(option);
      });
    }

    function picupVoice(voiceSelectorElement) {
      const voiceTypeName = voiceSelectorElement.value;
      return speechSynthesis
        .getVoices()
        .filter(voice => voice.name === voiceTypeName)[0];
    }

    // main(onLoad())

    const buttonElement = document.getElementById("speachExecute");
    const speachTextElement = document.getElementById("speachText");
    const voiceSelectorElement = document.getElementById("voiceSelector");

    const rateText = document.getElementById("rateText");
    const rateRange = document.getElementById("rateRange");
    const pitchText = document.getElementById("pitchText");
    const pitchRange = document.getElementById("pitchRange");
    const volumeText = document.getElementById("volumeText");
    const volumeRange = document.getElementById("volumeRange");
    const onlyJapaneseVocieCheck = document.getElementById("onlyJapaneseVocieCheck");

    const initVoiceSelector =
         () => writeVoiceSelector(voiceSelectorElement, onlyJapaneseVocieCheck.checked);

    const awaitVoices = new Promise(resolve => speechSynthesis.onvoiceschanged = resolve)
        .then(initVoiceSelector);
    onlyJapaneseVocieCheck.addEventListener("click", initVoiceSelector);

    buttonElement.addEventListener("click",
      () => executeSpeach(
        speachTextElement.value,
        picupVoice(voiceSelectorElement),
        rateRange.value,
        pitchRange.value,
        volumeRange.value
      )
    );

    rateText.addEventListener("input", () => rateRange.value = rateText.value);
    rateRange.addEventListener("input", () => rateText.value = rateRange.value);
    pitchText.addEventListener("input", () => pitchRange.value = pitchText.value);
    pitchRange.addEventListener("input", () => pitchText.value = pitchRange.value);
    volumeText.addEventListener("input", () => volumeRange.value = volumeText.value);
    volumeRange.addEventListener("input", () => volumeText.value = volumeRange.value);

    const url = new URL(window.location.href);
    const params = url.searchParams;
    const initialSpeachText = params.get("speachText");
    if (initialSpeachText) speachTextElement.value = initialSpeachText;
  </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Web Speech API Speech Synthesis の基本的なサンプル</title>
	</head>
	<body>
	<h1> Web Speech API Speech Synthesis の基本的なサンプル</h1>
	<p><textarea id="speachText">日本語でしゃべります。ro-majidemo,ikemasu.</textarea></p>
	<p>
	rate:
	<input type="number" id="rateText" min="0.1" max="2" value="1">
	<input type="range" id="rateRange" min="0.1" max="2" step="0.1" value="1">
	</p>
	<p>
	pitch:
	<input type="number" id="pitchText" min="0" max="2" value="1">
	<input type="range" id="pitchRange" min="0" max="2" step="0.1" value="1">
	</p>
	<p>
	volume:
	<input type="number" id="volumeText" min="0" max="1" value="0.5">
	<input type="range" id="volumeRange" min="0" max="1" step="0.01" value="0.5">
	</p>
	<p>
	voice (声タイプ):
	<select id="voiceSelector"></select>
	<input type="checkbox" id="onlyJapaneseVocieCheck" checked>日本語で絞る</input>
	</p>
	<button id="speachExecute">喋らせる</button>
	<hr>
	参考
	<ul>
	<li><a href="https://developer.mozilla.org/ja/docs/Web/API/SpeechSynthesis">https://developer.mozilla.org/ja/docs/Web/API/SpeechSynthesis</a></li>
	<li><a href="https://developer.mozilla.org/ja/docs/Web/API/SpeechSynthesisUtterance">https://developer.mozilla.org/ja/docs/Web/API/SpeechSynthesisUtterance</a></li>
	<li><a href="https://qiita.com/hmmrjn/items/be29c62ba4e4a02d305c">https://qiita.com/hmmrjn/items/be29c62ba4e4a02d305c</a></li>
	<li><a href="https://stackoverflow.com/questions/21513706/getting-the-list-of-voices-in-speechsynthesis-web-speech-api">https://stackoverflow.com/questions/21513706/getting-the-list-of-voices-in-speechsynthesis-web-speech-api</a></li>
	</ul>
	</body>
	<script type="text/javascript">
	function executeSpeach(speachText, voice, rate, pitch, volume) {
	const uttr = new SpeechSynthesisUtterance();
	uttr.text = speachText;
	uttr.rate = rate;
	uttr.pitch = pitch
	uttr.volume = volume;
	uttr.voice = voice;
	speechSynthesis.speak(uttr);
	}

	function clearOptionOnSelect(selectElement) {
	while (selectElement.childNodes.length > 0)
	selectElement.removeChild(selectElement.firstChild)
	}

	function writeVoiceSelector(selectElement, onlyJapaneseVocie) {
	clearOptionOnSelect(selectElement);
	const voices = speechSynthesis.getVoices();
	voices.forEach((voice) => {
	if (onlyJapaneseVocie && !voice.lang.match('ja')) return;
	const option = document.createElement("option");
	option.value = voice.name;
	option.text = voice.name + " (" + voice.lang + ")";
	option.setAttribute("selected", voice.default);
	selectElement.appendChild(option);
	});
	}

	function picupVoice(voiceSelectorElement) {
	const voiceTypeName = voiceSelectorElement.value;
	return speechSynthesis
	.getVoices()
	.filter(voice => voice.name === voiceTypeName)[0];
	}

	// main(onLoad())

	const buttonElement = document.getElementById("speachExecute");
	const speachTextElement = document.getElementById("speachText");
	const voiceSelectorElement = document.getElementById("voiceSelector");

	const rateText = document.getElementById("rateText");
	const rateRange = document.getElementById("rateRange");
	const pitchText = document.getElementById("pitchText");
	const pitchRange = document.getElementById("pitchRange");
	const volumeText = document.getElementById("volumeText");
	const volumeRange = document.getElementById("volumeRange");
	const onlyJapaneseVocieCheck = document.getElementById("onlyJapaneseVocieCheck");

	const initVoiceSelector =
	() => writeVoiceSelector(voiceSelectorElement, onlyJapaneseVocieCheck.checked);

	const awaitVoices = new Promise(resolve => speechSynthesis.onvoiceschanged = resolve)
	.then(initVoiceSelector);
	onlyJapaneseVocieCheck.addEventListener("click", initVoiceSelector);

	buttonElement.addEventListener("click",
	() => executeSpeach(
	speachTextElement.value,
	picupVoice(voiceSelectorElement),
	rateRange.value,
	pitchRange.value,
	volumeRange.value
	)
	);

	rateText.addEventListener("input", () => rateRange.value = rateText.value);
	rateRange.addEventListener("input", () => rateText.value = rateRange.value);
	pitchText.addEventListener("input", () => pitchRange.value = pitchText.value);
	pitchRange.addEventListener("input", () => pitchText.value = pitchRange.value);
	volumeText.addEventListener("input", () => volumeRange.value = volumeText.value);
	volumeRange.addEventListener("input", () => volumeText.value = volumeRange.value);

	const url = new URL(window.location.href);
	const params = url.searchParams;
	const initialSpeachText = params.get("speachText");
	if (initialSpeachText) speachTextElement.value = initialSpeachText;
	</script>
	</html>