Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Web Speech API
<span class="ctp">Click to play</span>
<div id="allstar">
<p>
안녕하세요<br>
I ain't the sharpest tool in the shed <br>
She was looking kind of dumb with her finger and her thumb <br>
In the shape of an "L" on her forehead <br>
</p>
<p>
Well the years start coming and they don't stop coming <br>
Fed to the rules and I hit the ground running <br>
Didn't make sense not to live for fun <br>
Your brain gets smart but your head gets dumb <br>
So much to do, so much to see <br>
So what's wrong with taking the back streets? <br>
You'll never know if you don't go <br>
You'll never shine if you don't glow <br>
</p>
<p>
Hey now, you're an all-star, get your game on, go play <br>
Hey now, you're a rock star, get the show on, get paid <br>
And all that glitters is gold <br>
Only shooting stars break the mold <br>
</p>
<p>
It's a cool place and they say it gets colder <br>
You're bundled up now, wait till you get older <br>
But the meteor men beg to differ <br>
Judging by the hole in the satellite picture <br>
The ice we skate is getting pretty thin <br>
The water's getting warm so you might as well swim <br>
My world's on fire, how about yours? <br>
That's the way I like it and I never get bored <br>
</p>
<p>
Hey now, you're an all-star, get your game on, go play <br>
Hey now, you're a rock star, get the show on, get paid <br>
All that glitters is gold <br>
Only shooting stars break the mold <br>
</p>
<p>
Hey now, you're an all-star, get your game on, go play <br>
Hey now, you're a rock star, get the show, on get paid <br>
And all that glitters is gold <br>
Only shooting stars <br>
</p>
<p>
Somebody once asked could I spare some change for gas? <br>
I need to get myself away from this place <br>
I said yep what a concept <br>
I could use a little fuel myself <br>
And we could all use a little change <br>
</p>
<p>
Well, the years start coming and they don't stop coming <br>
Fed to the rules and I hit the ground running <br>
Didn't make sense not to live for fun <br>
Your brain gets smart but your head gets dumb <br>
So much to do, so much to see <br>
So what's wrong with taking the back streets? <br>
You'll never know if you don't go (go!) <br>
You'll never shine if you don't glow <br>
</p>
<p>
Hey now, you're an all-star, get your game on, go play <br>
Hey now, you're a rock star, get the show on, get paid <br>
And all that glitters is gold <br>
Only shooting stars break the mold <br>
</p>
<p>
And all that glitters is gold <br>
Only shooting stars break the mold
</p>
</div>
<!--
,-' `._
,' `. ,-.
,' \ ),.\
,. / \ /( \;
/'\\ ,o. ,ooooo. \ ,' `-')
)) )`. d8P"Y8. ,8P"""""Y8. `' .--"'
(`-' `Y' `Y8 dP `' /
`----.( __ ` ,' ,---. (
),--.`. ( ;,---. )
/ \O_,' ) \ \O_,' |
; `-- ,' `---' |
| -' `. |
_; , ) :
_.'| `.:._ ,.::" `.. |
--' | .' """ ` |`.
| :; : : _. |`.`.-'--.
| ' . : :__.,'|/ | \
` \--.__.-'|_|_|-/ / )
\ \_ `--^"__,' , |
-hrr- ; ` `--^---' ,' |
\ ` / /
\ ` _ _ /
\ ` /
\ ' ,'
`. , _,'
`-.___.---'
W H A T A R E Y O U D O I N G I N M Y S W A M P!
-->
const synth = window.speechSynthesis
const el = document.querySelector(`#allstar`)
const pgps = el.querySelectorAll(`p`)
let currIndex = 0
let fullText = ``
let playing = false
pgps.forEach(p => {
const { innerHTML: html } = p
p.innerHTML = ``
html
.split(` `)
.filter(w => w.trim().length)
.reduce((prev, curr) => {
const br = curr === `<br>`
const elem = document.createElement(br ? `br` : `span`)
if (!br) {
elem.dataset.index = currIndex
elem.innerHTML = curr
const space = document.createElement(`span`)
space.textContent = ` `
prev.push(space)
}
prev.push(elem)
fullText += `${curr.replace(`<br>`, ``)} `
currIndex += elem.textContent.length + 1
return prev
}, [])
.forEach(span => p.appendChild(span))
})
const utterThis = new SpeechSynthesisUtterance(fullText)
const ctp = document.querySelector(`.ctp`)
utterThis.pitch = 1
utterThis.rate = 1
utterThis.onboundary = event => {
const { charIndex: index } = event
const el = document.querySelector(`[data-index='${index}']`)
if (el) {
const els = document.querySelectorAll(`[data-index]`)
els.forEach(e => e.classList.remove(`current`))
el.classList.add(`current`)
}
}
document.addEventListener(`click`, () => {
if (!playing) {
ctp.classList.add(`ctp--hidden`)
synth.speak(utterThis)
playing = true
return
}
ctp.classList.remove(`ctp--hidden`)
synth.cancel()
playing = false
})
body {
font-family: Avenir, Roboto, 'Helvetica Neue', sans-serif;
display: flex;
}
div {
width: 28rem;
margin: 3rem auto;
}
[data-index] {
position: relative;
color: #333;
transition: all .1s ease;
will-change: transform, color, box-shadow;
box-shadow: 0 0 0 transparent;
}
.current {
$c: #5F70EE;
z-index: 2;
display: inline-block;
background: $c;
color: white;
transform: scale(1.2);
border-radius: 2px;
box-shadow:
-7px 0 0 $c,
7px 0 0 $c,
0px 5px 8px rgba(0,0,0,.1),
;
}
.ctp {
position: absolute;
width: 100%;
top: 0; left: 0;
padding: 1rem;
z-index: 3;
background: #4ECDC4;
color: white;
text-align: center;
transition: all .2s ease;
transform: translateY(0%);
will-change: transform;
&--hidden {
transform: translateY(-100%);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.