Web Speech API

index.html

<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!
-->

script.babel

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
})

style.scss

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%);
  }
}

web-speech-api.markdown

Web Speech API

A Pen by Leos on CodePen.

License.