index.html

<!-- mostly ChatGPT generated-->
<meta charset="utf-8"/>
<meta content="initial-scale=1,minimum-scale=1,width=device-width" name="viewport"/>
<title>Text-to-Speech Controller</title>
<link rel="stylesheet" href="./style.css"/>
<script src="./script.js" async="async"></script>
<h1>Text-to-Speech Controller</h1>
<p>Enter the text you want to be spoken:</p>
<textarea id="text"></textarea><br/>
<div class="d-flex">
  <button id="speak-button">Speak</button>
  <button id="pause-button">Pause</button>
  <button id="resume-button">Resume</button>
  <button id="stop-button">Stop</button>
</div><br/>
<p>Select a language:</p>
<select id="language-select"></select><br/>
<p>Select a voice:</p>
<select id="voice-select"></select><br/>
<!-- TODO:! input[range] does not show vaule choosen. add: hover title or value text-->
<!-- TODO:-->
<!-- AI: The maximum and minimum values for the rate and pitch properties are not fixed, and may vary depending on the implementation of the speech synthesis API in different browsers. In some browsers, the rate property may have a maximum value of 10, while in others it may have a maximum value of 3 or 4. Similarly, the pitch property may have a maximum value of 2 or 3 in some browsers, while in others it may have a maximum value of 1.5 or 1.75.-->
<p>Adjust the rate of speech:</p>
<input id="rate" type="range" min="0" max="3" value="1" step="0.1"/><br/>
<p>Adjust the pitch of speech:</p>
<input id="pitch" type="range" min="0" max="2" value="1" step="0.1"/><br/>