先看效果图

image.png

建html

 <div id="waveform"></div>
  <button onclick="wavesurfer.playPause()">
    播放/暂停
  </button>
<script src="./wave.js"></script>  // 为了每次不请求数据（浪费时间），我是直接下载下来的js
<script>
  var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'grey',
    progressColor: '#00FFFF',
    cursorColor: '#fff',
    barWidth: 1,
  })
  wavesurfer.load('网易云扒拉一个地址  地址有时间限制');
</script>

然后是css

 <style>
    #waveform {
      border: solid 1px #ccc;
      border-radius: 4px;
      width: 300px;
      height: 40px;
      overflow: hidden;
    }

    #waveform wave {
      height: 100% !important;
    }

    button {
      margin-top: 10px;
      margin-left: 10px;
    }
  </style>

引入js

<script src="https://unpkg.com/wavesurfer.js"></script>

若是解决了您的问题请帮忙点歌赞，若有疑问请留言