65 lines
1.7 KiB
JavaScript
65 lines
1.7 KiB
JavaScript
|
'use strict';
|
||
|
|
|
||
|
|
var wavesurfer;
|
||
|
|
|
||
|
|
// Init & load
|
||
|
|
function initAndLoadSpectrogram(colorMap) {
|
||
|
|
// Create an instance
|
||
|
|
let options = {
|
||
|
|
container: '#waveform',
|
||
|
|
waveColor: 'violet',
|
||
|
|
progressColor: 'purple',
|
||
|
|
loaderColor: 'purple',
|
||
|
|
cursorColor: 'navy',
|
||
|
|
plugins: [
|
||
|
|
WaveSurfer.spectrogram.create({
|
||
|
|
container: '#wave-spectrogram',
|
||
|
|
labels: true,
|
||
|
|
colorMap: colorMap
|
||
|
|
})
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
if (location.search.match('scroll')) {
|
||
|
|
options.minPxPerSec = 100;
|
||
|
|
options.scrollParent = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (location.search.match('normalize')) {
|
||
|
|
options.normalize = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
wavesurfer = WaveSurfer.create(options);
|
||
|
|
|
||
|
|
/* Progress bar */
|
||
|
|
(function() {
|
||
|
|
let progressDiv = document.querySelector('#progress-bar');
|
||
|
|
let 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);
|
||
|
|
})();
|
||
|
|
|
||
|
|
wavesurfer.load('../media/demo.wav');
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
// Load a colormap json file to be passed to the spectrogram.create method.
|
||
|
|
WaveSurfer.util
|
||
|
|
.fetchFile({ url: 'hot-colormap.json', responseType: 'json' })
|
||
|
|
.on('success', colorMap => {
|
||
|
|
initAndLoadSpectrogram(colorMap);
|
||
|
|
});
|
||
|
|
});
|