wavesurfer是一款可操作可交互的音频声波声音可视化的js插件-BFW插件库

wavesurfer是一款可操作可交互的音频声波声音可视化的js插件

wavesurfer是一款可操作可交互的音频声音可视化的js插件，使用Web Audio和HTML5 Canvas技术。可以显示当前音频的声波。

使用方式：

第一步引入bfwone

第二步use插件

第三步配置参数

use(["wavesurfer.min"], function() {
                var wavesurfer = WaveSurfer.create({
                    container: '#waveform'
                });//创建实例
                var wavesurfer = WaveSurfer.create({
                    container: '#waveform',//dom对象id
                    waveColor: '#428bca',//颜色
                     progressColor: '#31708f',//进度条颜色
                     height: 120, //高度
                    barWidth: 3,//柱状图宽度
                    scrollParent: true//是否跟随父级滚动
                });//配置参数
                wavesurfer.load('//repo.bfw.wiki/bfwrepo/sound/5e16a04d75540.mp3');//加载音乐
                wavesurfer.on('ready', function () {//订阅事件
                    wavesurfer.play();
                });
                
          
 });

完整的代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone"  type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["wavesurfer.min"], function() {
                var wavesurfer = WaveSurfer.create({
                    container: '#waveform'
                });
                var wavesurfer = WaveSurfer.create({
                    container: '#waveform',
                    waveColor: '#428bca', progressColor: '#31708f', height: 120, barWidth: 3,
                    scrollParent: true
                });
                wavesurfer.load('//repo.bfw.wiki/bfwrepo/sound/5e16a04d75540.mp3');
                wavesurfer.on('ready', function () {
                    wavesurfer.play();
                });
                
          
            });
        });
    </script>
    <style>
    </style>
</head>
<body>
    <div id="waveform"></div>

</body>
</html>

官网：https://wavesurfer-js.org/