Skip to content

Instantly share code, notes, and snippets.

@katspaugh
Created December 15, 2024 08:58
Show Gist options
  • Save katspaugh/c1e811ebce69604ce5519feca1d7791e to your computer and use it in GitHub Desktop.
Save katspaugh/c1e811ebce69604ce5519feca1d7791e to your computer and use it in GitHub Desktop.
import WaveSurfer from 'wavesurfer.js'
import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.esm.js'
// Initialize the Regions plugin
const regions = RegionsPlugin.create()
// Create a WaveSurfer instance
const ws = WaveSurfer.create({
container: document.body,
waveColor: 'rgb(200, 0, 200)',
progressColor: 'rgb(100, 0, 100)',
url: '/examples/audio/audio.wav',
plugins: [regions],
})
// Give regions a random color when they are created
const random = (min, max) => Math.random() * (max - min) + min
const randomColor = () => `rgba(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)}, 0.5)`
// Change region color on click
regions.on('region-clicked', (region, e) => {
e.stopPropagation()
region.setOptions({ color: randomColor() })
})
// Create some regions at specific time ranges
ws.on('decode', () => {
// Regions
regions.addRegion({
start: 0,
end: 8,
content: 'Resize me',
color: randomColor(),
drag: false,
resize: true,
})
regions.addRegion({
start: 9,
end: 10,
content: 'Cramped region',
color: randomColor(),
minLength: 1,
maxLength: 10,
})
regions.addRegion({
start: 12,
end: 17,
content: 'Drag me',
color: randomColor(),
resize: false,
})
// Markers (zero-length regions)
regions.addRegion({
start: 19,
content: 'Marker',
color: randomColor(),
})
regions.addRegion({
start: 20,
content: 'Second marker',
color: randomColor(),
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment