SOURCE

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'red',
  progressColor: 'purple'
});

wavesurfer.load('https://wavesurfer-js.org/example/media/demo.wav');
var slider = document.querySelector('#slider');

slider.oninput = function () {
  var zoomLevel = Number(slider.value);
  wavesurfer.zoom(zoomLevel);
};

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

<div style="text-align: center">
  <button class="btn btn-primary" onclick="wavesurfer.playPause()">
    <i class="glyphicon glyphicon-play"></i>
    Play
  </button>

  <p class="row">
    <div class="col-xs-1">
      <i class="glyphicon glyphicon-zoom-in"></i>
    </div>

    <div class="col-xs-10">
      <input id="slider" type="range" min="1" max="200" value="1" style="width: 100%" />
    </div>

    <div class="col-xs-1">
      <i class="glyphicon glyphicon-zoom-out"></i>
    </div>
  </p>
</div>