Skip to content

Instantly share code, notes, and snippets.

@katspaugh
Last active December 28, 2024 05:45
Show Gist options
  • Save katspaugh/acf48e77afc43ea91be2dd93eae98721 to your computer and use it in GitHub Desktop.
Save katspaugh/acf48e77afc43ea91be2dd93eae98721 to your computer and use it in GitHub Desktop.
// Custom styling via CSS
/*
<html>
<style>
#waveform ::part(scroll) {
padding: 15px;
}
#waveform ::part(outside) {
margin: -15px;
padding: 15px;
box-sizing: content-box;
}
</style>
<div id="waveform"></div>
</html>
*/
import WaveSurfer from 'wavesurfer.js'
import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.esm.js'
// Create a Regions plugin instance
const wsRegions = RegionsPlugin.create()
// Create an instance of WaveSurfer
const wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'hotpink',
progressColor: 'purple',
url: '/examples/audio/audio.wav',
plugins: [wsRegions],
})
// Create some regions at specific time ranges
wavesurfer.once('ready', () => {
wsRegions.addRegion({
id: 'outside',
start: 0,
end: 7,
color: 'rgba(0, 0, 200, 0.2)',
content: 'Blue',
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment