80 lines
2.6 KiB
JavaScript
80 lines
2.6 KiB
JavaScript
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';
|
|
}
|
|
});
|
|
});
|
|
});
|