From a92caf73492c13e6c3214c92ef57f332e114090c Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Sun, 3 Dec 2023 09:41:02 +0100
Subject: [PATCH] Docs: webaudio shim example + update readme

---
 README.md                 | 28 +++++++++++++++-------------
 examples/predecoded.js    |  1 +
 examples/webaudio-shim.js | 12 ++++++++++++
 3 files changed, 28 insertions(+), 13 deletions(-)
 create mode 100644 examples/webaudio-shim.js

diff --git a/README.md b/README.md
index 31e8b2cbc..e79e23f1f 100644
--- a/README.md
+++ b/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
 
diff --git a/examples/predecoded.js b/examples/predecoded.js
index b14a0c4d7..70c480c3e 100644
--- a/examples/predecoded.js
+++ b/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', () => {
diff --git a/examples/webaudio-shim.js b/examples/webaudio-shim.js
new file mode 100644
index 000000000..79a5a51c1
--- /dev/null
+++ b/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,
+})