diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b224fc1 --- /dev/null +++ b/.gitignore @@ -0,0 +1,48 @@ +# Compiled and build artifacts +*.pyc +__pycache__/ +*.o +*.obj +*.class +*.exe +*.dll +*.so +*.a +*.out + +# Dependencies +node_modules/ +venv/ +.venv/ +.env +.env.local +.env.* + +# Logs and temp files +*.log +*.tmp +*.swp +*.swo + +# Editors +.vscode/ +.idea/ + +# System files +.DS_Store +Thumbs.db + +# Coverage +coverage/ +htmlcov/ +.coverage + +# Build directories +dist/ +build/ +target/ +.gradle/ + +# Python cache +.mypy_cache/ +.pytest_cache/ \ No newline at end of file diff --git a/script.js b/script.js index eb559af..323f400 100644 --- a/script.js +++ b/script.js @@ -1,43 +1,71 @@ -/* - Designed by: Emil Ismailov - Original image: https://dribbble.com/shots/5089813-90-s-Music-Player -*/ - - -let b = document.body; -let radio = document.querySelector("#radio"); -let a = document.querySelector("#audio"); - -let sfa = document.querySelectorAll(".speaker__front"); -let sta = document.querySelectorAll(".speaker__top"); -let sba = document.querySelectorAll(".speaker__back"); -let sla = document.querySelectorAll(".speaker__left"); -let sra = document.querySelectorAll(".speaker__right"); - -let son = document.querySelector("#son"); -let soff = document.querySelector("#soff"); - - -/*******************/ -let playAudio = () => { - a.loop = true; - - if (a.paused) a.play(); - else { - a.pause(); - a.currentTime = 0; - } - sfa.forEach( f => f.classList.toggle("sfa") ); - sta.forEach( f => f.classList.toggle("sta") ); - sba.forEach( f => f.classList.toggle("sba") ); - sla.forEach( f => f.classList.toggle("sla") ); - sra.forEach( f => f.classList.toggle("sra") ); - - radio.classList.toggle("radio-a") - - son.classList.toggle("s") - soff.classList.toggle("s") -} - -/*******************/ -b.addEventListener("click", playAudio) \ No newline at end of file +/* + Designed by: Emil Ismailov + Original image: https://dribbble.com/shots/5089813-90-s-Music-Player +*/ + +(function() { + 'use strict'; + + // Cache DOM elements + const radio = document.getElementById("radio"); + const audio = document.getElementById("audio"); + const son = document.getElementById("son"); + const soff = document.getElementById("soff"); + + // Cache speaker elements + const speakers = { + front: document.querySelectorAll(".speaker__front"), + top: document.querySelectorAll(".speaker__top"), + back: document.querySelectorAll(".speaker__back"), + left: document.querySelectorAll(".speaker__left"), + right: document.querySelectorAll(".speaker__right") + }; + + // Preload audio for better performance + audio.preload = 'auto'; + audio.loop = true; + + // Toggle function with optimized class manipulation + const toggleSpeakers = (className) => { + speakers.front.forEach(el => el.classList.toggle(className)); + speakers.top.forEach(el => el.classList.toggle(className)); + speakers.back.forEach(el => el.classList.toggle(className)); + speakers.left.forEach(el => el.classList.toggle(className)); + speakers.right.forEach(el => el.classList.toggle(className)); + }; + + // Play/Pause handler + const handleAudio = (e) => { + // Only trigger on direct clicks, not bubbles from interactive elements + if (e.target.closest('.svg-icon')) return; + + e.stopPropagation(); + + if (audio.paused) { + audio.play().catch(err => console.log('Audio play failed:', err)); + } else { + audio.pause(); + audio.currentTime = 0; + } + + toggleSpeakers('sfa'); + toggleSpeakers('sta'); + toggleSpeakers('sba'); + toggleSpeakers('sla'); + toggleSpeakers('sra'); + + radio.classList.toggle("radio-a"); + son.classList.toggle("s"); + soff.classList.toggle("s"); + }; + + // Use event delegation with specific target + document.addEventListener("click", handleAudio); + + // Expose audio controls globally if needed + window.audioPlayer = { + play: () => audio.play(), + pause: () => audio.pause(), + toggle: handleAudio + }; +})(); \ No newline at end of file