WaveSurfer with Peaks

by Luke Marlow

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<div id="waveform"></div>

<div style="text-align: center">
  <button class="btn btn-primary play-button">
    <i class="glyphicon glyphicon-play"></i> Play
  </button>
</div>

CSS

#waveform {
  width: 98%;
  margin: 10px 0%;
  border: solid 1px red;
}

JavaScript

var peaks = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, -2, 2, -3, 3, -4, 5, -10, 7, -5, 9, -9, 13, -15, 9, -11, 17, -15, 13, -23, 18, -22, 22, -12, 9, -17, 3, -50, 36, -51, 58, -49, 56, -63, 59, -65, 45, -60, 39, -54, 40, -54, 39, -53, 36, -45, 35, -42, 31, -39, 34, -38, 27, -43, 27, -41, 22, -39, 22, -35, 18, -37, 19, -37, 20, -33, 21, -31, 22, -24, 21, -25, 16, -22, 15, -22, 14, -19, 14, -18, 15, -15, 15, -12, 13, -10, 10, -8, 7, -6, 5, -4, 4, -1, 2, -1, 1, -1, 1, 0, 1, -1, 1, -1, 1, -1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, -12, 6, -16, 17, -27, 24, -38, 27, -36, 26, -36, 20, -34, 20, -35, 15, -24, 13, -18, 9, -9, 4, -3, 6, -1, 7, -3, 7, -5, 5, -10, 5, -10, 9, -8, 6, -5, 7, -3, 5, -4, 5, -3, 3, -38, 21, -38, 21, -37, 18, -37, 17, -34, 19, -34, 21, -34, 20, -32, 19, -31, 21, -33, 21, -34, 23, -33, 24, -36, 25, -35, 26, -38, 26, -40, 25, -43, 21, -39, 20, -18, 13, -5, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, -4, 12, -13, 13, -8, 5, -3, 5, 0, 6, -2, 5, -2, 2, -22, 15, -24, 15, -25, 13, -24, 15, -23, 15, -20, 15, -18, 14, -15, 12, -11, 9, -6, 7, -5, 5, -5, 6, -5, 5, -5, 6, -5, 5, -2, 2, 0, 0, 0, 0, 0, 0, -6, 10,...