F.A.Q

How to render WaveSurfer in NextJS Project?

First of all, WaveSurfer depends on wavesurfer.js that is client only library.

You should import wavesurfer-react components and all others based on them using dynamic import with ssr option to be disabled.

Also, for next@^17 you should use 'use client' to determine that this is client component.

How to deal with TypeError: Failed to execute 'decodeAudioData' on 'BaseAudioContext'?

If you faced the following error, then try to set WebAudio via backend prop.

More info about possible similar errors (Russian Source): https://www.articleshub.net/2023/09/ne-udalos-ispolzovat-audiocontext-dlya.html