Docs: webaudio shim example + update readme

Author: katspaugh

README.md

@@ -132,19 +132,21 @@ Have a question about integrating wavesurfer.js on your website? Feel free to as
 
 ### FAQ
 
-* **Q**: Does wavesurfer support large files?
-* **A**: Since wavesurfer decodes audio entirely in the browser using Web Audio, large clips may fail to decode due to memory constraints. We recommend using pre-decoded peaks for large files (see [this example](https://wavesurfer.xyz/examples/?predecoded.js)). You can use a tool like [bbc/audiowaveform](https://github.com/bbc/audiowaveform) to generate peaks.
-
----
-
-* **Q**: What about streaming audio?
-* **A**: Streaming isn't supported because wavesurfer needs to download the entire audio file to decode and render it.
-
----
-
-* **Q**: There is a mismatch between my audio and the waveform. How do I fix it?
-* **A**: If you're using a VBR (variable bit rate) audio file, there might be a mismatch between the audio and the waveform. This can be fixed by converting your file to CBR (constant bit rate). See [this issue](https://github.com/katspaugh/wavesurfer.js/issues/2890#issuecomment-1601067822) for details.
-
+<details>
+  <summary>Does wavesurfer support large files?</summary>
+  Since wavesurfer decodes audio entirely in the browser using Web Audio, large clips may fail to decode due to memory constraints. We recommend using pre-decoded peaks for large files (see <a href="https://wavesurfer.xyz/examples/?predecoded.js">this example</a>). You can use a tool like <a href="https://github.com/bbc/audiowaveform">bbc/audiowaveform</a> to generate peaks.
+</details>
+
+<details>
+  <summary>What about streaming audio?</summary>
+  Streaming audio is supported only with <a href="https://wavesurfer.xyz/examples/?predecoded.js">pre-decoded peaks and duration</a>.
+</details>>
+
+<details>
+  <summary>There is a mismatch between my audio and the waveform. How do I fix it?</summary>
+  If you're using a VBR (variable bit rate) audio file, there might be a mismatch between the audio and the waveform. This can be fixed by converting your file to CBR (constant bit rate).
+  <p>Alternatively, you can use the <a href="https://wavesurfer.xyz/examples/?webaudio-shim.js">Web Audio shim</a> which is more accurate.</p>
+</details>
 
 ## Development
 

examples/predecoded.js

@@ -27,6 +27,7 @@ const wavesurfer = WaveSurfer.create({
       0.02300390601158142, 0.007677287794649601, 0.015354577451944351, 0.007677287794649601, 0.007677288725972176,
     ],
   ],
+  duration: 22,
 })
 
 wavesurfer.on('interaction', () => {

examples/webaudio-shim.js

@@ -0,0 +1,12 @@
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'
+import WebAudio from 'https://unpkg.com/wavesurfer.js@7/dist/webaudio.js'
+
+const media = new WebAudio()
+media.src = '/examples/audio/audio.wav'
+
+const wavesurfer = WaveSurfer.create({
+  container: document.body,
+  waveColor: 'rgb(200, 0, 200)',
+  progressColor: 'rgb(100, 0, 100)',
+  media,
+})