thinkswell · thinkswell · Oct 1, 2021 · Oct 1, 2021
diff --git a/TextToSpeech/VirejDasani/README.md b/TextToSpeech/VirejDasani/README.md
@@ -0,0 +1,7 @@
+# [Offline Text To Speech](https://virejdasani.github.io/OfflineTextToSpeech/)
+
+- Developed by [Virej Dasani](https://virejdasani.github.io/)
+
+- [Live Website](https://virejdasani.github.io/OfflineTextToSpeech/)
+
+![](https://raw.githubusercontent.com/virejdasani/OfflineTextToSpeech/main/assets/bannerBG.png)
diff --git a/TextToSpeech/VirejDasani/assets/bannerBG.png b/TextToSpeech/VirejDasani/assets/bannerBG.png
diff --git a/TextToSpeech/VirejDasani/assets/icon.png b/TextToSpeech/VirejDasani/assets/icon.png
diff --git a/TextToSpeech/VirejDasani/assets/icons/pauseIcon.svg b/TextToSpeech/VirejDasani/assets/icons/pauseIcon.svg
diff --git a/TextToSpeech/VirejDasani/assets/icons/resumeIcon.svg b/TextToSpeech/VirejDasani/assets/icons/resumeIcon.svg
diff --git a/TextToSpeech/VirejDasani/assets/icons/speakIcon.svg b/TextToSpeech/VirejDasani/assets/icons/speakIcon.svg
diff --git a/TextToSpeech/VirejDasani/assets/icons/stopIcon.svg b/TextToSpeech/VirejDasani/assets/icons/stopIcon.svg
diff --git a/TextToSpeech/VirejDasani/assets/whiteGlossBackground.png b/TextToSpeech/VirejDasani/assets/whiteGlossBackground.png
diff --git a/TextToSpeech/VirejDasani/index.html b/TextToSpeech/VirejDasani/index.html
@@ -0,0 +1,115 @@
+<!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">
+
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-L85RJPZEHX"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
+
+    gtag('config', 'G-L85RJPZEHX');
+  </script>
+
+  <link rel="icon" href="assets/icon.png" />
+
+  <link rel="stylesheet" href="style.css">
+
+  <title>Offline Text To Speech</title>
+</head>
+
+<body>
+  <div class="main">
+
+    <!-- ----------------------------------------------------------------------- -->
+    <!--                                Section 1                                -->
+    <!-- ----------------------------------------------------------------------- -->
+    <div id="section-1" class="section-alignment">
+
+      <!-- Top content -->
+      <h2 id="landing-header">Offline Text To Speech</h2>
+      <div class="padding-semi-large"></div>
+
+      <p id="landing-header">Offline Text To
+        Speech is now available as a browser extension!</p>
+      <p><a href="https://virejdasani.github.io/OfflineTextToSpeech-Extension/">Download it here</a></p>
+      <div class="padding"></div>
+
+      <textarea type="text" id="textInput" rows="8" placeholder="Enter text here to speak it"></textarea>
+
+      <div class="padding-semi-large"></div>
+
+      <!-- -------------------------- App store buttons -------------------------- -->
+
+      <div id="app-store-buttons">
+        <button id="speakTextButton" class="button-standard" onclick="speakInputText()">Speak Text<img class="icon-link"
+            src="./assets/icons/speakIcon.svg"></button>
+
+        <p>|</p>
+
+        <button id="pauseButton" class="button-standard" onclick="pauseSpeech()">Pause<img class="icon-link-small"
+            src="./assets/icons/pauseIcon.svg"></button>
+
+        <p>|</p>
+
+        <button class="button-standard" onclick="stopSpeech()">Stop<img class="icon-link-small"
+            src="./assets/icons/stopIcon.svg"></button>
+
+      </div>
+
+      <div id="dropdowns">
+        <div class="optionsDiv">
+          <select name="voiceOptions" id="voiceOptions" onchange="changeVoice(this.value)">
+            <option value="voice1">Daniel's voice</option>
+            <option value="voice7">Samantha's voice</option>
+            <option value="voice3">Alex's voice</option>
+            <option value="voice6">Olivia's voice</option>
+            <option value="voice2">Raj's voice</option>
+            <option value="voice4">Fiona's voice</option>
+            <option value="voice5">Fred's voice</option>
+            <option value="voice8">Tessa's voice</option>
+            <option value="voice9">Victoria's voice</option>
+          </select>
+        </div>
+
+        <div class="optionsDiv">
+          <select name="speedOptions" id="speedOptions" onchange="changeVoiceSpeed(this.value)">
+            <option value="speed1">1x speed</option>
+            <option value="speed0.75">0.75x speed</option>
+            <option value="speed0.5">0.5x speed</option>
+            <option value="speed1.25">1.25x speed</option>
+            <option value="speed1.5">1.5x speed</option>
+            <option value="speed1.75">1.75x speed</option>
+            <option value="speed2">2x speed</option>
+
+          </select>
+        </div>
+      </div>
+
+      <div id="indicators">
+
+        <div id="repo-links">
+          <a class="indicator" href="https://virejdasani.github.io" target="_blank">Developed by Virej Dasani</a>
+
+          <p class="indicator indicator-separator">•</p>
+
+          <a class="indicator" href="https://github.com/virejdasani/OfflinetextToSpeech" target="_blank">GitHub</a>
+        </div>
+
+      </div>
+    </div>
+
+  </div>
+
+  <script src="index.js"></script>
+</body>
+
+</html>
diff --git a/TextToSpeech/VirejDasani/index.js b/TextToSpeech/VirejDasani/index.js
@@ -0,0 +1,95 @@
+// This is so that if speech is still playing from previous session, it stops on page load
+speechSynthesis.cancel();
+
+var isSpeaking = false;
+
+// Initialize the speech synthesis
+var speech = new SpeechSynthesisUtterance();
+speech.rate = 1;
+speech.pitch = 1;
+speech.volume = 1;
+speech.voice = speechSynthesis.getVoices()[0];
+
+function speakInputText() {
+  isSpeaking = true;
+
+  speech.text = document.getElementById("textInput").value;
+  speechSynthesis.speak(speech);
+}
+
+function pauseSpeech() {
+  if (isSpeaking) {
+    isSpeaking = false;
+    speechSynthesis.pause();
+    document.getElementById(
+      "pauseButton"
+    ).innerHTML = `Resume<img class="icon-link-small"
+    src="./assets/icons/resumeIcon.svg">`;
+  } else {
+    isSpeaking = true;
+    speechSynthesis.resume();
+    document.getElementById(
+      "pauseButton"
+    ).innerHTML = `Pause<img class="icon-link-small"
+    src="./assets/icons/pauseIcon.svg">`;
+  }
+}
+
+function stopSpeech() {
+  isSpeaking = false;
+  speechSynthesis.cancel();
+}
+
+function changeVoice(voice) {
+  if (voice == "voice1") {
+    // console.log((speech.voice = speechSynthesis.getVoices()[8]));
+    speech.voice = speechSynthesis.getVoices()[8];
+  } else if (voice == "voice2") {
+    // console.log((speech.voice = speechSynthesis.getVoices()[0]));
+    speech.voice = speechSynthesis.getVoices()[0];
+  } else if (voice == "voice3") {
+    // console.log((speech.voice = speechSynthesis.getVoices()[1]));
+    speech.voice = speechSynthesis.getVoices()[1];
+  } else if (voice == "voice4") {
+    // console.log((speech.voice = speechSynthesis.getVoices()[11]));
+    speech.voice = speechSynthesis.getVoices()[11];
+  } else if (voice == "voice5") {
+    // console.log((speech.voice = speechSynthesis.getVoices()[12]));
+    speech.voice = speechSynthesis.getVoices()[12];
+  } else if (voice == "voice6") {
+    // console.log((speech.voice = speechSynthesis.getVoices()[18]));
+    speech.voice = speechSynthesis.getVoices()[18];
+  } else if (voice == "voice7") {
+    // console.log((speech.voice = speechSynthesis.getVoices()[33]));
+    speech.voice = speechSynthesis.getVoices()[33];
+  } else if (voice == "voice8") {
+    // console.log((speech.voice = speechSynthesis.getVoices()[37]));
+    speech.voice = speechSynthesis.getVoices()[37];
+  } else if (voice == "voice9") {
+    // console.log((speech.voice = speechSynthesis.getVoices()[41]));
+    speech.voice = speechSynthesis.getVoices()[41];
+  }
+
+  // for (let i = 0; i < 100; i++) {
+  //   console.log((speech.voice = speechSynthesis.getVoices()[i]));
+  // }
+}
+
+function changeVoiceSpeed(voiceSpeed) {
+  // For some reason, speed below 0.5 doesn't work
+  if (voiceSpeed == "speed2") {
+    speech.rate = 2;
+  } else if (voiceSpeed == "speed1.75") {
+    speech.rate = 1.75;
+  } else if (voiceSpeed == "speed1.5") {
+    speech.rate = 1.5;
+  } else if (voiceSpeed == "speed1.25") {
+    speech.rate = 1.25;
+  } else if (voiceSpeed == "speed1") {
+    speech.rate = 1;
+  } else if (voiceSpeed == "speed0.75") {
+    speech.rate = 0.75;
+  } else if (voiceSpeed == "speed0.5") {
+    speech.rate = 0.5;
+  }
+}