diff --git a/examples/timeline.js b/examples/timeline.js
index 3d2573ee5..6a9705640 100644
--- a/examples/timeline.js
+++ b/examples/timeline.js
@@ -4,32 +4,44 @@ import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js
import TimelinePlugin from 'https://unpkg.com/wavesurfer.js@7/dist/plugins/timeline.esm.js'
// Create an instance of WaveSurfer
-const ws = WaveSurfer.create({
+const wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'rgb(200, 0, 200)',
progressColor: 'rgb(100, 0, 100)',
url: '/examples/audio/audio.wav',
minPxPerSec: 100,
+ plugins: [TimelinePlugin.create()],
})
-// Initialize the Timeline plugin
-ws.registerPlugin(TimelinePlugin.create())
-
// Play on click
-ws.on('interaction', () => {
- ws.play()
+wavesurfer.on('interaction', () => {
+ wavesurfer.play()
})
// Rewind to the beginning on finished playing
-ws.on('finish', () => {
- ws.setTime(0)
+wavesurfer.on('finish', () => {
+ wavesurfer.setTime(0)
})
/*
+
+
📖 Timeline plugin docs
*/
+
+// Update the zoom level on slider change
+wavesurfer.once('decode', () => {
+ const slider = document.querySelector('input[type="range"]')
+
+ slider.addEventListener('input', (e) => {
+ const minPxPerSec = e.target.valueAsNumber
+ wavesurfer.zoom(minPxPerSec)
+ })
+})