Skip to content

Instantly share code, notes, and snippets.

@katspaugh
Created December 8, 2023 21:13
Show Gist options
  • Save katspaugh/37c043069e68d0497bda8ce9c72add60 to your computer and use it in GitHub Desktop.
Save katspaugh/37c043069e68d0497bda8ce9c72add60 to your computer and use it in GitHub Desktop.
import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'
import RegionsPlugin from 'https://unpkg.com/wavesurfer.js@7/dist/plugins/regions.esm.js'
import EnvelopePlugin from 'https://unpkg.com/wavesurfer.js@7/dist/plugins/envelope.esm.js'
// Create an instance of WaveSurfer
const ws = WaveSurfer.create({
container: 'body',
waveColor: 'rgb(200, 0, 200)',
progressColor: 'rgb(100, 0, 100)',
url: '/examples/audio/audio.wav',
})
// Initialize the Regions plugin
const wsRegions = ws.registerPlugin(RegionsPlugin.create())
const envelope = ws.registerPlugin(EnvelopePlugin.create({
}))
wsRegions.on('region-created', (region) => {
[
{ time: region.start, volume: 0 },
{ time: region.start + 2, volume: 1 },
{ time: region.end - 2, volume: 1 },
{ time: region.end, volume: 0 },
].forEach((point) => envelope.addPoint(point))
})
// Create some regions at specific time ranges
ws.on('decode', () => {
// Regions
wsRegions.addRegion({
start: 0,
end: 8,
})
wsRegions.addRegion({
start: 12,
end: 17,
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment