forked from katspaugh/wavesurfer.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
67 lines (59 loc) · 1.75 KB
/
app.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
'use strict';
// Create an instance
var wavesurfer;
// Init & load audio file
document.addEventListener('DOMContentLoaded', function() {
// Init
wavesurfer = WaveSurfer.create({
container: document.querySelector('#waveform'),
waveColor: '#A8DBA8',
progressColor: '#3B8686',
backend: 'MediaElement',
plugins: [
WaveSurfer.regions.create({
regionsMinLength: 2,
regions: [
{
start: 1,
end: 3,
loop: false,
color: 'hsla(400, 100%, 30%, 0.5)'
},
{
start: 5,
end: 7,
loop: false,
color: 'hsla(200, 50%, 70%, 0.4)',
minLength: 1,
maxLength: 5
}
],
dragSelection: {
slop: 5
}
})
]
});
wavesurfer.on('error', function(e) {
console.warn(e);
});
// Load audio from URL
wavesurfer.load('../media/demo.wav');
document.querySelector(
'[data-action="play-region-1"]'
).addEventListener('click', function() {
let region = Object.values(wavesurfer.regions.list)[0];
region.play();
});
document.querySelector(
'[data-action="play-region-2"]'
).addEventListener('click', function() {
let region = Object.values(wavesurfer.regions.list)[1];
region.playLoop();
});
document.querySelector(
'[data-action="pause"]'
).addEventListener('click', function() {
wavesurfer.pause();
});
});