sync

2024-08-15 20:46:04 -04:00 · 2024-08-15 20:46:04 -04:00 · 832777d851
commit 832777d851
parent 3988017d55
3 changed files with 149 additions and 0 deletions
--- a/speak/index.html
+++ b/speak/index.html
@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" type="text/css" href="/menu/menu.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+  <script defer data-domain="chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+
+  <title>Speak</title>
+  <style>
+
+  </style>
+  <script defer src="script.js" ></script>
+  <script defer src="/menu/menu.js"></script>
+
+</head>
+<body>
+<div id="navContainer"></div>
+<main>
+ 
+  
+  <textarea id="text" placeholder="enter word here to hear it..."></textarea>
+  <label for="speed">Speed</label>
+  <input type="number" name="speed" id="speed" min=".5" max="3" step=".5" value="1">
+ <div class="buttons_div">
+  <button class="buttons" id="play-button"><i class="fa fa-play-circle" aria-hidden="true"></i></button>
+  <button class="buttons" id="pause-button"><i class="fa fa-pause-circle" aria-hidden="true"></i></button>
+  <button class="buttons" id="stop-button"><i class="fa fa-stop-circle" aria-hidden="true"></i></button>
+ </div>
+
+</main>
+
+ 
+
+</body>
+</html>
--- a/speak/script.js
+++ b/speak/script.js
@ -0,0 +1,54 @@
+const playButton = document.getElementById('play-button')
+const pauseButton = document.getElementById('pause-button')
+const stopButton = document.getElementById('stop-button')
+const textInput = document.getElementById('text')
+const speedInput = document.getElementById('speed')
+let currentCharacter
+
+
+const utterance = new SpeechSynthesisUtterance()
+
+utterance.addEventListener('end', () => {
+
+textInput.disabled = false
+
+})
+
+utterance.addEventListener('boundary', e => {
+
+currentCharacter = e.charIndex
+
+})
+
+
+playButton.addEventListener('click', () => {
+  playText(textInput.value)
+})
+pauseButton.addEventListener('click', pauseText)
+stopButton.addEventListener('click', stopText)
+speedInput.addEventListener('input', () => {
+  stopText()
+  playText(utterance.text.substring(currentCharacter))
+})
+
+
+function playText(text) {
+  if (speechSynthesis.paused && speechSynthesis.speaking) {
+    return speechSynthesis.resume()
+  }
+  if (speechSynthesis.speaking) return
+  utterance.text = text
+  utterance.rate = speedInput.value || 1
+  textInput.disabled = true
+  speechSynthesis.speak(utterance)
+}
+
+function pauseText() {
+  if (speechSynthesis.speaking) speechSynthesis.pause()
+}
+
+function stopText() {
+  speechSynthesis.resume();
+  speechSynthesis.cancel();
+  document.getElementById("text").value = ""
+}
--- a/speak/style.css
+++ b/speak/style.css
@ -0,0 +1,55 @@
+body {
+height: 100%;
+
+
+background-color: darkred;
+}
+
+
+#text {
+display: flex;
+justify-self: center;
+margin: auto;
+width: 75%;
+margin-top: 30vh;
+padding: 7px;
+border-radius: 15px;
+font-size: 2rem;
+
+}
+label{
+    display: none
+}
+
+#speed{
+    display: none;
+    justify-self: center;
+    width: 1rem;
+
+}
+#pause-button{
+    display: none;
+}
+.buttons_div{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+.buttons{
+display: flex;
+justify-content: center;
+align-content: center;
+margin: 2rem;
+background-color: transparent;
+font-size: 5rem;
+flex-direction: row;
+border: none;
+}
+
+
+main{
+    display: flex;
+    align-content: center;
+    flex-direction: column;
+    justify-content: center;
+}