60 lines
1.8 KiB
JavaScript
60 lines
1.8 KiB
JavaScript
'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',
|
|
mediaControls: false
|
|
});
|
|
|
|
wavesurfer.once('ready', function() {
|
|
console.log('Using wavesurfer.js ' + WaveSurfer.VERSION);
|
|
});
|
|
|
|
wavesurfer.on('error', function(e) {
|
|
console.warn(e);
|
|
});
|
|
|
|
// Load audio from URL
|
|
wavesurfer.load('../media/demo.wav');
|
|
|
|
// toggle play button
|
|
document
|
|
.querySelector('[data-action="play"]')
|
|
.addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
|
|
|
|
// peaks button
|
|
document
|
|
.querySelector('[data-action="peaks"]')
|
|
.addEventListener('click', function() {
|
|
// load peaks from JSON file. See https://wavesurfer-js.org/faq/
|
|
// for instructions on how to generate peaks
|
|
fetch('../media/demo-peaks.json')
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('HTTP error ' + response.status);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(peaks => {
|
|
console.log(
|
|
'loaded peaks! sample_rate: ' + peaks.sample_rate
|
|
);
|
|
|
|
// load peaks into wavesurfer.js
|
|
wavesurfer.load('../media/demo.wav', peaks.data);
|
|
document.body.scrollTop = 0;
|
|
})
|
|
.catch(e => {
|
|
console.error('error', e);
|
|
});
|
|
});
|
|
});
|