From 674cfa69c289d802d24a03a96ea4e9f728a35152 Mon Sep 17 00:00:00 2001 From: Reza Mehdikhanlou Date: Mon, 13 Mar 2023 00:31:43 +0330 Subject: [PATCH] Adding Day #19 --- Day #19 - Text To Speech App/index.html | 35 +++++++ Day #19 - Text To Speech App/index.js | 58 +++++++++++ Day #19 - Text To Speech App/style.css | 124 ++++++++++++++++++++++++ 3 files changed, 217 insertions(+) create mode 100644 Day #19 - Text To Speech App/index.html create mode 100644 Day #19 - Text To Speech App/index.js create mode 100644 Day #19 - Text To Speech App/style.css diff --git a/Day #19 - Text To Speech App/index.html b/Day #19 - Text To Speech App/index.html new file mode 100644 index 0000000..e926044 --- /dev/null +++ b/Day #19 - Text To Speech App/index.html @@ -0,0 +1,35 @@ + + + + + + + + + Day #19 - Text To Speech App | AsmrProg + + + + +
+
Text To Speech
+
+
+ + +
+
+ +
+ +
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/Day #19 - Text To Speech App/index.js b/Day #19 - Text To Speech App/index.js new file mode 100644 index 0000000..c603b25 --- /dev/null +++ b/Day #19 - Text To Speech App/index.js @@ -0,0 +1,58 @@ +const textarea = document.querySelector("textarea"), + voiceList = document.querySelector("select"), + speechBtn = document.querySelector("button"); + +let synth = speechSynthesis, + isSpeaking = true; + +voices(); + +function voices() { + for (let voice of synth.getVoices()) { + let selected = voice.name === "Google US English" ? "selected" : ""; + let option = ``; + voiceList.insertAdjacentHTML("beforeend", option); + } +} + +synth.addEventListener("voiceschanged", voices); + +function textToSpeech(text) { + let utterance = new SpeechSynthesisUtterance(text); + for (let voice of synth.getVoices()) { + if (voice.name === voiceList.value) { + utterance.voice = voice; + } + } + synth.speak(utterance); +} + +speechBtn.addEventListener("click", e => { + e.preventDefault(); + if (textarea.value !== "") { + // Checks if not speaking, Speak Textarea Text + if (!synth.speaking) { + textToSpeech(textarea.value); + } + // If text was long, Add Resume and Pause Function + if (textarea.value.length > 80) { + setInterval(() => { + if (!synth.speaking && !isSpeaking) { + isSpeaking = true; + speechBtn.innerText = "Convert To Speech"; + } else { } + }, 500); + if (isSpeaking) { + synth.resume(); + isSpeaking = false; + speechBtn.innerText = "Pause Speech"; + } else { + synth.pause(); + isSpeaking = true; + speechBtn.innerText = "Resume Speech"; + } + } else { + speechBtn.innerText = "Convert To Speech"; + } + } +}); \ No newline at end of file diff --git a/Day #19 - Text To Speech App/style.css b/Day #19 - Text To Speech App/style.css new file mode 100644 index 0000000..744d640 --- /dev/null +++ b/Day #19 - Text To Speech App/style.css @@ -0,0 +1,124 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap'); + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body{ + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + background-color: #5256ad; +} + +::selection{ + color: #fff; + background-color: #5256ad; +} + +.wrapper{ + width: 370px; + padding: 25px 30px; + border-radius: 7px; + background-color: #fff; + box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05); +} + +.wrapper header{ + font-size: 28px; + font-weight: 500; + text-align: center; +} + +.wrapper form{ + margin: 35px 0 20px; +} + +form .row{ + display: flex; + margin-bottom: 20px; + flex-direction: column; +} + +form .row label{ + font-size: 18px; + margin-bottom: 5px; +} + +form .row:nth-child(2) label{ + font-size: 17px; +} + +form :where(textarea, select, button){ + outline: none; + width: 100%; + height: 100%; + border: none; + border-radius: 5px; +} + +form .row textarea{ + resize: none; + height: 110px; + font-size: 15px; + padding: 8px 10px; + border: 1px solid #999; +} + +form .row textarea::-webkit-scrollbar{ + width: 0px; +} + +form .row .outer{ + height: 47px; + display: flex; + padding: 0 10px; + align-items: center; + border-radius: 5px; + justify-content: center; + border: 1px solid #999; +} + +form .row select{ + font-size: 14px; + background: none; +} + +form .row select::-webkit-scrollbar{ + width: 8px; +} + +form .row select::-webkit-scrollbar-track{ + background: #fff; +} + +form .row select::-webkit-scrollbar-thumb{ + background-color: #888; + border-radius: 8px; + border-right: 2px solid #fff; +} + +form button{ + height: 52px; + color: #fff; + font-size: 17px; + background-color: #675afe; + cursor: pointer; + margin-top: 10px; + transition: 0.3s ease; +} + +form button:hover{ + background-color: #4534fe; +} + +@media(max-width: 400px) { + .wrapper{ + max-width: 345px; + width: 100%; + } +} \ No newline at end of file