-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
/
regions.js
132 lines (117 loc) · 2.96 KB
/
regions.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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
// Regions plugin
import WaveSurfer from 'wavesurfer.js'
import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.esm.js'
// Initialize the Regions plugin
const regions = RegionsPlugin.create()
// Create a WaveSurfer instance
const ws = WaveSurfer.create({
container: '#waveform',
waveColor: 'rgb(200, 0, 200)',
progressColor: 'rgb(100, 0, 100)',
url: '/examples/audio/audio.wav',
plugins: [regions],
})
// Give regions a random color when they are created
const random = (min, max) => Math.random() * (max - min) + min
const randomColor = () => `rgba(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)}, 0.5)`
// Create some regions at specific time ranges
ws.on('decode', () => {
// Regions
regions.addRegion({
start: 0,
end: 8,
content: 'Resize me',
color: randomColor(),
drag: false,
resize: true,
})
regions.addRegion({
start: 9,
end: 10,
content: 'Cramped region',
color: randomColor(),
minLength: 1,
maxLength: 10,
})
regions.addRegion({
start: 12,
end: 17,
content: 'Drag me',
color: randomColor(),
resize: false,
})
// Markers (zero-length regions)
regions.addRegion({
start: 19,
content: 'Marker',
color: randomColor(),
})
regions.addRegion({
start: 20,
content: 'Second marker',
color: randomColor(),
})
})
regions.enableDragSelection({
color: 'rgba(255, 0, 0, 0.1)',
})
regions.on('region-updated', (region) => {
console.log('Updated region', region)
})
// Loop a region on click
let loop = true
// Toggle looping with a checkbox
document.querySelector('input[type="checkbox"]').onclick = (e) => {
loop = e.target.checked
}
{
let activeRegion = null
regions.on('region-in', (region) => {
console.log('region-in', region)
activeRegion = region
})
regions.on('region-out', (region) => {
console.log('region-out', region)
if (activeRegion === region) {
if (loop) {
region.play()
} else {
activeRegion = null
}
}
})
regions.on('region-clicked', (region, e) => {
e.stopPropagation() // prevent triggering a click on the waveform
activeRegion = region
region.play()
region.setOptions({ color: randomColor() })
})
// Reset the active region when the user clicks anywhere in the waveform
ws.on('interaction', () => {
activeRegion = null
})
}
// Update the zoom level on slider change
ws.once('decode', () => {
document.querySelector('input[type="range"]').oninput = (e) => {
const minPxPerSec = Number(e.target.value)
ws.zoom(minPxPerSec)
}
})
/*
<html>
<div id="waveform"></div>
<p>
<label>
<input type="checkbox" checked="${loop}" />
Loop regions
</label>
<label style="margin-left: 2em">
Zoom: <input type="range" min="10" max="1000" value="10" />
</label>
</p>
<p>
📖 <a href="https://wavesurfer.xyz/docs/classes/plugins_regions.RegionsPlugin">Regions plugin docs</a>
</p>
</html>
*/