Premier commit

js/affichage-info-archives.js

@@ -0,0 +1,17 @@
+const audioLines = document.querySelectorAll('.audio-line');
+
+audioLines.forEach(line => {
+  const header = line.querySelector('.audio-info');
+
+  header.addEventListener('click', () => {
+    const isActive = line.classList.contains('active');
+
+    // Fermer tous les autres
+    audioLines.forEach(l => l.classList.remove('active'));
+
+    // Si ce n'était pas déjà ouvert, on l'ouvre
+    if (!isActive) {
+      line.classList.add('active');
+    }
+  });
+});

js/changement-page.js

@@ -0,0 +1,27 @@
+function showPage(pageId, button) {
+  // Masquer toutes les sections avec la classe "page"
+  document.querySelectorAll('.page').forEach(page => {
+    page.style.display = 'none';
+  });
+
+  // Afficher la section demandée
+  const selectedPage = document.getElementById(pageId);
+  if (selectedPage) {
+    selectedPage.style.display = 'block';
+  }
+
+  // Retirer la classe active de tous les conteneurs de boutons
+  document.querySelectorAll('#archives-button, #apropos-button').forEach(div => {
+    div.classList.remove('active');
+  });
+
+  // Ajouter la classe active au conteneur du bouton cliqué
+  if (button && button.parentElement) {
+    button.parentElement.classList.add('active');
+  }
+}
+
+// Affiche la section home par défaut au chargement
+document.addEventListener('DOMContentLoaded', () => {
+  showPage('home');
+});

js/player-and-archiveplayer copie.js

@@ -0,0 +1,79 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const audio = document.getElementById('myAudio');
+  const playPauseBtn = document.getElementById('playPauseBtn');
+  const seekSlider = document.getElementById('seekSlider');
+  const progressOverlay = document.getElementById('progressOverlay');
+  const title = document.getElementById('title');
+  const secondTitle = document.getElementById('second-title');
+
+  let isDragging = false;
+  let animationFrameId = null;
+
+  // Détection mobile
+  const isMobile = /Mobi|Android/i.test(navigator.userAgent);
+
+  // Initialiser le texte du bouton Play/Pause au chargement
+  playPauseBtn.textContent = isMobile ? '▶' : 'Lecture';
+
+  // Synchronisation de la barre pendant la lecture
+  function updateProgress() {
+    if (!isDragging) {
+      seekSlider.value = audio.currentTime;
+      const percent = (audio.currentTime / audio.duration) * 100;
+      progressOverlay.style.width = percent + "%";
+    }
+    animationFrameId = requestAnimationFrame(updateProgress);
+  }
+
+  // Bouton Play/Pause
+  playPauseBtn.addEventListener('click', () => {
+    if (audio.paused) {
+      audio.play();
+      playPauseBtn.textContent = isMobile ? '⏸' : 'Pause';
+      updateProgress();
+    } else {
+      audio.pause();
+      playPauseBtn.textContent = isMobile ? '▶' : 'Lecture';
+      cancelAnimationFrame(animationFrameId);
+    }
+  });
+
+  // Drag slider
+  seekSlider.addEventListener('input', () => {
+    isDragging = true;
+    const percent = (seekSlider.value / audio.duration) * 100;
+    progressOverlay.style.width = percent + "%";
+  });
+
+  seekSlider.addEventListener('change', () => {
+    audio.currentTime = seekSlider.value;
+    isDragging = false;
+  });
+
+  // Quand un bouton "Écouter" est cliqué
+  document.querySelectorAll('.listen-button').forEach(button => {
+    button.addEventListener('click', () => {
+      const newSrc = button.dataset.src;
+      const mainTitle = button.dataset.title;
+      const subTitle = button.dataset.secondTitle;
+
+      audio.pause();
+      cancelAnimationFrame(animationFrameId);
+
+      audio.src = newSrc;
+      audio.load();
+
+      title.textContent = mainTitle;
+      secondTitle.textContent = subTitle;
+
+      audio.addEventListener('loadedmetadata', () => {
+        seekSlider.max = audio.duration;
+        seekSlider.value = 0;
+        progressOverlay.style.width = "0%";
+        audio.play();
+        playPauseBtn.textContent = isMobile ? '⏸' : 'Pause';
+        updateProgress();
+      }, { once: true });
+    });
+  });
+});

js/player-and-archiveplayer.js

@@ -0,0 +1,79 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const audio = document.getElementById('myAudio');
+  const playPauseBtn = document.getElementById('playPauseBtn');
+  const seekSlider = document.getElementById('seekSlider');
+  const progressOverlay = document.getElementById('progressOverlay');
+  const title = document.getElementById('title');
+  const secondTitle = document.getElementById('second-title');
+
+  let isDragging = false;
+  let animationFrameId = null;
+
+  const isMobile = /Mobi|Android/i.test(navigator.userAgent);
+  playPauseBtn.textContent = isMobile ? '▶' : 'Lecture';
+
+  // Met à jour la barre de progression
+  function updateProgress() {
+    if (!isDragging && !isNaN(audio.duration)) {
+      seekSlider.value = audio.currentTime;
+      const percent = (audio.currentTime / audio.duration) * 100;
+      progressOverlay.style.width = percent + "%";
+    }
+    animationFrameId = requestAnimationFrame(updateProgress);
+  }
+
+  // Play / Pause
+  playPauseBtn.addEventListener('click', () => {
+    if (audio.paused) {
+      audio.play();
+      playPauseBtn.textContent = isMobile ? '⏸' : 'Pause';
+      updateProgress();
+    } else {
+      audio.pause();
+      playPauseBtn.textContent = isMobile ? '▶' : 'Lecture';
+      cancelAnimationFrame(animationFrameId);
+    }
+  });
+
+  // Drag de la barre
+  seekSlider.addEventListener('input', () => {
+    isDragging = true;
+    const percent = (seekSlider.value / audio.duration) * 100;
+    progressOverlay.style.width = percent + "%";
+  });
+
+  seekSlider.addEventListener('change', () => {
+    isDragging = false;
+    audio.currentTime = parseFloat(seekSlider.value);
+  });
+
+  // Quand l'audio change (durée chargée)
+  audio.addEventListener('loadedmetadata', () => {
+    seekSlider.max = audio.duration;
+  });
+
+  // Quand un bouton "Écouter" est cliqué
+  document.querySelectorAll('.listen-button').forEach(button => {
+    button.addEventListener('click', () => {
+      const newSrc = button.getAttribute('data-src');
+      const newTitle = button.getAttribute('data-title');
+      const newSecondTitle = button.getAttribute('data-second-title');
+
+      if (audio.src !== location.href + newSrc) {
+        audio.src = newSrc;
+        title.textContent = newTitle || '';
+        secondTitle.textContent = newSecondTitle || '';
+
+        audio.load();
+        audio.play();
+        playPauseBtn.textContent = isMobile ? '⏸' : 'Pause';
+        updateProgress();
+      } else {
+        // Si on reclique sur le même, on relance la lecture
+        audio.currentTime = 0;
+        audio.play();
+        playPauseBtn.textContent = isMobile ? '⏸' : 'Pause';
+      }
+    });
+  });
+});