diff --git a/node-server/assets/script.js b/node-server/assets/script.js index f9b0530..d33289d 100644 --- a/node-server/assets/script.js +++ b/node-server/assets/script.js @@ -12,21 +12,12 @@ const loopBtn = document.getElementById('loop'); let isPlaying = false; let isLooping = false; let idleTimeout = null; -let reverseInterval = null; -let reverseAudioLoaded = false; - -// 3. Variables pour vitesse let lastPosition = null; let lastTime = null; -// 4. Connexion socket +// 3. Connexion Socket.io 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(); @@ -37,20 +28,15 @@ socket.on('position', (position) => { clearTimeout(idleTimeout); - if (Math.abs(speed) < 15) { + if (Math.abs(speed) < 10) { stopPlayback(); return; } - const isReverse = speed < 0; - - if (isReverse) { - simulateReverse(Math.abs(speed)); + if (speed > 0) { + controlForwardPlayback(speed); } else { - stopReverse(); - let playbackSpeed = 1 + speed * 0.0003; - playbackSpeed = Math.max(0.5, Math.min(1.5, playbackSpeed)); - controlPlayback(playbackSpeed); + controlRewind(Math.abs(speed)); } } @@ -62,7 +48,47 @@ socket.on('position', (position) => { }, 300); }); -// 7. Fonctions +// 4. Fonctions principales + +function controlForwardPlayback(speed) { + const rate = 1 + speed * 0.0003; + const playbackSpeed = Math.min(2, Math.max(0.5, rate)); + + vinyl.classList.remove('reverse'); + vinyl.style.animationPlayState = 'running'; + + if (!isPlaying) { + audio.play(); + isPlaying = true; + } + + audio.playbackRate = playbackSpeed; +} + +function controlRewind(speed) { + if (isPlaying) { + audio.pause(); + isPlaying = false; + } + + const rewindAmount = speed * 0.01; + audio.currentTime = Math.max(0, audio.currentTime - rewindAmount); + + vinyl.classList.add('reverse'); + vinyl.style.animationPlayState = 'running'; +} + +function stopPlayback() { + if (isPlaying) { + audio.pause(); + isPlaying = false; + } + + vinyl.classList.remove('reverse'); + vinyl.style.animationPlayState = 'paused'; +} + +// 5. Fonctions interface function togglePlay() { if (isPlaying) { @@ -94,74 +120,7 @@ function setProgress(e) { audio.currentTime = (clickX / width) * duration; } -function controlPlayback(speed) { - stopReverse(); - if (speed > 0) { - if (!isPlaying) { - audio.play(); - vinyl.style.animationPlayState = 'running'; - isPlaying = true; - } - audio.playbackRate = speed; - } -} - -function stopPlayback() { - audio.pause(); - vinyl.style.animationPlayState = 'paused'; - isPlaying = false; -} - -// Simule la lecture en reverse via décrémentation du currentTime -function simulateReverse(speed) { - const reverseSpeed = Math.min(speed * 0.01, 2); - - if (!reverseSrc) return; - - if (!reverseInterval) { - reverseInterval = setInterval(() => { - if (audio.currentTime > 0.05) { - audio.currentTime -= reverseSpeed * 0.1; - vinyl.style.animationPlayState = 'running'; - } else { - stopPlayback(); - } - }, 100); - - 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; - } - - isPlaying = true; - audio.pause(); - } -} - -function stopReverse() { - if (reverseInterval) { - clearInterval(reverseInterval); - reverseInterval = null; - } - - if (reverseAudioLoaded) { - const currentTime = audio.currentTime; - audio.src = originalSrc; - audio.load(); - audio.addEventListener('loadedmetadata', () => { - audio.currentTime = Math.min(currentTime, audio.duration - 0.1); - }, { once: true }); - reverseAudioLoaded = false; - } -} - -// 8. Événements utilisateur +// 6. Événements manuels vinyl.addEventListener('click', togglePlay); audio.addEventListener('timeupdate', updateProgress); diff --git a/node-server/assets/stylesmf.css b/node-server/assets/stylesmf.css index 805d9c7..f9c85be 100644 --- a/node-server/assets/stylesmf.css +++ b/node-server/assets/stylesmf.css @@ -78,7 +78,8 @@ body { height: 600px; border-radius: 50%; background: radial-gradient(circle at center, #444 0%, #111 60%, #000 100%); - animation: spin 5s linear infinite paused; + animation: spin 4s linear infinite; + animation-play-state: paused; display: flex; align-items: center; justify-content: center; @@ -86,6 +87,11 @@ body { cursor: pointer; margin: 20px 0; } + + + .vinyl.reverse { + animation: spin-reverse 4s linear infinite; +} .vinyl img { width: 40%; @@ -166,12 +172,13 @@ body { @keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } + } + + @keyframes spin-reverse { + from { transform: rotate(0deg); } + to { transform: rotate(-360deg); } } @media (max-width: 768px) {