SOURCE

console 命令行工具 X clear

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

本项目引用的自定义外部资源