JUSTCodaborate

Interactive Robot CSS JS

<!DOCTYPE HTML>
<html>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
</head>
<body>
  <div class="person">
   <div class="hair-base"></div>
   <div class="hair-left"></div>
   <div class="hair-right"></div>
   <div class="hair-back"></div>
   <div class="head"></div>
   <div class="lips top"></div>
   <div class="lips bottom"></div>
   <div class="eye left-eye">
    <div class="pupil left-pupil"></div>
   </div>
   <div class="eye right-eye">
    <div class="pupil right-pupil"></div>
   </div>
   <div class="neck"></div>
   <div class="body"></div>
   <div class="arms left"></div>
   <div class="arms right"></div>
   <div class="hands left-hand"></div>
   <div class="hands right-hand"></div>
   <div class="legs left-leg"></div>
   <div class="legs right-leg"></div>
   <div class="short-strap"></div>
   <div class="short-left"></div>
   <div class="short-right"></div>
   <div class="feet left-foot"></div>
   <div class="feet right-foot"></div>
   <div class="tee"></div>
   <div class="tee-left"></div>
   <div class="tee-right"></div>
  </div>
  <textarea id="text"></textarea><br>
  <label for="speed">Speed</label><br>
  <input type="number" name="speed" id="speed" min=".5" max="3" step=".5" value="1"><br>
  <button id="play-button">Play</button><br>
  <button id="pause-button">Pause</button><br>
  <button id="stop-button">Stop</button><br>
</body>
</html>

*, *::before, *::after, *:focus {
box-sizing: border-box; 
outline: none; 
overflow-x: hidden; 
}
body { 
justify-content: center; 
align-items: center; 
background-color: #949494; 
font-family: sans-serif; 
}
.person * {
display: block; 
overflow: hidden; 
}
.head { 
margin-top: 50px!important; 
background-color: white; 
border-radius: 50%; 
width: 150px; 
height: 150px; 
margin: auto; 
}
.arms { 
position: absolute; 
top: 222px; 
background-color: white; 
width: 25px; 
height: 240px; 
}
.hands { 
position: absolute; 
top: 422px; 
background-color: white; 
width: 59px;
height: 40px; 
border-radius: 50%; 
}
.legs { 
position: absolute; 
background-color: white; 
width: 25px; 
height: 240px; 
}
.feet { 
position: absolute; 
background-color: white; 
width: 59px; 
height: 40px; 
bottom: 105px; 
}
.eye { 
position: absolute; 
top: 100px; 
background-color: white; 
width: 30px;
height: 20px; 
border-radius: 50%; 
}
.pupil { 
position: absolute; 
top: 5px; 
background-color: black; 
width: 10px; 
height: 10px; 
border-radius: 50%; 
}
.neck { 
background-color: white; 
width: 20px; 
height: 20px; 
margin: auto; 
}
.body { 
background-color: white; 
width: 120px; 
height: 180px; 
border-top-left-radius: 10px;
border-top-right-radius: 10px; 
margin: auto; 
}
.lips { 
position: absolute; 
background-color: gray; 
width: 60px; 
height: 8px; 
left: 340px;
border-radius: 50%; 
}
.lips.top { 
top: 170px; 
}
.lips.bottom { 
top: 175px; 
}
.arms.left { 
transform: rotate(20deg); 
left: 260px; 
border-top-left-radius: 9px; 
}
.arms.right { 
transform: rotate(-20deg); 
right: 260px; 
border-top-right-radius: 9px; 
}
.eye.left-eye { 
left: 320px; 
}
.eye.right-eye { 
right: 320px; 
}
.pupil.left-pupil {
left: 10px;
}
.pupil.right-pupil { 
right: 10px; 
}
.legs.right-leg { 
right: 311px; 
}
.legs.left-leg { 
left: 311px;
}
.hands.left-hand { 
transform: rotate(110deg); 
left: 206px; 
}
.hands.right-hand { 
transform: rotate(-110deg); 
right: 206px; 
}
.feet.left-foot { 
left: 278px; 
transform: rotate(180deg); 
border-bottom-right-radius: 50%; 
}
.feet.right-foot { 
right: 278px; 
transform: rotate(180deg); 
border-bottom-left-radius: 50%; 
}
.short-strap { 
position: absolute; 
left: 311px; 
width: 120px; 
background-color: gray; 
height: 40px; 
}
.short-left { 
position: absolute; 
width: 25px; 
background-color: gray; 
height: 200px; 
left: 311px; 
}
.short-right {
position: absolute; 
width: 25px; 
background-color: gray; 
height: 200px; 
right: 311px; 
}
.tee { 
position: absolute; 
background-color: gray; 
z-index: 1000; 
width: 120px; 
height: 180px; 
top: 228px;
left: 311px; 
}
.tee-left { 
position: absolute; 
background-color: gray; 
z-index: 1000; 
width: 26px; 
height: 205px; 
top: 222px;
left: 265px; 
transform: rotate(20deg); 
border-top-left-radius: 9px; 
}
.tee-right { 
position: absolute; 
background-color: gray; 
z-index: 1000; 
width: 26px; 
height: 205px; 
top: 222px;
right: 265px; 
transform: rotate(-20deg);
border-top-right-radius: 9px; 
}
textarea { 
width: 187px; 
resize: none; 
}

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, voices

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()
voices = window.speechSynthesis.getVoices()
utterance.voice = voices[3]
utterance.addEventListener('end', () => {
  textInput.disabled = false
  document.querySelector(".lips.bottom").style.animation = "none"
})
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()
}