配置信息

option	type	default	English description	translate
audioRate	float	1	Speed at which to play audio. Lower number is slower.	播放音频的速度。数值越低，速度越慢。
audioContext	object	none	Use your own previously initialized AudioContext or leave blank.	none
audioScriptProcessor	object	none	Use your own previously initialized ScriptProcessorNode or leave blank.	使用您自己先前初始化的ScriptProcessorNode或留空。
autoCenter	boolean	true	If a scrollbar is present, center the waveform around the progress.	如果出现滚动条，则将波形围绕进度居中。
backend	string	WebAudio	WebAudio, MediaElement or MediaElementWebAudio. MediaElement is a fallback for unsupported browsers.	WebAudio, MediaElement或MediaElementwebAudio。MediaElement是不受支持的浏览器的备用方案。
backgroundColor	string	none	Change background color of the waveform container.	改变波形容器的背景颜色。
barGap	number	none	The optional spacing between bars of the wave, if not provided will be calculated in legacy format.	波条之间的可选间距，如果没有提供，将以遗留格式计算。
barHeight	number	1	Height of the waveform bars. Higher number than 1 will increase the waveform bar heights.	波形条的高度。大于1的数字将增加波形条的高度。
barMinHeight	number	null	Minimum height to draw a waveform bar. Default behavior is to not draw a bar during silence.	绘制波形条的最小高度。默认行为是在静默期间不画条。
barRadius	number	0	The radius that makes bars rounded.	使bars变圆的半径
barWidth	number	none	If specified, the waveform will be drawn like this: ▁ ▂ ▇ ▃ ▅ ▂	如果指定，波形将像这样绘制▁ ▂ ▇ ▃ ▅ ▂
closeAudioContext	boolean	false	Close and nullify all audio contexts when the destroy method is called.	当destroy方法被调用时，关闭并使所有音频上下文无效。
container	mixed	none	CSS-selector or HTML-element where the waveform should be drawn. This is the only required parameter.	css选择器或html元素，其中应该绘制波形。这是惟一必需的参数。
cursorColor	string	#333	The fill color of the cursor indicating the playhead position.	指针的填充颜色，表示播放头位置。
cursorWidth	integer	1	Measured in pixels.	以像素为单位
drawingContextAttributes	object	{desynchronized: true}	Specify canvas 2d drawing context attributes.	指定画布2d绘图上下文属性。
fillParent	boolean	true	Whether to fill the entire container or draw only according to minPxPerSec.	是否填充整个容器或仅根据minPxPerSec绘制。
forceDecode	boolean	false	Force decoding of audio using web audio when zooming to get a more detailed waveform.	在缩放时使用web音频强制解码音频以获得更详细的波形。
height	integer	128	The height of the waveform. Measured in pixels.	波形的高度。以像素为单位。
hideScrollbar	boolean	false	Whether to hide the horizontal scrollbar when one would normally be shown.	是否在通常显示水平滚动条时隐藏水平滚动条。
hideCursor	boolean	false	Hide the mouse cursor when hovering over the waveform. By default it will be shown.	当鼠标光标悬停在波形上时隐藏鼠标光标。默认情况下会显示。
interact	boolean	true	Whether the mouse interaction will be enabled at initialization. You can switch this parameter at any time later on.	是否在初始化时启用鼠标交互。您可以在以后的任何时候切换该参数。
loopSelection	boolean	true	(Use with regions plugin) Enable looping of selected regions.	(与区域插件一起使用)启用选定区域的循环。
maxCanvasWidth	integer	4000	Maximum width of a single canvas in pixels, excluding a small overlap (2 * pixelRatio, rounded up to the next even integer). If the waveform is longer than this value, additional canvases will be used to render the waveform, which is useful for very large waveforms that may be too wide for browsers to draw on a single canvas. This parameter is only applicable to the MultiCanvas renderer.	单个画布的最大宽度(像素)，不包括小重叠(2 * pixelRatio，四舍五入到下一个偶数)。如果波形长于此值，将使用额外的画布来渲染波形，这对于非常大的波形非常有用，因为浏览器可能太宽而无法在单个画布上绘制。此参数仅适用于multiccanvas渲染器。
mediaControls	boolean	false	(Use with backend MediaElement) this enables the native controls for the media element.	(与后端MediaElement一起使用)这将启用媒体元素的本机控件。
mediaType	string	audio	‘audio’ or ‘video’. Only used with backend MediaElement.	“音频”或“视频”。仅用于后端MediaElement。
minPxPerSec	integer	50	Minimum number of pixels per second of audio.	音频每秒的最小像素数。
normalize	boolean	false	If true, normalize by the maximum peak instead of 1.0.	如果为真，则通过最大峰值而不是1.0进行归一化。
partialRender	boolean	false	Use the PeakCache to improve rendering speed of large waveforms.	使用PeakCache来提高大波形的渲染速度。
pixelRatio	integer	window.devicePixelRatio	Can be set to 1 for faster rendering.	可以设置为1以更快地呈现。
plugins	array	[]	An array of plugin definitions to register during instantiation. They will be directly initialised unless they are added with the deferInit property set to true.	在实例化期间注册的插件定义数组。它们将被直接初始化，除非添加时将deferInit属性设置为true。
progressColor	string	#555	The fill color of the part of the waveform behind the cursor. When progressColor and waveColor are the same the progress wave is not rendered at all.	光标后面部分波形的填充颜色。当progressColor和waveColor相同时，进度波根本不会被渲染。
regionsMinLength	number	null	Default minLength for regions, in seconds. When creating a region, specifying the minLength parameter for that region will override this.	默认minLength为区域，单位为秒。在创建区域时，为该区域指定minLength参数将覆盖该参数。
removeMediaElementOnDestroy	boolean	true	Set to false to keep the media element in the DOM when the player is destroyed. This is useful when reusing an existing media element via the loadMediaElement method.	设置为false以在播放器被销毁时将media元素保留在DOM中。这在通过loadMediaElement方法重用现有媒体元素时非常有用。
renderer	Object	MultiCanvas	Can be used to inject a custom renderer.	可用于注入自定义渲染器。
responsive	boolean or float	false	If set to true resize the waveform, when the window is resized. This is debounced with a 100ms timeout by default. If this parameter is a number it represents that timeout.	如果设置为true，调整波形大小，当窗口调整大小时。默认情况下，这是一个100ms超时。如果此参数是一个数字，则表示超时时间。
scrollParent	boolean	false	Whether to scroll the container with a lengthy waveform. Otherwise the waveform is shrunk to the container width (see fillParent).	是否滚动具有长波形的容器。否则波形将收缩到容器宽度(参见fillParent)。
skipLength	float	2	Number of seconds to skip with the skipForward() and skipBackward() methods.	使用skipForward()和skipBackward()方法跳过的秒数。
splitChannels	boolean	false	Render with seperate waveforms for the channels of the audio.	渲染与单独的波形为音频的渠道。
splitChannelsOptions	object	{}	Split channel options. Only applied when splitChannels=true. See below for options	分割通道选项。仅当splitChannels=true时应用。参见下面的选项
splitChannelsOptions.overlay	boolean	false	Overlay waveforms for channels instead of rendering them on separate rows	为通道叠加波形，而不是在单独的行上呈现它们
splitChannelsOptions.relativeNormalization	boolean	false	Normalization maintains proportionality between channels. Only applies when normalize=true	正常化保持了通道之间的比例。仅适用于normalize=true时
splitChannelsOptions.filterChannels	array	[]	List of channel numbers to be excluded from rendered waveforms. Channels are 0-indexed	要从呈现波形中排除的通道号列表。通道为0-indexed
splitChannelsOptions.channelColors	object	{}	Overrides color per channel. Each key indicates a channel number and the corresponding value is an object describing it’s color porperties. For example: channelColors={ 0: { progressColor: ‘green’, waveColor: ‘pink’ }, 1: { progressColor: ‘orange’, waveColor: ‘purple’ } }	覆盖每个通道的颜色。每个键表示一个通道号，对应的值是一个描述其颜色属性的对象。例如:channelColors={0: {progressColor: ‘绿色’，waveColor: ‘粉红色’}，1:{progressColor: ‘橙色’，waveColor: ‘紫色’}}
waveColor	string	#999	The fill color of the waveform after the cursor.	光标后波形的填充颜色。
xhr	Object	{}	XHR options. For example: let xhr = { cache: ‘default’, mode: ‘cors’, method: ‘GET’, credentials: ‘same-origin’, redirect: ‘follow’, referrer: ‘client’, headers: [ { key: ‘Authorization’, value: ‘my-token’ } ]};	XHR选项。例如:let xhr ={ cache: ‘default’, mode: ‘cors’, method: ‘GET’, credentials: ‘same-origin’, redirect: ‘follow’, referrer: ‘client’, headers: [ { key: ‘Authorization’, value: ‘my-token’ } ]}; XHR选项。例如:let xhr = {cache: ’ default '， mode: ’ cors '， method: ’ GET ‘，凭证:’ same-origin ‘，重定向:’ follow '， referrer: ’ client '， headers: [{key: ’ Authorization '， value: ’

方法介绍

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: eexportImage(格式，质量，类型)-返回波形图像作为数据URl或Blob。
isPlaying() -如果正在播放则返回true，否则返回false。加载(url，峰值，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;
});

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>

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. 测试音频为 国歌 。（音乐软件可免费下载）

参考资料

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