Releases · katspaugh/wavesurfer.js

New TypeScript version

wavesurfer.js v7 is a TypeScript rewrite of wavesurfer.js that brings several improvements:

Most options, events, and methods are similar to those in previous versions.

The backend option is removed – HTML5 audio (or video) is the only playback mechanism. However, you can still connect wavesurfer to Web Audio via MediaElementSourceNode. See this example.
The Markers plugin is removed – you should use the Regions plugin with just a startTime.
No Microphone plugin – superseded by the new Record plugin with more features.
The Cursor plugin is replaced by the Hover plugin.

backend, audioContext, closeAudioContext, audioScriptProcessor – there's no Web Audio backend, so no AudioContext
autoCenterImmediately – autoCenter is now always immediate unless the audio is playing
backgroundColor, hideCursor – this can be easily set via CSS
mediaType, mediaControls – you should instead pass an entire media element in the media option. Example.
partialRender – done by default
pixelRatio – window.devicePixelRatio is used by default
renderer – there's just one renderer for now, so no need for this option
responsive – responsiveness is enabled by default
scrollParent – the container will scroll if minPxPerSec is set to a higher value
skipLength – there's no skipForward and skipBackward methods anymore
splitChannelsOptions – you should now use splitChannels to pass the channel options. Pass height: 0 to hide a channel. See this example.
drawingContextAttributes, maxCanvasWidth, forceDecode – removed to reduce code complexity
xhr - please use fetchParams instead
barMinHeight - the minimum bar height is now 1 pixel by default

getFilters, setFilter – as there's no Web Audio "backend"
drawBuffer – to redraw the waveform, use setOptions instead and pass new rendering options
cancelAjax – you can pass an AbortSignal in fetchParams
loadBlob – use URL.createObjectURL() to convert a blob to a URL and call load(url) instead
skipForward, skipBackward, setPlayEnd – can be implemented using setTime(time)
exportPCM is replaced with getDecodedData that returns a decoded audio buffer
toggleMute is now called setMuted(true | false)
setHeight, setWaveColor, setCursorColor, etc. – use setOptions with the corresponding params instead. E.g., wavesurfer.setOptions({ height: 300, waveColor: '#abc' })