<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="waveform"></div>
<div id="wave-timeline" ref="wave-timeline">
<!--时间轴 -->
</div>
</body>
<script src="./js/wavesurfer.js"></script>
<script>
var wavesurfer = WaveSurfer.create({
container: '#waveform',
barWidth: 2,
barHeight: 1.2,
mediaControls: true,
})
// wavesurfer.load('http://www.5imoban.net/view/demomusic/niliuchenghe.mp3');
wavesurfer.load('./music/test.mp3')
wavesurfer.on('ready', function () {
wavesurfer.play()
})
</script>
</html>
报错原因:音乐跨域
解决方法:如下
下载这个插件,通过客户端的方式打开即可