133 lines
3.3 KiB
JavaScript
133 lines
3.3 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
/* =========================
|
|
ÉLÉMENTS
|
|
========================= */
|
|
|
|
const player = document.getElementById('player');
|
|
const audio = document.getElementById('myAudio');
|
|
const playPauseBtn = document.getElementById('playPauseBtn');
|
|
const seekContainer = document.getElementById('seekContainer');
|
|
const seekSlider = document.getElementById('seekSlider');
|
|
const progressOverlay = document.getElementById('progressOverlay');
|
|
const title = document.getElementById('title');
|
|
const secondTitle = document.getElementById('second-title');
|
|
|
|
if (!audio || !playPauseBtn) return;
|
|
|
|
/* =========================
|
|
ÉTAT
|
|
========================= */
|
|
|
|
let isDragging = false;
|
|
let animationFrameId = null;
|
|
let isLive = player.dataset.live === 'true';
|
|
|
|
const isMobile = /Mobi|Android/i.test(navigator.userAgent);
|
|
playPauseBtn.textContent = isMobile ? '▶' : 'Lecture';
|
|
|
|
/* =========================
|
|
LIVE / ARCHIVE MODE
|
|
========================= */
|
|
|
|
function setLiveMode(live) {
|
|
isLive = live;
|
|
|
|
if (live) {
|
|
seekContainer.style.display = 'none';
|
|
} else {
|
|
seekContainer.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
setLiveMode(isLive);
|
|
|
|
/* =========================
|
|
PROGRESSION
|
|
========================= */
|
|
|
|
function updateProgress() {
|
|
if (
|
|
!isLive &&
|
|
!isDragging &&
|
|
!isNaN(audio.duration) &&
|
|
audio.duration > 0
|
|
) {
|
|
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);
|
|
}
|
|
});
|
|
|
|
/* =========================
|
|
SEEK (ARCHIVES UNIQUEMENT)
|
|
========================= */
|
|
|
|
seekSlider.addEventListener('input', () => {
|
|
if (isLive) return;
|
|
|
|
isDragging = true;
|
|
const percent = (seekSlider.value / audio.duration) * 100;
|
|
progressOverlay.style.width = percent + '%';
|
|
});
|
|
|
|
seekSlider.addEventListener('change', () => {
|
|
if (isLive) return;
|
|
|
|
isDragging = false;
|
|
audio.currentTime = parseFloat(seekSlider.value);
|
|
});
|
|
|
|
audio.addEventListener('loadedmetadata', () => {
|
|
if (!isLive && !isNaN(audio.duration)) {
|
|
seekSlider.max = audio.duration;
|
|
}
|
|
});
|
|
|
|
/* =========================
|
|
CLIC SUR ARCHIVE
|
|
========================= */
|
|
|
|
document.querySelectorAll('.listen-button').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
|
|
const newSrc = button.dataset.src;
|
|
const newTitle = button.dataset.title;
|
|
const newSecondTitle = button.dataset.secondTitle;
|
|
|
|
if (!newSrc) return;
|
|
|
|
audio.src = newSrc;
|
|
audio.load();
|
|
|
|
title.textContent = newTitle || '';
|
|
secondTitle.textContent = newSecondTitle || '';
|
|
|
|
setLiveMode(false);
|
|
|
|
audio.play();
|
|
playPauseBtn.textContent = isMobile ? '⏸' : 'Pause';
|
|
updateProgress();
|
|
});
|
|
});
|
|
|
|
});
|