Skip to content

Instantly share code, notes, and snippets.

@katspaugh
Created December 3, 2023 10:06
Show Gist options
  • Save katspaugh/7d87d565736f0b6ba8ae926e29c54fb2 to your computer and use it in GitHub Desktop.
Save katspaugh/7d87d565736f0b6ba8ae926e29c54fb2 to your computer and use it in GitHub Desktop.
// Waveform for a video
// Create a video element
/*
<html>
<video
src="/examples/audio/nasa.mp4"
controls
playsinline
style="width: 100%; max-width: 600px; margin: 0 auto; display: block;"
/>
</html>
*/
import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'
// Initialize wavesurfer.js
const ws = WaveSurfer.create({
container: document.body,
waveColor: 'rgb(200, 0, 200)',
progressColor: 'rgb(100, 0, 100)',
// Pass the video element in the `media` param
media: document.querySelector('video'),
})
ws.on('ready', () => {
ws.setTime(10)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment