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