top of page

Deine Terminanfrage

Vielen Dank für dein Interesse bei BrightVox Studios!

Fülle einfach die Felder aus und wir melden uns innerhalb weniger Stunden bei dir.

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();