Adding Day AsmrProg-YT#19

henriqu2vx · Mar 12, 2023 · 674cfa6 · 674cfa6
1 parent e10fa0d
commit 674cfa6
Show file tree

Hide file tree

Showing 3 changed files with 217 additions and 0 deletions.
diff --git a/Day #19 - Text To Speech App/index.html b/Day #19 - Text To Speech App/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Day #19 - Text To Speech App | AsmrProg</title>
+</head>
+
+<body>
+
+    <div class="wrapper">
+        <header>Text To Speech</header>
+        <form action="">
+            <div class="row">
+                <label>Enter Text</label>
+                <textarea></textarea>
+            </div>
+            <div class="row">
+                <label>Select Voice</label>
+                <div class="outer">
+                    <select></select>
+                </div>
+            </div>
+            <button>Convert To Speech</button>
+        </form>
+    </div>
+
+
+    <script src="index.js"></script>
+</body>
+
+</html>
diff --git a/Day #19 - Text To Speech App/index.js 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 = `<option value="${voice.name}" ${selected}>${voice.name} (${voice.lang})</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";
+        }
+    }
+});
diff --git a/Day #19 - Text To Speech App/style.css 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%;
+    }
+}