diff --git a/example/zoom/main.js b/example/zoom/main.js
index ba488e416..ebb3b275c 100644
--- a/example/zoom/main.js
+++ b/example/zoom/main.js
@@ -31,6 +31,10 @@ document.addEventListener('DOMContentLoaded', function () {
end: 100,
color: 'hsla(200, 50%, 70%, 0.1)'
});
+
+ // Init Timeline plugin
+ var timeline = Object.create(WaveSurfer.Timeline);
+ timeline.init({ wavesurfer: wavesurfer, container: '#timeline' });
});
// Zoom slider
diff --git a/plugin/wavesurfer.timeline.js b/plugin/wavesurfer.timeline.js
index 1a418f362..2c993b648 100644
--- a/plugin/wavesurfer.timeline.js
+++ b/plugin/wavesurfer.timeline.js
@@ -44,12 +44,14 @@ WaveSurfer.Timeline = {
}.bind(this));
this._onRedraw = wavesurfer.on('redraw', this.render.bind(this));
+ this._onZoom = wavesurfer.on('zoom', this.render.bind(this));
this._onDestroy = wavesurfer.on('destroy', this.destroy.bind(this));
},
destroy: function () {
// Unsubscribe from internal wavesurfer events
this._onRedraw.un();
+ this._onZoom.un();
this._onDestroy.un();
// Unsubscribe from external timeline events