sensi re

node-server/assets/Roman.html

@@ -43,9 +43,12 @@
       <button id="forward">10s +</button>
     </div>
 
-    <audio id="audio" src="song to song v4.mp3"></audio>
+    <audio id="audio" 
+       src="song_to_song_v4.mp3" 
+       data-reverse-src="song_to_song_v4_reverse.mp3"></audio>
   </main>
 
+  <script src="socket.io.min.js"></script>
   <script src="script.js"></script>
 </body>
 </html>

node-server/assets/hell_even.html

@@ -43,9 +43,12 @@
       <button id="forward">10s +</button>
     </div>
 
-    <audio id="audio" src="paradisev2.mp3"></audio>
+    <audio id="audio" 
+       src="paradisev2.mp3" 
+       data-reverse-src="paradisev2_reverse.mp3"></audio>
   </main>
   
+  <script src="socket.io.min.js"></script>
   <script src="script.js"></script>
 </body>
 </html>

node-server/assets/muddy_files.html

@@ -28,7 +28,7 @@
       </h2>
 
       <div class="progress-container">
-        <input type="range" id="progress" value="0" />
+        <input type="range" id="progress" value="0" max="100" />
 
         <div class="time-wrapper">
           <div id="currentTime" class="time">0:00</div>
@@ -43,9 +43,14 @@
       <button id="forward">10s +</button>
     </div>
 
-    <audio id="audio" src="muddy_files.mp3"></audio>
+    <audio id="audio" 
+       src="muddy_files.mp3" 
+       data-reverse-src="muddy_files_reverse.mp3"></audio>
+
   </main>
 
+      
+  <script src="socket.io.min.js"></script>
   <script src="script.js"></script>
 </body>
 </html>

node-server/assets/script.js

@@ -1,4 +1,4 @@
-// 1. Sélection des éléments du DOM
+// 1. Sélection des éléments DOM
 const vinyl = document.getElementById('vinyl');
 const audio = document.getElementById('audio');
 const progress = document.getElementById('progress');
@@ -11,42 +11,89 @@ const loopBtn = document.getElementById('loop');
 // 2. Variables utiles
 let isPlaying = false;
 let isLooping = false;
+let idleTimeout = null;
+let lastPosition = null;
+let lastTime = null;
 
-// sokcet.io & arduino serial info
+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();
+
 socket.on('position', (position) => {
-  console.log('recieved position', position);
+  const now = Date.now();
+
+  if (lastPosition !== null && lastTime !== null) {
+    const deltaPos = position - lastPosition;
+    const deltaTime = (now - lastTime) / 1000;
+
+    const speed = deltaPos / deltaTime; // vitesse de rotation
+
+    clearTimeout(idleTimeout);
+
+    // Seuil de mouvement pour arrêt
+    if (Math.abs(speed) < 1) {
+      stopPlayback();
+      return;
+    }
+
+    if (speed < 0) {
+      // Rotation inverse : on recule la timeline
+      audio.pause();
+      isPlaying = false;
+      // recule proportionnellement à la vitesse (sensibilité ajustable)
+      audio.currentTime = Math.max(0, audio.currentTime + speed * 0.0025);
+    } else {
+      // Rotation avant : jouer la piste et ajuster vitesse
+      if (!isPlaying) {
+        audio.play();
+        isPlaying = true;
+      }
+      // SENSIBILITÉ : le facteur diviseur est plus grand → plus doux 
+      let playbackSpeed = 0.5 + speed / 600;
+      playbackSpeed = Math.min(Math.max(playbackSpeed, 0.5), 1.1); // plage limitée à x1 max
+      audio.playbackRate = playbackSpeed;
+    }
+  }
+
+  lastPosition = position;
+  lastTime = now;
+
+  // Détection d'inactivité
+  idleTimeout = setTimeout(() => {
+    stopPlayback();
+  }, 300);
 });
 
-// 3. Fonctions
+// 4. Fonctions
 
-// Fonction pour basculer la lecture
 function togglePlay() {
   if (isPlaying) {
     audio.pause();
-    vinyl.style.animationPlayState = 'paused';
   } else {
     audio.play();
-    vinyl.style.animationPlayState = 'running';
   }
   isPlaying = !isPlaying;
 }
 
-// Mise à jour de la barre de progression
 function updateProgress() {
+  if (!isNaN(audio.duration)) {
     const progressPercent = (audio.currentTime / audio.duration) * 100;
     progress.value = progressPercent;
     currentTimeEl.textContent = formatTime(audio.currentTime);
+    durationEl.textContent = formatTime(audio.duration);
+
+    updateVinylRotation();
+  }
 }
 
-// Fonction pour formater le temps (min:sec)
 function formatTime(time) {
   const minutes = Math.floor(time / 60);
   const seconds = Math.floor(time % 60);
   return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
 }
 
