声纹图-声谱图-js之wavesurfer.js（配置、事件、方法中文版翻译）_wavesurfer.js 中文文档

配置信息

方法介绍

cancelAjax() -取消音频文件加载过程。
destroy()-删除事件，元素和断开Web音频节点。
drawBuffer()-获取当前波视图的正确峰值并渲染波。
empty() -清除波形，如果零长度音频加载。
getActivePlugins()返回当前初始化的插件名称映射。
getBackgroundColor() -返回波形容器的背景色。
getcurrentTime() -以秒为单位返回当前进度。
getcursorcolor() -返回指针的填充颜色，表示播放头位置。
getDuration()-以秒为单位返回音频剪辑的持续时间。
getPlaybackRate() -返回音频剪辑的播放速度。
getProgresscolor()-返回光标后面波形的填充颜色。
getVolume()-返回当前音频剪辑的音量。
getMute()-返回当前静音状态。
getFilters()-返回当前集合过滤器的数组。
getwaveColor()-返回光标后波形的填充颜色。
exportPcM(length, accuracy, nowindow, start) -将PCM数据导出到JsoN数组中。可选参数length [number]—default: 124, accuracy [number]—default: 1eeee, nowindow [true false]—default: false, start [number]—default: 0
exportImage(format, quality, type)-返回波形图像作为数据URl或Blob。
isPlaying() -如果正在播放则返回true，否则返回false。
load(url, peaks, preload)-从url通过XHR加载音频。可选的峰值数组。可选预加载参数none metadata auto]，如果使用后端MediaElement，则传递给Audio元素。
loadBlob(url) -从Blob或File对象加载音频。
on(eventName，callback)-订阅一个事件。有关所有事件的列表，请参见WaveSurfer事件。
un(eventName, callback)-取消订阅事件。
unAll() -取消订阅所有事件。
pause()-停止播放。
play(start, end]])-从当前位置开始播放。可选的开始和结束测量秒可用于设置音频播放的范围。
playPause()-暂停时播放，播放时暂停。
seekAndCenter(progress)-寻求进度和中心视图[e.]](开始，结束)。
seekTo(progress)-寻求一个进展[e.]1](0开始，1结束)。
setBackgroundcolor(color)-设置波形容器的背景色。
setCursorColor(color) -设置指针的填充颜色，表示播放头位置。
setHeight (height)-设置波形的高度。
setFilter (filters)-用于将您自己的WebAudio节点插入到图中。参见下面的连接过滤器。setPlaybackRate(rate) -设置播放速度(e.s是半速度，是正常速度，是两倍速度，等等)。setPlayEnd(position)-设置播放停止的点，以秒为单位。
setVolume (newvolume) -设置播放音量为一个新值[e…]] (o沉默，最大1个)。
setMute(mute)-静音当前声音。
setProgresscolor(color) -设置光标后面波形的填充颜色。
setwavecolor(color) -设置光标后波形的填充颜色。
skip(offset)-从当前位置跳过若干秒(使用负值向后走)。
skipBackward()-倒带skipLength秒。
skipForward() -跳过skipLength秒。
setSinkId(deviceld)-设置接收器id来改变音频输出设备。
stop()-停止并返回起点。
toggleMute()-打开和关闭音量。
toggleInteraction()-切换鼠标交互。
toggleScroll()-切换scrollParent。
zoom(pxPersec) -水平缩放波形。该参数是音频每秒的水平像素数。它还更改参数minPxPersec并启用scrollParent选项。

事件介绍

1. 你可以使用on()和un()方法来订阅和取消订阅各种播放器事件。例如:

wavesurfer.on('pause', function () {
    wavesurfer.params.container.style.opacity = 0.9;
});
1
2
3

2. 以下为可使用事件
   audioprocess -在音频播放时连续触发。
   dblclick-当双击实例时。
   destroy-实例被销毁。
   error-在错误时发生。回调将收到(字符串)错误消息。
   finish -当它结束播放时。相互作用-当与波形相互作用时。
   loading-连续触发加载时使用获取或拖放。回调将接收(整数)加载进度百分比o…oo]。
   mute-静音改变。回调将接收(boolean)新的静音状态。
   pause-当音频暂停时。
   play-播放开始时。
   ready-当音频加载，解码和波形绘制。当使用MediaElement时，它在绘制波形之前触发，请参见就绪波形。
   scroll-当滚动条被移动时。回调将接收一个ScrollEvent对象。
   seek-寻找。回调将接收(float)进度[e…1]。
   volume-音量变化。回调将接收(整数)新卷。
   waveform-ready-在使用MediaElement后端绘制波形后触发。如果你正在使用WebAudio后端，你可以使用ready。
   zoom- 放大。回调将接收(整数)minPxPerSec。

使用

1. 安装
   npm i wavesurfer.js -S；
2. 使用

<div id="waveform"></div>
1

import WaveSurfer from 'wavesurfer.js'
const init = () => {
    let wavesurfer = WaveSurfer.create({
      // 需要的容器盒子
      container: '#waveform',
      // 是否出现滚动条
      scrollParent: true,
      // 播放进行时线条颜色
      cursorColor: '#fff',
      // 播放进行时线条宽度
      cursorWidth: 2,
      // 未播放的波纹颜色
      waveColor: 'transparent',
      // 已播放的波纹颜色
      progressColor: 'blue',
      // 倍速
      audioRate: 1,
      height: 639
    });
    // 加载音频文件
    wavesurfer.load('/audio/gg.mp3');
    wavesurfer.on('ready', function () {
      wavesurfer.play();
    });
 }
 init();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

图例

音频资料

1. 测试音频为 国歌 。（音乐软件可免费下载）

参考资料

1. wavesurfer.js官网
2. 点击去查看wavesurfer-js的API