wavesurfer

功能描述

音频可视化插件wavesurfer.js的使用(包含多个音频的切换)

依赖的模块

Jquery

使用方法:

在HTML中,包括缩小的脚本:
<script src="jquery/jquery-3.3.1.js"></script>
<script src="js/wavesurfer.min.js"></script>
创建一个显示波形的容器(可动态创建多个):
<div id="waveform"></div>

在JavaScript应用程序中,创建一个waveurfer实例,传递容器选择器以及一些选项:
var wavesurfer = WaveSurfer.create({
   container: '#waveform',
   waveColor: 'violet',
   progressColor: 'purple'
});

最后,加载音频
wavesurfer.load('audio.mp3');

传递参数
wavesurfer 可支持自定义参数
waveColor:'#428bca'//背景颜色
progressColor:'green'//播放过的颜色
cursorColor:'red'//进度条
cursorWidth:'3'  //进度条宽度

特别说明

 wavesurfer.load() 一个参数的时候,进入页面音乐都加载,
  2个参数 先加载轨道 点击哪个音乐加载哪个
  详情可F12 更改参数 看network里的变化
    wavesurfer.load(music[i], allArr[i]);

可获取音轨数据(上述音轨数组在此处获取,正式项目应该后台获取音轨数据) setTimeout(function () { console.log(wavesurfer.exportPCM()) }, 1000)