63 lines
1.9 KiB
JavaScript
63 lines
1.9 KiB
JavaScript
'use strict';
|
|
let audio = document.getElementById('audio');
|
|
let file_path = audio.src;
|
|
|
|
var wavesurfer;
|
|
|
|
// Init & load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Create an instance
|
|
var options = {
|
|
container: '#waveform',
|
|
waveColor: 'white',
|
|
progressColor: 'purple',
|
|
loaderColor: 'purple',
|
|
cursorColor: 'navy',
|
|
plugins: [
|
|
WaveSurfer.spectrogram.create({
|
|
wavesurfer: wavesurfer,
|
|
container: "#wave-spectrogram",
|
|
labels: true
|
|
})
|
|
]
|
|
};
|
|
|
|
wavesurfer = WaveSurfer.create(options);
|
|
wavesurfer.load(file_path);
|
|
});
|
|
|
|
let play = document.getElementById('play').addEventListener('click', function() {
|
|
wavesurfer.play();
|
|
});
|
|
let pause = document.getElementById('pause').addEventListener('click', function() {
|
|
wavesurfer.pause();
|
|
});
|
|
let restart = document.getElementById('restart').addEventListener('click', function() {
|
|
wavesurfer.play(0);
|
|
});
|
|
|
|
function getCursorXY(e) {
|
|
return [e.pageX, e.pageY];
|
|
}
|
|
|
|
function measure(x, y) {
|
|
let spectro = document.getElementById('wave-spectrogram');
|
|
let spectro_x = spectro.offsetLeft;
|
|
let spectro_y = spectro.offsetTop;
|
|
let spectro_height = spectro.clientHeight;
|
|
let spectro_width = spectro.clientWidth;
|
|
x = (x - spectro_x);
|
|
y = -(-(-y + spectro_y) - spectro_height);
|
|
let t = (x / spectro_width) * audio.duration;
|
|
let f = (y / spectro_height) * 24;
|
|
document.getElementById('cursor-time').innerHTML = Math.round(t);
|
|
document.getElementById('cursor-frequency').innerHTML = Math.round(f);
|
|
}
|
|
|
|
let spectro = document.getElementById("wave-spectrogram");
|
|
console.log(spectro);
|
|
spectro.addEventListener('mousemove', function() {
|
|
let coords = getCursorXY(window.event);
|
|
measure(coords[0], coords[1]);
|
|
// console.log(getCursorXY(window.event));
|
|
}); |