chris/main_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

speak

Browse Source
This commit is contained in:
chris 2022-03-03 09:43:16 -05:00
parent b26fe2e786
commit 8a03c472a5
3 changed files with 130 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
speak/index.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<title>Document</title>
<style>
</style>
<script defer src="script.js" ></script>
</head>
<body>
<main>
<textarea id="text" placeholder="enter word here to hear it..."></textarea>
<label for="speed">Speed</label>
<input type="number" name="speed" id="speed" min=".5" max="3" step=".5" value="1">
<div class="buttons_div">
<button class="buttons" id="play-button"><i class="fa fa-play-circle" aria-hidden="true"></i></button>
<button class="buttons" id="pause-button"><i class="fa fa-pause-circle" aria-hidden="true"></i></button>
<button class="buttons" id="stop-button"><i class="fa fa-stop-circle" aria-hidden="true"></i></button>
</div>
</main>
</body>
</html>

45
speak/script.js Normal file
View File

@ -0,0 +1,45 @@
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
playButton.addEventListener('click', () => {
playText(textInput.value)
})
pauseButton.addEventListener('click', pauseText)
stopButton.addEventListener('click', stopText)
speedInput.addEventListener('input', () => {
stopText()
playText(utterance.text.substring(currentCharacter))
})
const utterance = new SpeechSynthesisUtterance()
utterance.addEventListener('end', () => {
textInput.disabled = false
})
utterance.addEventListener('boundary', e => {
currentCharacter = e.charIndex
})
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()
}

52
speak/style.css Normal file
View File

@ -0,0 +1,52 @@
body {
background-color: darkred;
}
#text {
display: flex;
justify-self: center;
margin: auto;
width: 75%;
margin-top: 40%;
padding: 7px;
border-radius: 15px;
font-size: 2rem;
}
label{
display: none
}
#speed{
display: none;
justify-self: center;
width: 1rem;
}
.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;
}