forked from katspaugh/wavesurfer.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
107 lines (89 loc) · 2.72 KB
/
main.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
'use strict';
// Create an instance
var wavesurfer;
// Init & load audio file
document.addEventListener('DOMContentLoaded', function() {
let options = {
container: document.querySelector('#waveform'),
waveColor: 'violet',
progressColor: 'purple',
cursorColor: 'navy'
};
if (location.search.match('scroll')) {
options.minPxPerSec = 100;
options.scrollParent = true;
}
// Init
wavesurfer = WaveSurfer.create(options);
// Load audio from URL
wavesurfer.load('example/media/demo.wav');
// Regions
if (wavesurfer.enableDragSelection) {
wavesurfer.enableDragSelection({
color: 'rgba(0, 255, 0, 0.1)'
});
}
});
// Play at once when ready
// Won't work on iOS until you touch the page
wavesurfer.on('ready', function() {
//wavesurfer.play();
});
// Report errors
wavesurfer.on('error', function(err) {
console.error(err);
});
// Do something when the clip is over
wavesurfer.on('finish', function() {
console.log('Finished playing');
});
/* Progress bar */
document.addEventListener('DOMContentLoaded', function() {
const progressDiv = document.querySelector('#progress-bar');
const progressBar = progressDiv.querySelector('.progress-bar');
let showProgress = function(percent) {
progressDiv.style.display = 'block';
progressBar.style.width = percent + '%';
};
let hideProgress = function() {
progressDiv.style.display = 'none';
};
wavesurfer.on('loading', showProgress);
wavesurfer.on('ready', hideProgress);
wavesurfer.on('destroy', hideProgress);
wavesurfer.on('error', hideProgress);
});
// Drag'n'drop
document.addEventListener('DOMContentLoaded', function() {
let toggleActive = function(e, toggle) {
e.stopPropagation();
e.preventDefault();
toggle
? e.target.classList.add('wavesurfer-dragover')
: e.target.classList.remove('wavesurfer-dragover');
};
let handlers = {
// Drop event
drop: function(e) {
toggleActive(e, false);
// Load the file into wavesurfer
if (e.dataTransfer.files.length) {
wavesurfer.loadBlob(e.dataTransfer.files[0]);
} else {
wavesurfer.fireEvent('error', 'Not a file');
}
},
// Drag-over event
dragover: function(e) {
toggleActive(e, true);
},
// Drag-leave event
dragleave: function(e) {
toggleActive(e, false);
}
};
let dropTarget = document.querySelector('#drop');
Object.keys(handlers).forEach(function(event) {
dropTarget.addEventListener(event, handlers[event]);
});
});