-// Fonction pour changer la position de lecture en cliquant sur la barre
 function setProgress(e) {
   const width = progress.clientWidth;
   const clickX = e.offsetX;
@@ -54,85 +101,51 @@ function setProgress(e) {
   audio.currentTime = (clickX / width) * duration;
 }
 
-// Fonction pour regler la vitesse de lecture en fonction de la balle
-function controlPlayback(speed) {
-  if (speed > 0) {
-    if (!isPlaying) {
-      audio.play();
-      vinyl.style.animationPlayState = 'running';
-      isPlaying = true;
-    }
-    // Ajuste la vitesse de lecture audio (entre 0.5 et 2 par exemple)
-    audio.playbackRate = Math.min(2, Math.max(0.5, speed));
-  } else {
-    if (isPlaying) {
+function stopPlayback() {
   audio.pause();
-      vinyl.style.animationPlayState = 'paused';
   isPlaying = false;
+  audio.playbackRate = 1;
 }
+
+// La rotation est synchronisée avec la timeline audio
+function updateVinylRotation() {
+  if (audio.duration && audio.currentTime >= 0) {
+    // Rotation proportionnelle au temps courant
+    currentRotation = (audio.currentTime / audio.duration) * 360 * rotationsPerTrack;
+    vinyl.style.transform = `rotate(${currentRotation}deg)`;
+    console.log('Rotation:', currentRotation); // Debug
   }
 }
 
-// 4. Événements
+// 5. Événements
 
-// Clique sur le vinyle pour basculer lecture
 vinyl.addEventListener('click', togglePlay);
-
-// Mise à jour de la barre de progression à chaque changement de temps
 audio.addEventListener('timeupdate', updateProgress);
-
-// Mise à jour de la durée du titre dès que l'audio est chargé
 audio.addEventListener('loadedmetadata', () => {
   durationEl.textContent = formatTime(audio.duration);
+  console.log('Audio duration:', audio.duration);
 });
-
-// Permet de cliquer sur la barre de progression
 progress.addEventListener('click', setProgress);
 
-// Bouton reculer de 10s
 backwardBtn.addEventListener('click', () => {
   audio.currentTime = Math.max(0, audio.currentTime - 10);
 });
 
-// Bouton avancer de 10s
 forwardBtn.addEventListener('click', () => {
   audio.currentTime = Math.min(audio.duration, audio.currentTime + 10);
 });
 
-// Bouton pour activer/désactiver la boucle (LOOP)
 loopBtn.addEventListener('click', () => {
   isLooping = !isLooping;
   loopBtn.style.backgroundColor = isLooping ? 'white' : 'transparent';
   loopBtn.style.color = isLooping ? '#18344b' : 'white';
 });
 
-// Lorsque l'audio est terminé, on répète si la boucle est activée
 audio.addEventListener('ended', () => {
   if (isLooping) {
     audio.currentTime = 0;
     audio.play();
   } else {
-    vinyl.style.animationPlayState = 'paused';
     isPlaying = false;
   }
 }); 
-
-// server WebSocket
-const WebSocket = require('ws');
-const wss = new WebSocket.Server({ port: 3000 });
-
-wss.on('connection', function connection(ws) {
-  console.log('🟢 Un client WebSocket est connecté');
-
-  ws.on('message', function incoming(message) {
-    console.log('📨 Message reçu:', message);
-  });
-
-  ws.send('🔗 Connexion WebSocket établie avec le Raspberry Pi');
-});
-
-const socket = new WebSocket('ws://[IP_DU_PI]:8080');
-
-socket.onopen = () => console.log("✅ Connecté");
-socket.onmessage = e => console.log("📩 Message :", e.data);
-socket.onerror = e => console.log("❌ Erreur :", e);

node-server/assets/stamina.html

@@ -43,9 +43,12 @@
       <button id="forward">10s +</button>
     </div>
 
-    <audio id="audio" src="stamina-v17.mp3"></audio>
+    <audio id="audio" 
+       src="stamina-v17.mp3" 
+       data-reverse-src="stamina-v17_reverse.mp3"></audio>
   </main>
 
+  <script src="socket.io.min.js"></script>
   <script src="script.js"></script>
 </body>
 </html>

node-server/assets/styleshe.css

@@ -78,7 +78,7 @@ 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 5s linear infinite paused;*/
     display: flex;
     align-items: center;
     justify-content: center;
@@ -87,6 +87,10 @@ body {
     margin: 20px 0;
   }
 
+  .vinyl.reverse {
+    animation: spin-reverse 4s linear infinite; 
+  }
+  
   .vinyl img {
     width: 40%;
     border-radius: 50%;

node-server/assets/stylesmf.css

@@ -78,15 +78,22 @@ 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;
     overflow: hidden;
+    transition: transform 0.3s linear;
     cursor: pointer;
     margin: 20px 0;
   }
 
+
+  .vinyl.reverse {
+  animation: spin-reverse 4s linear infinite; 
+}
+  
   .vinyl img {
     width: 40%;
     border-radius: 50%;
@@ -166,12 +173,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) {

node-server/assets/stylesrom.css

@@ -78,7 +78,7 @@ 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 5s linear infinite paused;*/
     display: flex;
     align-items: center;
     justify-content: center;
@@ -87,6 +87,10 @@ body {
     margin: 20px 0;
   }
   
+  .vinyl.reverse {
+    animation: spin-reverse 4s linear infinite; 
+  }
+
   .vinyl img {
     width: 40%;
     border-radius: 50%;

node-server/assets/stylestam.css

@@ -78,7 +78,7 @@ 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 5s linear infinite paused;*/
     display: flex;
     align-items: center;
     justify-content: center;
@@ -87,6 +87,10 @@ body {
     margin: 20px 0;
   }
 
+  .vinyl.reverse {
+    animation: spin-reverse 4s linear infinite; 
+  }
+  
   .vinyl img {
     width: 40%;
     border-radius: 50%;