Skip to content

Instantly share code, notes, and snippets.

@katspaugh
Created January 8, 2024 15:50
Show Gist options
  • Save katspaugh/2a124b3f28a9320676aa6c300a563fae to your computer and use it in GitHub Desktop.
Save katspaugh/2a124b3f28a9320676aa6c300a563fae to your computer and use it in GitHub Desktop.
import WaveSurfer from 'wavesurfer.js'
import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.esm.js'
const ws = WaveSurfer.create({
container: document.body,
waveColor: 'rgb(200, 0, 200)',
progressColor: 'rgb(100, 0, 100)',
url: '/examples/audio/audio.wav',
})
const wsRegions = ws.registerPlugin(RegionsPlugin.create())
ws.on('decode', () => {
// Regions
const region = wsRegions.addRegion({
start: 2,
end: 8,
})
let prevStart = region.start
let prevEnd = region.end
region.on('update', () => {
if (prevStart !== region.start && prevEnd !== region.end) {
console.log('Moved')
} else {
console.log('Resized from the', prevStart !== region.start ? 'start' : 'end')
}
prevStart = region.start
prevEnd = region.end
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment