Created
December 15, 2024 08:58
-
-
Save katspaugh/c1e811ebce69604ce5519feca1d7791e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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