top of page

bottom of page

let rawAudio = [ "raw1.mp3", "raw2.mp3", "raw3.mp3" ] let masteredAudio = [ "mastered1.mp3", "mastered2.mp3", "mastered3.mp3" ] const audio1 = document.getElementById('audio1'); const audio1Src = audio1.querySelector("source"); const audio2 = document.getElementById('audio2'); const audio2Src = audio2.querySelector("source"); const toggleCheckbox = document.getElementById('toggleCheckbox'); const albums = document.querySelectorAll(".album-grid .album"); toggleCheckbox.checked = true; let selectedAlbum = null; document.addEventListener("DOMContentLoaded", function () { var albumImages = document.querySelectorAll(".album-grid .album"); albumImages.forEach(function (image, index) { image.addEventListener("click", function () { playAudio(index) }); }); let button = document.querySelector("#toggleCheckbox"); button.addEventListener("click", (e) => { toggleAudio(); }); }); audio1.addEventListener("ended", () => { deselectAllAlbums(); }) function deselectAllAlbums() { albums.forEach((album) => { album.classList.remove("selected"); }); selectedAlbum = null; } function playAudio(idx) { if (selectedAlbum === idx) { deselectAllAlbums(); audio1.volume = 0; audio2.volume = 0; audio1.pause(); audio2.pause(); return; } deselectAllAlbums(); albums[idx].classList.add("selected"); selectedAlbum = idx; audio1.volume = 0; audio2.volume = 0; audio1.pause(); audio2.pause(); audio1Src.src = rawAudio[idx]; audio2Src.src = masteredAudio[idx]; audio1.load() audio2.load() if (toggleCheckbox.checked) { audio1.volume = 1; audio2.volume = 0; } else { audio1.volume = 0; audio2.volume = 1; } audio1.play(); audio2.play(); } function toggleAudio() { event.stopPropagation() if (toggleCheckbox.checked) { audio2.volume = 0; audio1.volume = 1; } else { audio2.volume = 1; audio1.volume = 0; } const toggleContainer = document.querySelector('.toggle-container'); toggleContainer.classList.toggle('checked'); } function isElementInViewport(element) { const rect = element.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } // Function to handle the scroll event and check if the element is in the viewport function handleScroll() { const element = document.querySelector(".fade-in"); if (isElementInViewport(element)) { console.log("Element is in the viewport."); // element.classList.add("fade-effect"); } else { console.log("Element is not in the viewport."); // element.classList.remove("fade-effect"); } } // Add a scroll event listener to check when the element enters/leaves the viewport window.addEventListener("scroll", handleScroll); // Initial check to see if the element is in the viewport when the page loads handleScroll();