Text to speech converter

Sulagna-Dutta-Roy · Aug 7, 2022 · 97c65be · 97c65be
1 parent c24ac24
commit 97c65be
Show file tree

Hide file tree

Showing 4 changed files with 223 additions and 0 deletions.
diff --git a/Text to speech/README.md b/Text to speech/README.md
@@ -0,0 +1,10 @@
+# Text to speech converter
+## tech stack
+- HTML5
+- CSS3
+- JS
+## demo
+
+
+https://user-images.githubusercontent.com/91176055/170882867-b45a72bf-ff6b-4561-8095-d85769740d24.mp4
+
diff --git a/Text to speech/index.html b/Text to speech/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<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">
+    <title>text to speech</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="wrap">
+        <header>Text to speech converter</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="script.js"></script>
+</body>
+
+</html>
diff --git a/Text to speech/script.js b/Text to speech/script.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 !== ""){
+        if(!synth.speaking){
+            textToSpeech(textarea.value);
+        }
+        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/Text to speech/style.css b/Text to speech/style.css
@@ -0,0 +1,122 @@
+* {
+    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: #F47C7C;
+}
+
+::selection {
+    color: #fff;
+    background: #F47C7C;
+}
+
+.wrap {
+    width: 370px;
+    padding: 25px 30px;
+    border-radius: 7px;
+    background: #fff;
+    box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
+}
+
+.wrap header {
+    font-size: 28px;
+    font-weight: 500;
+    text-align: center;
+}
+
+.wrap form {
+    margin: 35px 0 20px;
+}
+
+form .row {
+    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 #998;
+}
+
+form .row textarea::-webkit-scrollbar {
+    width: 0px;
+}
+
+form .row .outer {
+    height: 47px;
+    display: flex;
+    padding: 0 10px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    border: 1px solid #998;
+}
+
+form .row .select {
+    font-size: 14px;
+    background: none;
+}
+
+form .row select::-webkit-scrollbar-track {
+    background: #fff;
+}
+
+form .row select::-webkit-scrollbar-thumb {
+    background: #889;
+    border-radius: 8px;
+    border-right: 2px solid #fff;
+}
+
+form button {
+    height: 52px;
+    color: palegoldenrod;
+    font-size: 17px;
+    cursor: pointer;
+    margin-top: 10px;
+    background: #F47C7C;
+    transition: 0.3s ease;
+}
+
+form button:hover {
+    background: #C2DED1;
+}
+
+@media(max-width: 400px) {
+    .wrap {
+        max-width: 345px;
+        width: 100%;
+    }
+}