@@ -0,0 +1,228 @@
|
||||
console.log("script.js wurde geladen!");
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
let audioPlayer = document.getElementById("audioPlayer");
|
||||
|
||||
// Falls das Audio-Element nicht existiert (z. B. auf Unterseiten), erstelle es dynamisch
|
||||
if (!audioPlayer) {
|
||||
audioPlayer = document.createElement("audio");
|
||||
audioPlayer.id = "audioPlayer";
|
||||
document.body.appendChild(audioPlayer);
|
||||
}
|
||||
|
||||
const playMusicButton = document.getElementById("playMusic");
|
||||
const menuPlayPauseButton = document.getElementById("menuPlayPause");
|
||||
const soundwaveButton = document.getElementById("soundwaveButton");
|
||||
const menu = document.getElementById("menu");
|
||||
const progressSlider = document.getElementById("progressSlider");
|
||||
const trackButtons = document.querySelectorAll(".track");
|
||||
const playPauseButton = document.querySelector(".play-pause");
|
||||
const prevButton = document.querySelector(".prev");
|
||||
const nextButton = document.querySelector(".next");
|
||||
const header = document.querySelector("header");
|
||||
|
||||
let currentIndex = 0;
|
||||
let dotInterval;
|
||||
|
||||
/** 🎵 MUSIK SPEICHERN & WIEDERHERSTELLEN **/
|
||||
if (sessionStorage.getItem("audioSrc")) {
|
||||
audioPlayer.src = sessionStorage.getItem("audioSrc");
|
||||
audioPlayer.currentTime = parseFloat(sessionStorage.getItem("audioTime")) || 0;
|
||||
if (sessionStorage.getItem("audioPlaying") === "true") {
|
||||
audioPlayer.play();
|
||||
}
|
||||
} else if (!audioPlayer.src) {
|
||||
audioPlayer.src = "audio/bounce_launcher.mp3"; // Standard-Track nur setzen, wenn kein Track gespeichert ist
|
||||
}
|
||||
|
||||
audioPlayer.addEventListener("timeupdate", () => {
|
||||
sessionStorage.setItem("audioTime", audioPlayer.currentTime);
|
||||
});
|
||||
|
||||
audioPlayer.addEventListener("play", () => {
|
||||
sessionStorage.setItem("audioSrc", audioPlayer.src);
|
||||
sessionStorage.setItem("audioPlaying", "true");
|
||||
});
|
||||
|
||||
audioPlayer.addEventListener("pause", () => {
|
||||
sessionStorage.setItem("audioPlaying", "false");
|
||||
});
|
||||
|
||||
/** 🎚️ Fortschrittsleiste **/
|
||||
if (progressSlider) {
|
||||
audioPlayer.addEventListener("timeupdate", () => {
|
||||
if (audioPlayer.duration) {
|
||||
let progressPercent = (audioPlayer.currentTime / audioPlayer.duration) * 100;
|
||||
progressSlider.value = progressPercent;
|
||||
progressSlider.style.background = `linear-gradient(to right, var(--secondary-color) ${progressPercent}%, #555 ${progressPercent}%)`;
|
||||
}
|
||||
});
|
||||
|
||||
progressSlider.addEventListener("input", () => {
|
||||
let seekTime = (progressSlider.value / 100) * audioPlayer.duration;
|
||||
audioPlayer.currentTime = seekTime;
|
||||
});
|
||||
}
|
||||
|
||||
/** 🎛️ Play/Pause-Icons aktualisieren **/
|
||||
function updatePlayPauseIcon() {
|
||||
let playIcon = "img/icons/play.png";
|
||||
let pauseIcon = "img/icons/pause.png";
|
||||
|
||||
let playImg = `<img src="${playIcon}" alt="Play">`;
|
||||
let pauseImg = `<img src="${pauseIcon}" alt="Pause">`;
|
||||
|
||||
if (!audioPlayer) return;
|
||||
|
||||
if (audioPlayer.paused) {
|
||||
if (playPauseButton) playPauseButton.innerHTML = '<i class="fas fa-play"></i>';
|
||||
if (menuPlayPauseButton) menuPlayPauseButton.innerHTML = playImg;
|
||||
if (playMusicButton) playMusicButton.innerHTML = playImg;
|
||||
if (soundwaveButton) soundwaveButton.classList.remove("playing");
|
||||
} else {
|
||||
if (playPauseButton) playPauseButton.innerHTML = '<i class="fas fa-pause"></i>';
|
||||
if (menuPlayPauseButton) menuPlayPauseButton.innerHTML = pauseImg;
|
||||
if (playMusicButton) playMusicButton.innerHTML = pauseImg;
|
||||
if (soundwaveButton) soundwaveButton.classList.add("playing");
|
||||
}
|
||||
}
|
||||
|
||||
updatePlayPauseIcon();
|
||||
|
||||
if (audioPlayer && !audioPlayer.paused) {
|
||||
if (soundwaveButton) soundwaveButton.classList.add("playing");
|
||||
}
|
||||
|
||||
/** ▶️ / ⏸️ Play/Pause Funktion **/
|
||||
function playPauseToggle() {
|
||||
if (audioPlayer.paused) {
|
||||
audioPlayer.play();
|
||||
sessionStorage.setItem("audioPlaying", "true");
|
||||
} else {
|
||||
audioPlayer.pause();
|
||||
sessionStorage.setItem("audioPlaying", "false");
|
||||
}
|
||||
updatePlayPauseIcon();
|
||||
}
|
||||
|
||||
/** 🖱️ EventListener für Play/Pause **/
|
||||
if (playPauseButton) playPauseButton.addEventListener("click", playPauseToggle);
|
||||
if (menuPlayPauseButton) menuPlayPauseButton.addEventListener("click", playPauseToggle);
|
||||
if (playMusicButton) playMusicButton.addEventListener("click", playPauseToggle);
|
||||
|
||||
/** 📜 Menü öffnen & schließen **/
|
||||
function toggleMenu() {
|
||||
if (!menu) return;
|
||||
menu.classList.toggle("active");
|
||||
updateHeaderState(); // Header-Zustand sofort anpassen
|
||||
}
|
||||
|
||||
document.querySelectorAll("#menu nav a").forEach(link => {
|
||||
link.addEventListener("click", () => {
|
||||
closeMenu(); // Menü schließen, wenn ein Link geklickt wird
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function updateHeaderState() {
|
||||
if (menu && menu.classList.contains("active")) {
|
||||
// Menü ist geöffnet → Schrift schwarz, transparenter Hintergrund, kein Blur
|
||||
header.classList.add("menu-open");
|
||||
|
||||
} else {
|
||||
// Menü ist geschlossen → Schrift weiß, dunkler transparenter Hintergrund mit Blur
|
||||
header.classList.remove("menu-open");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function closeMenu() {
|
||||
if (!menu) return;
|
||||
menu.classList.remove("active");
|
||||
updateHeaderState();
|
||||
}
|
||||
|
||||
if (soundwaveButton) soundwaveButton.addEventListener("click", toggleMenu);
|
||||
if (menu) {
|
||||
menu.addEventListener("click", (e) => {
|
||||
if (e.target === menu) closeMenu();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
/** 🔥 Markiert den aktuellen Track **/
|
||||
function updateTrackHighlight(activeButton) {
|
||||
trackButtons.forEach(btn => {
|
||||
btn.classList.remove("playing");
|
||||
btn.querySelector(".track-dots").innerText = "";
|
||||
});
|
||||
activeButton.classList.add("playing");
|
||||
animateDots();
|
||||
}
|
||||
|
||||
/** 💡 Punkt-Animation **/
|
||||
function animateDots() {
|
||||
clearInterval(dotInterval);
|
||||
let playingTrack = document.querySelector(".track.playing .track-dots");
|
||||
if (!playingTrack) return;
|
||||
let dots = [".", "..", "...", ".....", "........"];
|
||||
let dotIndex = 0;
|
||||
dotInterval = setInterval(() => {
|
||||
if (!document.querySelector(".track.playing") || audioPlayer.paused) {
|
||||
clearInterval(dotInterval);
|
||||
if (playingTrack) playingTrack.innerText = "";
|
||||
return;
|
||||
}
|
||||
playingTrack.innerText = dots[dotIndex];
|
||||
dotIndex = (dotIndex + 1) % dots.length;
|
||||
}, 50);
|
||||
}
|
||||
|
||||
/** 🎵 EventListener für Track-Klick **/
|
||||
trackButtons.forEach(button => button.addEventListener("click", (event) => {
|
||||
let clickedButton = event.currentTarget;
|
||||
let trackSrc = clickedButton.dataset.src;
|
||||
if (audioPlayer.src !== trackSrc) {
|
||||
audioPlayer.src = trackSrc;
|
||||
audioPlayer.play();
|
||||
updateTrackHighlight(clickedButton);
|
||||
} else {
|
||||
playPauseToggle();
|
||||
}
|
||||
updatePlayPauseIcon();
|
||||
}));
|
||||
|
||||
|
||||
/** ⏩ Nächster Track **/
|
||||
function playNextTrack() {
|
||||
currentIndex = (currentIndex + 1) % trackButtons.length;
|
||||
let nextTrack = trackButtons[currentIndex];
|
||||
audioPlayer.src = nextTrack.dataset.src;
|
||||
audioPlayer.play();
|
||||
updateTrackHighlight(nextTrack);
|
||||
updatePlayPauseIcon();
|
||||
}
|
||||
|
||||
/** ⏪ Vorheriger Track **/
|
||||
function playPreviousTrack() {
|
||||
currentIndex = (currentIndex - 1 + trackButtons.length) % trackButtons.length;
|
||||
let prevTrack = trackButtons[currentIndex];
|
||||
audioPlayer.src = prevTrack.dataset.src;
|
||||
audioPlayer.play();
|
||||
updateTrackHighlight(prevTrack);
|
||||
updatePlayPauseIcon();
|
||||
}
|
||||
|
||||
/** 🖱️ EventListener für Prev/Nächster Button **/
|
||||
if (nextButton) nextButton.addEventListener("click", playNextTrack);
|
||||
if (prevButton) prevButton.addEventListener("click", playPreviousTrack);
|
||||
|
||||
|
||||
audioPlayer.addEventListener("ended", () => {
|
||||
playNextTrack();
|
||||
updateTrackHighlight(trackButtons[currentIndex]); // Markierung für den neuen Track setzen
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user