JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

JavaScript

<div class="b-play-info">
    <canvas class="b-visualization" id="visual-wrapper" width="1333" height="86"></canvas>
    <span role="link" class="b-button b-button__play" id="play">Play/Pause</span>
    <div class="b-play-info-content">
      <div class="b-title">
        <h1 class="b-truncate">Kryptonite</h1>
        <h2 class="b-truncate">3 Doors Down</h2>
      </div>
      <div id="mep_0" class="mejs-container b-seekbar mejs-audio" style="width: 90%; height: 30px;"><div class="mejs-inner"><div class="mejs-mediaelement"><audio id="player" class="b-seekbar" data-visualization="/assets/visualizer/visualization.json" style="display: none;">
        <source src="/assets/visualizer/kryptonite.mp3" type="audio/mpeg">
        <source src="/assets/visualizer/kryptonite.ogg" type="audio/ogg">

      </audio></div><div class="mejs-layers"><div class="mejs-poster mejs-layer" style="display: none; width: 90%; height: 30px;"></div></div><div class="mejs-controls"><div class="mejs-time mejs-currenttime-container"><span class="mejs-currenttime">00:00</span></div><div class="mejs-time-rail" style="width: 1046px;"><span class="mejs-time-total" style="width: 1046px;"><span class="mejs-time-loaded"></span><span class="mejs-time-current"></span><span class="mejs-time-handle"></span><span class="mejs-time-float" style="display: none;"><span class="mejs-time-float-current">00:00</span><span class="mejs-time-float-corner"></span></span></span></div><div class="mejs-time mejs-duration-container"><span class="mejs-duration">00:00</span></div></div><div class="mejs-clear"></div></div></div>
    </div>
  </div>