This commit is contained in:
El-yazide MOHAMED 2025-06-07 13:20:10 +02:00
parent 9033c8ad20
commit 4eadf7dc7e

View File

@ -1,6 +1,5 @@
// 1. Sélection des éléments du DOM
const vinyl = document.getElementById('vinyl');
const originalSrc = audio.getAttribute('src');
const audio = document.getElementById('audio');
const progress = document.getElementById('progress');
const currentTimeEl = document.getElementById('currentTime');
@ -15,25 +14,26 @@ let isLooping = false;
let idleTimeout = null;
let reverseInterval = null;
let reverseAudioLoaded = false;
const reverseSrc = audio.dataset.reverseSrc;
// 3. Variables pour calculer la vitesse de rotation
// 3. Variables pour vitesse
let lastPosition = null;
let lastTime = null;
// 4. Connexion Socket.io
// 4. Connexion socket
const socket = io();
// 5. Sauvegarder les sources
const originalSrc = audio.getAttribute('src');
const reverseSrc = audio.dataset.reverseSrc || null;
// 6. SOCKET gestion de la position envoyée
socket.on('position', (position) => {
const now = Date.now();
if (lastPosition !== null && lastTime !== null) {
const deltaPos = position - lastPosition;
const deltaTime = (now - lastTime) / 1000;
const speed = deltaPos / deltaTime;
console.log('instant speed:', speed);
clearTimeout(idleTimeout);
@ -44,7 +44,6 @@ socket.on('position', (position) => {
const isReverse = speed < 0;
// Simuler reverse
if (isReverse) {
simulateReverse(Math.abs(speed));
} else {
@ -53,19 +52,17 @@ socket.on('position', (position) => {
playbackSpeed = Math.max(0.5, Math.min(1.5, playbackSpeed));
controlPlayback(playbackSpeed);
}
}
lastPosition = position;
lastTime = now;
// Détecter l'inactivité : si pas de mise à jour pendant 300ms → stop
idleTimeout = setTimeout(() => {
stopPlayback();
}, 300);
});
// 5. Fonctions
// 7. Fonctions
function togglePlay() {
if (isPlaying) {
@ -97,10 +94,8 @@ function setProgress(e) {
audio.currentTime = (clickX / width) * duration;
}
// Fonction pour régler la lecture selon la vitesse
function controlPlayback(speed) {
stopReverse(); // On stoppe le reverse si actif
stopReverse();
if (speed > 0) {
if (!isPlaying) {
audio.play();
@ -117,18 +112,11 @@ function stopPlayback() {
isPlaying = false;
}
// Simule la lecture en reverse via décrémentation du currentTime
function simulateReverse(speed) {
const reverseSpeed = Math.min(speed * 0.01, 2); // seconds per step
const reverseSpeed = Math.min(speed * 0.01, 2);
if (!reverseAudioLoaded && reverseSrc) {
audio.src = reverseSrc;
audio.load();
reverseAudioLoaded = true;
audio.addEventListener('loadedmetadata', () => {
audio.currentTime = audio.duration - 0.1; // start from the end
}, { once: true });
return; // attend que le fichier soit chargé
}
if (!reverseSrc) return;
if (!reverseInterval) {
reverseInterval = setInterval(() => {
@ -140,12 +128,20 @@ function simulateReverse(speed) {
}
}, 100);
if (!isPlaying) {
isPlaying = true;
}
if (!reverseAudioLoaded) {
const currentTime = audio.currentTime;
audio.src = reverseSrc;
audio.load();
audio.addEventListener('loadedmetadata', () => {
const newTime = Math.min(currentTime, audio.duration - 0.1);
audio.currentTime = newTime;
}, { once: true });
reverseAudioLoaded = true;
}
audio.pause(); // on met en pause le vrai son pour éviter conflit
isPlaying = true;
audio.pause();
}
}
function stopReverse() {
@ -165,9 +161,7 @@ function stopReverse() {
}
}
// 6. Événements
// 8. Événements utilisateur
vinyl.addEventListener('click', togglePlay);
audio.addEventListener('timeupdate', updateProgress);