el-yazide.mohamed/loop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

animation js

Browse Source
This commit is contained in:
El-yazide MOHAMED 2025-06-07 17:18:25 +02:00
parent 1e04b86236
commit 7a7c04dbe4
1 changed files with 11 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
node-server/assets/script.js
View File

@ -15,7 +15,8 @@ let idleTimeout = null;
let lastPosition = null; let lastPosition = null;
let lastTime = null; let lastTime = null;
const rotationsPerTrack = 3; // Nombre de tours complets du vinyle sur toute la durée const rotationsPerTrack = 3; // tours complets du vinyle sur toute la durée
let currentRotation = 0; // rotation en degrés actuelle du vinyle
// 3. Connexion Socket.io // 3. Connexion Socket.io
const socket = io(); const socket = io();
@ -31,7 +32,7 @@ socket.on('position', (position) => {
clearTimeout(idleTimeout); clearTimeout(idleTimeout);
// Si la vitesse est très faible, on considère que l'encodeur est à l'arrêt // Seuil de mouvement pour arrêt
if (Math.abs(speed) < 5) { if (Math.abs(speed) < 5) {
stopPlayback(); stopPlayback();
return; return;
@ -41,26 +42,24 @@ socket.on('position', (position) => {
// Rotation inverse : on recule la timeline // Rotation inverse : on recule la timeline
audio.pause(); audio.pause();
isPlaying = false; isPlaying = false;
// On recule la timeline proportionnellement à la vitesse inversée, avec un facteur de sensibilité // recule proportionnellement à la vitesse (sensibilité ajustable)
audio.currentTime = Math.max(0, audio.currentTime + speed * 0.03); // speed<0 donc avance négative ici audio.currentTime = Math.max(0, audio.currentTime + speed * 0.03);
} else { } else {
// Rotation avant : on joue la piste et ajuste la vitesse // Rotation avant : jouer la piste et ajuster vitesse
if (!isPlaying) { if (!isPlaying) {
audio.play(); audio.play();
isPlaying = true; isPlaying = true;
} }
// Accélération adoucie : vitesse lente plus étendue, max 1.5x
let playbackSpeed = 0.5 + speed / 400; let playbackSpeed = 0.5 + speed / 400;
playbackSpeed = Math.min(Math.max(playbackSpeed, 0.5), 1.5); playbackSpeed = Math.min(Math.max(playbackSpeed, 0.5), 1.5);
audio.playbackRate = playbackSpeed; audio.playbackRate = playbackSpeed;
// On fait avancer le son naturellement
} }
} }
lastPosition = position; lastPosition = position;
lastTime = now; lastTime = now;
// Détecter l'inactivité (pas de mouvement > 300ms) : stoppe la lecture // Détection d'inactivité
idleTimeout = setTimeout(() => { idleTimeout = setTimeout(() => {
stopPlayback(); stopPlayback();
}, 300); }, 300);
@ -84,7 +83,6 @@ function updateProgress() {
currentTimeEl.textContent = formatTime(audio.currentTime); currentTimeEl.textContent = formatTime(audio.currentTime);
durationEl.textContent = formatTime(audio.duration); durationEl.textContent = formatTime(audio.duration);
// Mise à jour rotation vinyle synchronisée au temps courant
updateVinylRotation(); updateVinylRotation();
} }
} }
@ -102,20 +100,18 @@ function setProgress(e) {
audio.currentTime = (clickX / width) * duration; audio.currentTime = (clickX / width) * duration;
} }
// Fonction pour stopper la lecture
function stopPlayback() { function stopPlayback() {
audio.pause(); audio.pause();
isPlaying = false; isPlaying = false;
audio.playbackRate = 1; audio.playbackRate = 1;
} }
// Fonction qui fait tourner le vinyle selon la timeline audio // La rotation est synchronisée avec la timeline audio
function updateVinylRotation() { function updateVinylRotation() {
if (audio.duration && audio.currentTime >= 0) { if (audio.duration && audio.currentTime >= 0) {
// Calcul de l'angle en degrés // Rotation proportionnelle au temps courant
// rotation proportionnelle au temps courant * nombre de rotations sur la piste currentRotation = (audio.currentTime / audio.duration) * 360 * rotationsPerTrack;
const rotationDegrees = (audio.currentTime / audio.duration) * 360 * rotationsPerTrack; vinyl.style.transform = `rotate(${currentRotation}deg)`;
vinyl.style.transform = `rotate(${rotationDegrees}deg)`;
} }
} }
@ -147,7 +143,6 @@ audio.addEventListener('ended', () => {
audio.currentTime = 0; audio.currentTime = 0;
audio.play(); audio.play();
} else { } else {
vinyl.style.animationPlayState = 'paused';
isPlaying = false; isPlaying = false;
} }
}); });