先看效果图
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>
