Docs: add zoom in the timeline example

katspaugh · Nov 26, 2023 · 7fe0951 · 7fe0951
1 parent 19cd554
commit 7fe0951
Showing 1 changed file with 20 additions and 8 deletions.
diff --git a/examples/timeline.js b/examples/timeline.js
@@ -4,32 +4,44 @@ import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js
 import TimelinePlugin from 'https://unpkg.com/wavesurfer.js@7/dist/plugins/timeline.esm.js'
 
 // Create an instance of WaveSurfer
-const ws = WaveSurfer.create({
+const wavesurfer = WaveSurfer.create({
   container: '#waveform',
   waveColor: 'rgb(200, 0, 200)',
   progressColor: 'rgb(100, 0, 100)',
   url: '/examples/audio/audio.wav',
   minPxPerSec: 100,
+  plugins: [TimelinePlugin.create()],
 })
 
-// Initialize the Timeline plugin
-ws.registerPlugin(TimelinePlugin.create())
-
 // Play on click
-ws.on('interaction', () => {
-  ws.play()
+wavesurfer.on('interaction', () => {
+  wavesurfer.play()
 })
 
 // Rewind to the beginning on finished playing
-ws.on('finish', () => {
-  ws.setTime(0)
+wavesurfer.on('finish', () => {
+  wavesurfer.setTime(0)
 })
 
 /*
 <html>
+  <label>
+    Zoom: <input type="range" min="10" max="1000" value="100" />
+  </label>
+
   <div id="waveform"></div>
   <p>
     📖 <a href="https://wavesurfer.xyz/docs/classes/plugins_timeline.TimelinePlugin">Timeline plugin docs</a>
   </p>
 </html>
 */
+
+// Update the zoom level on slider change
+wavesurfer.once('decode', () => {
+  const slider = document.querySelector('input[type="range"]')
+
+  slider.addEventListener('input', (e) => {
+    const minPxPerSec = e.target.valueAsNumber
+    wavesurfer.zoom(minPxPerSec)
+  })
+})