Skip to content

7.0.0

Compare
Choose a tag to compare
@github-actions github-actions released this 10 Jul 08:18
fa2bcfe

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