JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<audio id="player" controls src="http://www.mp3-gratis.eu/download/batim-chapter-2-gospel-of-dismay-dagames/329825886"></audio>
<div class="app-container">
  <div class="pointer">
    <img src="https://img10.deviantart.net/8d1a/i/2017/061/0/d/bendy_by_dgaribalde-db0ydvv.png" alt="Bendy">
  </div>
  <div class="lyrics">
    <div class="line-container"></div>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Baloo+Da|Knewave');
body {
  background-color: #503D2F;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

#player {
  position: absolute;
  z-index: 2;
}

.app-container {
  position: relative;
  height: 100vh;
  width: 100vw;
  min-width: 500px;
}

.lyrics {
  font-family: 'Baloo Da', cursive;
  font-size: 2em;
  position: absolute;
  bottom: 20px;
  color: #888;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  text-shadow: 5px 3px 2px #000;
  height: 50px;
}

.lyrics span {
  margin: 0 5px;
}

.white {
  color: #fff;
}

.pointer > img {
  width: 40px;
}

.pointer {
  animation: swing .5s ease-in-out forwards infinite;
  display: inline-block;
  position: absolute;
  bottom: 60px;
}

.line-container {
  transition: .05s all ease-in-out;
}

.up {
  margin-top: 0; 
}
.down {
  margin-top: 100px;
}
.loading {
  position: absolute;
  height: 100%; width: 100%;
  display: flex; align-items: center;
  justify-content: center;
  font-size: 3em;
  background-color: #333;
  color: #bbb;
  top: 0;
  font-family: 'Baloo Da', cursive;
}

@keyframes swing {
  0%{transform: rotate(10deg);}
  50%{transform: rotate(-10deg)}
  100%{transform: rotate(10deg);}
}

JavaScript

const data = [
  {
    "timestamp": {
      "start": 7.04,
      "end": 10.18
    },
    "character": "BENDY",
    "text": "Let's hope this time we can get this band back together again!"
  },
  {
    "timestamp": {
      "start": 10.84,
      "end": 13.6
    },
    "character": "BORIS",
    "text": "You join the underground cabaret today"
  },
  {
    "timestamp": {
      "start": 13.72,
      "end": 15.52
    },
    "character": "BENDY",
    "text": "Well, hey there, tell me your NAME!"
  },
  {
    "timestamp": {
      "start": 15.62,
      "end": 18.92
    },
    "character": "BORIS",
    "text": "You try to run and tell the world, but you're stranded in a darkened cave!"
  },
  {
    "timestamp": {
      "start": 19.06,
      "end": 20.82
    },
    "character": "BENDY",
    "text": "Oh Henry, we HATE you the same!"
  },
  {
    "timestamp": {
      "start": 20.96,
      "end": 22.14
    },
    "character": "BORIS",
    "text": "So listen up my friend!"
  },
  {
    "timestamp": {
      "start": 22.18,
      "end": 22.68
    },
    "character": "BORIS",
    "text": "there's more than meets the Eye!"
  },
  {
    "timestamp": {
      "start": 23.62,
      "end": 25.12
    },
    "character": "BORIS",
    "text": "You power up the studio,"
  },
  {
    "timestamp": {
      "start": 25.2,
      "end": 26.16
    },
    "character": "BORIS",
    "text": "and bring them to LIFE!"
  },
  {
    "timestamp": {
      "start": 26.22,
      "end": 27.18
    },
    "character": "BORIS",
    "text": "Now play the beat that trickles,"
  },
  {
    "timestamp": {
      "start": 27.3,
      "end": 27.84
    },
    "character": "BORIS",
    "text": "Through the halls,"
  },
  {
    "timestamp": {
      "start": 27.98,
      "end": 29.06
    },
    "character": "BORIS",
    "text": "Or else your life is nevermore,"
  },
  {
    "timestamp": {
      "start": 29.18,
      "end": 29.94
    },
    "character": "BORIS",
    "text": "Don't worry chum"
  },
  {
    "timestamp": {
   ...