58 lines
1.1 KiB
JavaScript
58 lines
1.1 KiB
JavaScript
const media = document.getElementById("video");
|
|
const sun = document.getElementById('sun')
|
|
|
|
let filter = null;
|
|
|
|
let saturation = 1;
|
|
let freq = 1000;
|
|
let gain = 0;
|
|
|
|
function showVideo() {
|
|
sun.style.display = 'none';
|
|
media.style.display = 'flex';
|
|
}
|
|
|
|
function hideVideo() {
|
|
sun.style.display = 'flex';
|
|
media.style.display = 'none';
|
|
}
|
|
|
|
function increaseValues() {
|
|
saturation += 1;
|
|
gain += 5;
|
|
freq += 1000;
|
|
}
|
|
|
|
function createFilter() {
|
|
if (filter === null) {
|
|
const context = new AudioContext();
|
|
const audioSource = context.createMediaElementSource(media);
|
|
|
|
filter = context.createBiquadFilter();
|
|
audioSource.connect(filter);
|
|
|
|
filter.connect(context.destination);
|
|
filter.type = "lowshelf";
|
|
}
|
|
}
|
|
|
|
sun.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
|
|
createFilter();
|
|
filter.frequency.value = freq;
|
|
filter.gain.value = gain;
|
|
|
|
showVideo();
|
|
media.play();
|
|
media.style.filter = `saturate(${saturation})`;
|
|
|
|
console.debug(`saturation: ${saturation} / lowFreq: ${freq} / gain: ${gain}`);
|
|
increaseValues();
|
|
})
|
|
|
|
media.addEventListener('ended', () => {
|
|
hideVideo();
|
|
media.currentTime = 0;
|
|
})
|