wavesurfer

功能描述

  1. 音频可视化插件wavesurfer.js的使用（包含多个音频的切换）

依赖的模块

  1. Jquery

使用方法：

  1. 在HTML中，包括缩小的脚本：
  2. <script src="jquery/jquery-3.3.1.js"></script>
  3. <script src="js/wavesurfer.min.js"></script>
  4. 创建一个显示波形的容器（可动态创建多个）：
  5. <div id="waveform"></div>
  7. 在JavaScript应用程序中，创建一个waveurfer实例，传递容器选择器以及一些选项：
  8. var wavesurfer = WaveSurfer.create({
  9.    container: '#waveform',
  10.    waveColor: 'violet',
  11.    progressColor: 'purple'
  12. });
  14. 最后，加载音频
  15. wavesurfer.load('audio.mp3');
  17. 传递参数
  18. wavesurfer 可支持自定义参数
  19. waveColor：'#428bca'//背景颜色
  20. progressColor：'green'//播放过的颜色
  21. cursorColor：'red'//进度条
  22. cursorWidth：'3'  //进度条宽度

特别说明

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

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