95 lines
3.0 KiB
JavaScript
95 lines
3.0 KiB
JavaScript
'use strict';
|
|
let audio = document.getElementById('audio');
|
|
let file_path = audio.src;
|
|
|
|
function loadJSON(callback) {
|
|
|
|
var xobj = new XMLHttpRequest();
|
|
xobj.overrideMimeType("application/json");
|
|
xobj.open('GET', '/larynx/scripts/hot-colormap.json', true); // Replace 'appDataServices' with the path to your file
|
|
xobj.onreadystatechange = function() {
|
|
if (xobj.readyState == 4 && xobj.status == "200") {
|
|
// Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
|
|
callback(xobj.responseText);
|
|
}
|
|
};
|
|
xobj.send(null);
|
|
}
|
|
|
|
let colorMap;
|
|
let wavesurfer;
|
|
|
|
// Init & load
|
|
function initAndLoadSpectrogram(colorMap) {
|
|
// 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,
|
|
colorMap: colorMap
|
|
})
|
|
]
|
|
};
|
|
|
|
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;
|
|
let frequency_factor = 1;
|
|
if (document.getElementById('exp_x10').checked) {
|
|
frequency_factor = 10;
|
|
}
|
|
document.getElementById('cursor-time').innerHTML = Math.round(t / frequency_factor * 100) / 100;
|
|
document.getElementById('cursor-frequency').innerHTML = Math.round(f * frequency_factor * 100) / 100;
|
|
}
|
|
|
|
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));
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Load a colormap json file to be passed to the spectrogram.create method.
|
|
WaveSurfer.util
|
|
.fetchFile({
|
|
url: '/larynx/scripts/hot-colormap.json',
|
|
responseType: 'json'
|
|
})
|
|
.on('success', colorMap => {
|
|
initAndLoadSpectrogram(colorMap);
|
|
});
|
|
}); |