Merge pull request #717 from Sahil-K123/VoiceGenerator-Sahil-K123

PBJI · web-flow · commit 43b8bfae8379 · 2023-10-08T21:31:35.000+05:30
feat: Adding Voice Generator App
diff --git a/VoiceGenerator/Sahil-K123/index.html b/VoiceGenerator/Sahil-K123/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="hero">
+        <h1> How to make a voice generator </h1>
+        <textarea placeholder="Write Something Here ..."></textarea>
+        <div class="row">
+        <select name="" id=""></select>
+        <button>Speak</button>  
+        </div>
+        
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/VoiceGenerator/Sahil-K123/script.js b/VoiceGenerator/Sahil-K123/script.js
@@ -0,0 +1,22 @@
+let speech = new SpeechSynthesisUtterance();
+
+let voices = [];
+
+let voiceSelect = document.querySelector("select");
+
+window.speechSynthesis.onvoiceschanged = () => {
+    voices = window.speechSynthesis.getVoices();
+    speech.voice = voices[0];
+
+    voices.forEach((voice , i) => (voiceSelect.options[i] = new Option(voice.name, i)));
+}
+
+voiceSelect.addEventListener("change", () => {
+    speech.voice = voices[voiceSelect.value];
+})
+
+
+document.querySelector("button").addEventListener("click" , () => {
+    speech.text = document.querySelector("textarea").value
+    window.speechSynthesis.speak(speech);
+})
diff --git a/VoiceGenerator/Sahil-K123/style.css b/VoiceGenerator/Sahil-K123/style.css
@@ -0,0 +1,34 @@
+body{
+    
+    margin: 0px;
+    padding: 0px;
+    box-sizing: border-box;
+
+}
+    
+
+
+.hero{
+    width: 100%;
+    min-height: 100vh; 
+    background: linear-gradient(45deg,#010758,#490d61);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+}
+
+.hero h1{
+    font-size: 45px;
+    font-weight: 500;
+    margin-top: -50px;
+    margin-bottom: 50px;
+    
+} 
+
+textarea{
+    width: 600px;
+    height: 250px;
+    background: #403d84;
+}
