katspaugh/wavesurfer.js 7.0.0

on GitHub

New TypeScript version

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

• Typed API for better development experience
• Enhanced decoding and rendering performance
• New and improved plugins

Upgrading from v6

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

Notable differences

• 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.

Removed options

• 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

Removed methods

• 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' })

See the complete documentation of the new API.