add mouse wheel event prevent and zoom plugin example

katspaugh · Oct 18, 2023 · 49e2a86 · 49e2a86
1 parent c0b8bac
commit 49e2a86
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 0 deletions.
diff --git a/examples/zoom-plugin.js b/examples/zoom-plugin.js
@@ -0,0 +1,73 @@
+/**
+ * Zoom plugin
+ *
+ * Zoom in or out on the waveform when scrolling the mouse wheel
+ */
+
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'
+import ZoomPlugin from 'https://unpkg.com/wavesurfer.js@7/dist/plugins/zoom.esm.js'
+
+// Create an instance of WaveSurfer
+const wavesurfer = WaveSurfer.create({
+  container: '#waveform',
+  waveColor: 'rgb(200, 0, 200)',
+  progressColor: 'rgb(100, 0, 100)',
+  url: '/examples/audio/audio.wav',
+  minPxPerSec: 100,
+})
+
+// Initialize the Zoom plugin
+wavesurfer.registerPlugin(ZoomPlugin.create({
+  // the amount of zoom per wheel step, e.g. 0.1 means a 10% magnification per scroll
+  scale : 0.2
+}))
+
+//  show the current minPxPerSec value
+const minPxPerSecSpan = document.querySelector('#minPxPerSec')
+wavesurfer.on('zoom', (minPxPerSec) => {
+  minPxPerSecSpan.textContent = `${Math.round(minPxPerSec)}`
+})
+
+// Create a minPxPerSec display and waveform container
+/*
+<html>
+  <div>
+       minPxPerSec: <span id="minPxPerSec">100</span> px/s
+  </div>
+
+    <div id="waveform"></div>
+ </html>
+ *
+ */
+
+
+
+
+// A few more controls
+/*
+<html>
+    <button id="play">Play/Pause</button>
+    <button id="backward">Backward 5s</button>
+    <button id="forward">Forward 5s</button>
+  <p>
+    📖 Zoom in or out on the waveform when scrolling the mouse wheel
+  </p>
+</html>
+*/
+
+const playButton = document.querySelector('#play')
+const forwardButton = document.querySelector('#forward')
+const backButton = document.querySelector('#backward')
+
+
+playButton.onclick = () => {
+  wavesurfer.playPause()
+}
+
+forwardButton.onclick = () => {
+  wavesurfer.skip(5)
+}
+
+backButton.onclick = () => {
+  wavesurfer.skip(-5)
+}
diff --git a/index.html b/index.html
@@ -138,6 +138,7 @@ <h1>wavesurfer.js examples</h1>
           <li><a href="#all-options.js">Options</a></li>
           <li><a href="#events.js">Events</a></li>
           <li><a href="#zoom.js">Zoom</a></li>
+          <li><a href="#zoom-plugin.js">Zoom Plugin</a></li>
           <li><a href="#regions.js">Regions</a></li>
           <li><a href="#hover.js">Hover</a></li>
           <li><a href="#timeline.js">Timeline</a></li>

diff --git a/src/plugins/zoom.ts b/src/plugins/zoom.ts
@@ -55,6 +55,9 @@ class ZoomPlugin extends BasePlugin<ZoomPluginEvents, ZoomPluginOptions> {
     if (!this.wavesurfer?.options.minPxPerSec || !this.container) {
       return
     }
+    // prevent scrolling the sidebar while zooming
+    e.preventDefault()
+
     const duration = this.wavesurfer.getDuration()
     const oldMinPxPerSec = this.wavesurfer.options.minPxPerSec
     const x = e.clientX