Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat add ZoomPlugin #3276

Merged
merged 3 commits into from
Oct 18, 2023
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
add mouse wheel event prevent and zoom plugin example
HoodyHuo committed Oct 18, 2023
commit 49e2a86a589cba6fddcae262a0c4d3593a37285f
73 changes: 73 additions & 0 deletions examples/zoom-plugin.js
Original file line number Diff line number Diff line change
@@ -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)
}
1 change: 1 addition & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 3 additions & 0 deletions src/plugins/zoom.ts
Original file line number Diff line number Diff line change
@@ -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