forked from katspaugh/wavesurfer.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
timeline.js
47 lines (39 loc) · 1.09 KB
/
timeline.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// Timeline plugin
import WaveSurfer from 'wavesurfer.js'
import TimelinePlugin from 'wavesurfer.js/dist/plugins/timeline.esm.js'
// Create an instance of WaveSurfer
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()],
})
// Play on click
wavesurfer.on('interaction', () => {
wavesurfer.play()
})
// Rewind to the beginning on finished playing
wavesurfer.on('finish', () => {
wavesurfer.setTime(0)
})
/*
<html>
<label>
Zoom: <input type="range" min="10" max="1000" value="100" />
</label>
<div id="waveform"></div>
<p>
📖 <a href="https://wavesurfer.xyz/docs/classes/plugins_timeline.TimelinePlugin">Timeline plugin docs</a>
</p>
</html>
*/
// 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)
})
})