diff --git a/speak/index.html b/speak/index.html
new file mode 100755
index 0000000..f9049d4
--- /dev/null
+++ b/speak/index.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ Speak
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/speak/script.js b/speak/script.js
new file mode 100755
index 0000000..88225b9
--- /dev/null
+++ b/speak/script.js
@@ -0,0 +1,54 @@
+const playButton = document.getElementById('play-button')
+const pauseButton = document.getElementById('pause-button')
+const stopButton = document.getElementById('stop-button')
+const textInput = document.getElementById('text')
+const speedInput = document.getElementById('speed')
+let currentCharacter
+
+
+const utterance = new SpeechSynthesisUtterance()
+
+utterance.addEventListener('end', () => {
+
+textInput.disabled = false
+
+})
+
+utterance.addEventListener('boundary', e => {
+
+currentCharacter = e.charIndex
+
+})
+
+
+playButton.addEventListener('click', () => {
+ playText(textInput.value)
+})
+pauseButton.addEventListener('click', pauseText)
+stopButton.addEventListener('click', stopText)
+speedInput.addEventListener('input', () => {
+ stopText()
+ playText(utterance.text.substring(currentCharacter))
+})
+
+
+function playText(text) {
+ if (speechSynthesis.paused && speechSynthesis.speaking) {
+ return speechSynthesis.resume()
+ }
+ if (speechSynthesis.speaking) return
+ utterance.text = text
+ utterance.rate = speedInput.value || 1
+ textInput.disabled = true
+ speechSynthesis.speak(utterance)
+}
+
+function pauseText() {
+ if (speechSynthesis.speaking) speechSynthesis.pause()
+}
+
+function stopText() {
+ speechSynthesis.resume();
+ speechSynthesis.cancel();
+ document.getElementById("text").value = ""
+}
\ No newline at end of file
diff --git a/speak/style.css b/speak/style.css
new file mode 100755
index 0000000..b097a01
--- /dev/null
+++ b/speak/style.css
@@ -0,0 +1,55 @@
+body {
+height: 100%;
+
+
+background-color: darkred;
+}
+
+
+#text {
+display: flex;
+justify-self: center;
+margin: auto;
+width: 75%;
+margin-top: 30vh;
+padding: 7px;
+border-radius: 15px;
+font-size: 2rem;
+
+}
+label{
+ display: none
+}
+
+#speed{
+ display: none;
+ justify-self: center;
+ width: 1rem;
+
+}
+#pause-button{
+ display: none;
+}
+.buttons_div{
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+}
+.buttons{
+display: flex;
+justify-content: center;
+align-content: center;
+margin: 2rem;
+background-color: transparent;
+font-size: 5rem;
+flex-direction: row;
+border: none;
+}
+
+
+main{
+ display: flex;
+ align-content: center;
+ flex-direction: column;
+ justify-content: center;
+}