sensi re

rewind
d
2025-06-08 10:55:22 +02:00 · 2025-06-08 10:53:07 +02:00 · 2025-06-08 10:50:50 +02:00 · 2025-06-08 10:32:20 +02:00 · 2025-06-08 10:29:30 +02:00 · 2025-06-08 10:25:31 +02:00
48 changed files with 1998 additions and 115 deletions
@@ -1,14 +0,0 @@
-const socket = io();
-
-var myAudio = document.createElement('audio');
-myAudio.setAttribute('src','muddy_files.mp3');
-
-socket.on('speed', (speed) => {
-  console.log('recieved speed', speed);
-  
-  myAudio.playbackRate = speed;    
-});
-
-myAudio.playbackRate = 0.1;
-
-myAudio.play();
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-    <head>
-        <meta charset="UTF-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>LOOP</title>
-        <base href="./">
-        <script src="https://kit.fontawesome.com/96dcb489df.js" crossorigin="anonymous"></script>
-        <link rel="stylesheet" href="styles.css">
-    </head>
-    <body>
-
-      <header>
-        <a href="file:///C:/Users/elyko/Desktop/loop/index.html"><img src="images/logo.png" class="logo"></a>
-      </header>
-
-      <h1>Let your favorite songs play on LOOP.</h1>
-      
-
-      <div class="login-container">
-        <input type="text" placeholder="Username" required>
-        <input type="password" placeholder="Password" required>
-        <button>Log In</button>
-    </div>
-    
-      <h2>Don't have an account ?<a href="" class="orange"> Sign up now.</a> </span></h2>
-
-        <script src="script.js"></script>
-
-    </body>
-</html>
-
@@ -1 +0,0 @@
-console.log( 'hello')
@@ -1,3 +0,0 @@
-body{
-  background-color: red;
-}
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <title>To Hide Is To Be Seen</title>
+  <link rel="stylesheet" href="stylesrom.css" />
+</head>
+<body>
+
+  <header class="page-header">
+  <a href="front.html" class="logo-container">
+    <img src="logo.png" alt="Logo" class="logo" />
+  </a>
+  <h1 class="title">To Hide Is To Be Seen</h1>
+</header>
+
+
+<main class="vinyl-container">
+    
+    <div class="vinyl" id="vinyl">
+      <img src="C9EED782-8F3C-40E5-87C0-5E2032ADAB72.jpeg" alt="Pochette" />
+    </div>
+
+    <h2 class="title-under">
+        <span class="song-title">To Hide Is To Be Seen</span><br>
+        <span class="artist-name">Roman</span>
+      </h2>
+
+      <div class="progress-container">
+        <input type="range" id="progress" value="0" />
+
+        <div class="time-wrapper">
+          <div id="currentTime" class="time">0:00</div>
+          <div id="duration" class="time">1:36</div>
+        </div>
+      </div>
+      
+
+    <div class="buttons-container">
+      <button id="backward">- 10s</button>
+      <button id="loop">LOOP</button>
+      <button id="forward">10s +</button>
+    </div>
+
+    <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>
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+        <title>LOOP</title>
+        <base href="./">
+        <script src="https://kit.fontawesome.com/96dcb489df.js" crossorigin="anonymous"></script>
+        <link rel="stylesheet" href="stylesfront.css">
+    </head>
+    <body>
+
+      <header>
+        <a href="main.html"><img src="logo.png" class="logo"></a>
+      </header>
+      
+      <div class="music-list">
+
+        <a href="muddy_files.html" class="music-card">
+          <img src="Cover.png" alt="muddyfiles">
+          <div class="music-info">
+            <h3>Muddy Files</h3>
+            <p>Ely</p>
+          </div>
+        </a>
+      
+        <a href="hell_even.html" class="music-card">
+          <img src="hell even 5.png" alt="helleven">
+          <div class="music-info">
+            <h3>Hell Even</h3>
+            <p>Ely feat. JENNY</p>
+          </div>
+        </a>
+
+        <a href="stamina.html" class="music-card">
+          <img src="WhatsApp Image 2025-04-21 at 15.01.32.jpeg" alt="stamina">
+          <div class="music-info">
+            <h3>Stamina</h3>
+            <p>Corb Nurk</p>
+          </div>
+        </a>
+
+        <a href="Roman.html" class="music-card">
+          <img src="C9EED782-8F3C-40E5-87C0-5E2032ADAB72.jpeg" alt="ToHideIsToBeSeen">
+          <div class="music-info">
+            <h3>To Hide Is To Be Seen</h3>
+            <p>Roman</p>
+          </div>
+        </a>
+      
+        <!-- Ajoute autant de titres que nécessaire -->
+      </div>
+      
+      <script src="socket.io.min.js"></script>
+      <script src="script.js"></script>
+
+    </body>
+</html>
@@ -0,0 +1,28 @@
+const socket = io();
+
+let last_position = null;
+let speed = 1;
+
+var myAudio = document.createElement('audio');
+myAudio.setAttribute('src','muddy_files.mp3');
+
+// socket.on('speed', (speed) => {
+//   console.log('recieved speed', speed);
+  
+//   myAudio.playbackRate = speed;    
+// });
+
+socket.on('position', (position) => {
+  console.log('recieved position', position);
+  // if(!last_position){
+  //   last_position = position;
+  // }else{
+  //   speed += position > last_position ? 0.1 : -0.1;
+  // }
+  // myAudio.playbackRate = speed;    
+});
+
+
+myAudio.playbackRate = speed;
+
+myAudio.play();
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <title>Hell Even</title>
+  <link rel="stylesheet" href="styleshe.css" />
+</head>
+<body>
+
+  <header class="page-header">
+  <a href="front.html" class="logo-container">
+    <img src="logo.png" alt="Logo" class="logo" />
+  </a>
+  <h1 class="title">Hell Even</h1>
+</header>
+
+
+<main class="vinyl-container">
+    
+    <div class="vinyl" id="vinyl">
+      <img src="hell even 5.png" alt="Pochette" />
+    </div>
+
+    <h2 class="title-under">
+        <span class="song-title">Hell Even</span><br>
+        <span class="artist-name">Ely feat. JENNY</span>
+      </h2>
+
+      <div class="progress-container">
+        <input type="range" id="progress" value="0" />
+
+        <div class="time-wrapper">
+          <div id="currentTime" class="time">0:00</div>
+          <div id="duration" class="time">3:28</div>
+        </div>
+      </div>
+      
+
+    <div class="buttons-container">
+      <button id="backward">- 10s</button>
+      <button id="loop">LOOP</button>
+      <button id="forward">10s +</button>
+    </div>
+
+    <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>
@@ -0,0 +1,47 @@
+const audio = document.getElementById('audio');
+const playPauseBtn = document.getElementById('play-pause');
+const progress = document.getElementById('progress');
+const time = document.getElementById('time');
+const vinyl = document.querySelector('.vinyl');
+
+let isPlaying = false;
+
+// Play / Pause button
+playPauseBtn.addEventListener('click', () => {
+  if (isPlaying) {
+    audio.pause();
+    vinyl.style.animationPlayState = 'paused';
+    playPauseBtn.textContent = '▶️';
+  } else {
+    audio.play();
+    vinyl.style.animationPlayState = 'running';
+    playPauseBtn.textContent = '⏸️';
+  }
+  isPlaying = !isPlaying;
+});
+
+// Update progress and time
+audio.addEventListener('timeupdate', () => {
+  progress.value = audio.currentTime;
+  updateTimeDisplay();
+});
+
+// Set duration when audio loads
+audio.addEventListener('loadedmetadata', () => {
+  progress.max = audio.duration;
+  updateTimeDisplay();
+});
+
+// Seek audio
+progress.addEventListener('input', () => {
+  audio.currentTime = progress.value;
+});
+
+function updateTimeDisplay() {
+  const format = (s) => {
+    const m = Math.floor(s / 60);
+    const ss = Math.floor(s % 60);
+    return `${m}:${ss < 10 ? '0' + ss : ss}`;
+  };
+  time.textContent = `${format(audio.currentTime)} / ${format(audio.duration)}`;
+}
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+        <title>LOOP</title>
+        <base href="./">
+        <script src="https://kit.fontawesome.com/96dcb489df.js" crossorigin="anonymous"></script>
+        <link rel="stylesheet" href="styles.css">
+    </head>
+    <body>
+
+      <div class="header-container">
+        <a href="main.html"><img src="logo.png" class="logo"></a>
+        <h1>Let your favorite songs play on LOOP.</h1>
+      </div>
+      
+
+      <div class="login-container">
+        <h3 class="login-title">Login Account</h3>
+        <input type="text" id="username" placeholder="Username" required>
+        <input type="password" id="password" placeholder="Password" required>
+        <button id="loginBtn" class="button">Log In</button>
+        <p id="error-message" class="error-message"></p>
+      </div>
+      
+    
+      <h2>Don't have an account ?<a href="" class="orange"> Sign up now.</a> </span></h2>
+
+        <script src="main.js"></script>
+
+    </body>
+</html>
+
@@ -0,0 +1,18 @@
+document.getElementById('loginBtn').addEventListener('click', function(event) {
+    event.preventDefault(); // Empêche le bouton de recharger ou changer de page
+  
+    const username = document.getElementById('username').value.trim();
+    const password = document.getElementById('password').value.trim();
+    const errorMessage = document.getElementById('error-message');
+  
+    // Identifiants valides en dur (à modifier selon ton besoin)
+    const validUsername = "ELY";
+    const validPassword = "Bilan6";
+  
+    if (username === validUsername && password === validPassword) {
+      window.location.href = "front.html"; // Redirige vers la page suivante
+    } else {
+      errorMessage.textContent = "Incorrect username or password.";
+    }
+  });
+  
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <title>Muddy Files</title>
+  <link rel="stylesheet" href="stylesmf.css" />
+</head>
+<body>
+
+  <header class="page-header">
+  <a href="front.html" class="logo-container">
+    <img src="logo.png" alt="Logo" class="logo" />
+  </a>
+  <h1 class="title">Muddy Files</h1>
+</header>
+
+
+<main class="vinyl-container">
+    
+    <div class="vinyl" id="vinyl">
+      <img src="Cover.png" alt="Pochette" />
+    </div>
+
+    <h2 class="title-under">
+        <span class="song-title">Muddy Files</span><br>
+        <span class="artist-name">Ely</span>
+      </h2>
+
+      <div class="progress-container">
+        <input type="range" id="progress" value="0" max="100" />
+
+        <div class="time-wrapper">
+          <div id="currentTime" class="time">0:00</div>
+          <div id="duration" class="time">1:36</div>
+        </div>
+      </div>
+      
+
+    <div class="buttons-container">
+      <button id="backward">- 10s</button>
+      <button id="loop">LOOP</button>
+      <button id="forward">10s +</button>
+    </div>
+
+    <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>
@@ -0,0 +1,47 @@
+const audio = document.getElementById('audio');
+const playPauseBtn = document.getElementById('play-pause');
+const progress = document.getElementById('progress');
+const time = document.getElementById('time');
+const vinyl = document.querySelector('.vinyl');
+
+let isPlaying = false;
+
+// Play / Pause button
+playPauseBtn.addEventListener('click', () => {
+  if (isPlaying) {
+    audio.pause();
+    vinyl.style.animationPlayState = 'paused';
+    playPauseBtn.textContent = '▶️';
+  } else {
+    audio.play();
+    vinyl.style.animationPlayState = 'running';
+    playPauseBtn.textContent = '⏸️';
+  }
+  isPlaying = !isPlaying;
+});
+
+// Update progress and time
+audio.addEventListener('timeupdate', () => {
+  progress.value = audio.currentTime;
+  updateTimeDisplay();
+});
+
+// Set duration when audio loads
+audio.addEventListener('loadedmetadata', () => {
+  progress.max = audio.duration;
+  updateTimeDisplay();
+});
+
+// Seek audio
+progress.addEventListener('input', () => {
+  audio.currentTime = progress.value;
+});
+
+function updateTimeDisplay() {
+  const format = (s) => {
+    const m = Math.floor(s / 60);
+    const ss = Math.floor(s % 60);
+    return `${m}:${ss < 10 ? '0' + ss : ss}`;
+  };
+  time.textContent = `${format(audio.currentTime)} / ${format(audio.duration)}`;
+}
@@ -0,0 +1,151 @@
+// 1. Sélection des éléments DOM
+const vinyl = document.getElementById('vinyl');
+const audio = document.getElementById('audio');
+const progress = document.getElementById('progress');
+const currentTimeEl = document.getElementById('currentTime');
+const durationEl = document.getElementById('duration');
+const backwardBtn = document.getElementById('backward');
+const forwardBtn = document.getElementById('forward');
+const loopBtn = document.getElementById('loop');
+
+// 2. Variables utiles
+let isPlaying = false;
+let isLooping = false;
+let idleTimeout = null;
+let lastPosition = null;
+let lastTime = null;
+
+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) => {
+  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);
+});
+
+// 4. Fonctions
+
+function togglePlay() {
+  if (isPlaying) {
+    audio.pause();
+  } else {
+    audio.play();
+  }
+  isPlaying = !isPlaying;
+}
+
+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();
+  }
+}
+
+function formatTime(time) {
+  const minutes = Math.floor(time / 60);
+  const seconds = Math.floor(time % 60);
+  return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+}
+
+function setProgress(e) {
+  const width = progress.clientWidth;
+  const clickX = e.offsetX;
+  const duration = audio.duration;
+  audio.currentTime = (clickX / width) * duration;
+}
+
+function stopPlayback() {
+  audio.pause();
+  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
+  }
+}
+
+// 5. Événements
+
+vinyl.addEventListener('click', togglePlay);
+audio.addEventListener('timeupdate', updateProgress);
+audio.addEventListener('loadedmetadata', () => {
+  durationEl.textContent = formatTime(audio.duration);
+  console.log('Audio duration:', audio.duration);
+});
+progress.addEventListener('click', setProgress);
+
+backwardBtn.addEventListener('click', () => {
+  audio.currentTime = Math.max(0, audio.currentTime - 10);
+});
+
+forwardBtn.addEventListener('click', () => {
+  audio.currentTime = Math.min(audio.duration, audio.currentTime + 10);
+});
+
+loopBtn.addEventListener('click', () => {
+  isLooping = !isLooping;
+  loopBtn.style.backgroundColor = isLooping ? 'white' : 'transparent';
+  loopBtn.style.color = isLooping ? '#18344b' : 'white';
+});
+
+audio.addEventListener('ended', () => {
+  if (isLooping) {
+    audio.currentTime = 0;
+    audio.play();
+  } else {
+    isPlaying = false;
+  }
+}); 
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <title>Stamina</title>
+  <link rel="stylesheet" href="stylestam.css" />
+</head>
+<body>
+
+  <header class="page-header">
+  <a href="front.html" class="logo-container">
+    <img src="logo.png" alt="Logo" class="logo" />
+  </a>
+  <h1 class="title">Stamina</h1>
+</header>
+
+
+<main class="vinyl-container">
+    
+    <div class="vinyl" id="vinyl">
+      <img src="WhatsApp Image 2025-04-21 at 15.01.32.jpeg" alt="Pochette" />
+    </div>
+
+    <h2 class="title-under">
+        <span class="song-title">Stamina</span><br>
+        <span class="artist-name">Corb Nurk</span>
+      </h2>
+
+      <div class="progress-container">
+        <input type="range" id="progress" value="0" />
+
+        <div class="time-wrapper">
+          <div id="currentTime" class="time">0:00</div>
+          <div id="duration" class="time">4:43</div>
+        </div>
+      </div>
+      
+
+    <div class="buttons-container">
+      <button id="backward">- 10s</button>
+      <button id="loop">LOOP</button>
+      <button id="forward">10s +</button>
+    </div>
+
+    <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>
@@ -31,27 +31,36 @@
    }
  }

-
-
-.logo{
-    margin-top: 40px;
-    max-width: 180px;
-}
-
-.container {
+  .header-container {
    display: flex;
    flex-direction: column;
    align-items: center;
+    margin-bottom: 30px; /* pour séparer du reste */
  }
  
-h1 {
+  .logo {
+    display: block;
+    margin-top: 40px;
+    margin-right: auto;
+    max-width: 200px;
+  }
+  
+  h1 {
    color: #ffffff;
    font-size: 70%;
-}
+    margin-top: 10px; /* espace entre logo et h1 */
+  }
+  

 h2 {
    color: #ffffff;
-    font-size: 40%;
+    font-size: 60%;
+}
+
+.login-title {
+  color: black;
+  font-size: 24px;
+  margin-bottom: 20px;
 }

 .orange {
@@ -73,7 +82,6 @@ h2 {
    text-align: center
 }

-/* Champs de texte */
 .login-container input {
    width: 100%;
    padding: 10px;
@@ -83,22 +91,34 @@ h2 {
    font-size: 16px;
 }

-/* Bouton */
-.login-container button {
-    width: 100%;
-    padding: 10px;
-    background-color:#ffa600;
-    color: white;
-    border: none;
-    border-radius: 50px;
-    font-size: 18px;
-    cursor: pointer;
-    transition: background 0.3s ease;
+.login-container input:focus {
+  border: 2px solid #ffa600; /* ou la couleur que tu veux */
+  outline: none; /* enlève le contour bleu par défaut */
 }

-.login-container button:hover {
+.button {
+  display: inline-block;
+  width: 100%; /* pareil que les input */
+  padding: 12px;
+  margin-top: 40px; /* plus de marge */
+  background-color:#ffa600;
+  color: white;
+  border: none;
+  border-radius: 50px;
+  font-size: 18px;
+  cursor: pointer;
+  transition: background 0.3s ease;
+  text-decoration: none;
+}
+
+
+.button:hover {
    background-color: #dd3000;
 }

-
+.error-message {
+  color: red;
+  margin-top: 15px;
+  font-size: 14px;
+}
  
@@ -0,0 +1,90 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
+*{
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins', sans-serif;
+    box-sizing: border-box;
+
+}
+
+html, body {
+    height: 100%;
+  }
+
+body {
+    background: linear-gradient(to bottom, #ffa600, #dd3000);
+  }
+
+/* Structure de base */
+header {
+    display: flex;
+    justify-content: flex-start; /* Aligne à gauche */
+    align-items: center;         /* Centré verticalement si tu ajoutes du texte à côté */
+    padding: 10px 20px;
+    position: relative;
+  }
+  
+  /* Style du logo */
+  .logo {
+    width: 120px;      /* Ajuste la taille selon ton design */
+    height: auto;
+  }
+  
+  /* Responsive pour smartphone */
+  @media (max-width: 768px) {
+    .logo {
+      width: 100px; /* Un peu plus petit sur mobile si nécessaire */
+    }
+  
+    header {
+      padding: 10px;
+    }
+  }
+  
+  .music-list {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 20px;
+    max-width: 600px;
+    margin: auto;
+  }
+  
+  .music-card {
+    display: flex;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+    overflow: hidden;
+    text-decoration: none;
+    color: white;
+    transition: background-color 0.3s, transform 0.2s;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+  }
+  
+  .music-card:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+    transform: translateY(-2px);
+  }
+  
+  .music-card img {
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+  }
+  
+  .music-info {
+    padding: 10px 20px;
+  }
+  
+  .music-info h3 {
+    margin: 0;
+    font-size: 18px;
+  }
+  
+  .music-info p {
+    margin: 5px 0 0;
+    font-size: 14px;
+    opacity: 0.8;
+  }
+      
@@ -0,0 +1,200 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
+
+body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(to bottom, #500000, #000000);
+    font-family: sans-serif;
+  }
+  
+  header.page-header {
+    position: absolute;
+    top: 20px;
+    left: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none; /* pour que seul le logo reste cliquable */
+  }
+  
+  .logo-container {
+    position: absolute;
+    left: 20px;
+    pointer-events: auto; /* permet au logo d'être cliquable malgré pointer-events: none plus haut */
+  }
+  
+  .logo {
+    width: 120px;
+    height: auto;
+    cursor: pointer;
+  }
+  
+  .title {
+    color: white;
+    font-size: 20px;
+    font-weight: 600;
+    margin: 0;
+    pointer-events: none;
+  }
+  
+
+  .vinyl-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  
+
+
+/* Titre du bas avec un <br> stylé */
+
+.title-under {
+    text-align: center;
+    color: white;
+    margin-top: 20px;
+  }
+  
+  .song-title {
+    font-size: 30px;
+    font-weight: 600;
+  }
+  
+  .artist-name {
+    margin: none;
+    font-size: 22px;
+    font-weight: 400;
+    opacity: 0.8;
+  }
+  
+  .vinyl {
+    width: 600px;
+    height: 600px;
+    border-radius: 50%;
+    background: radial-gradient(circle at center, #444 0%, #111 60%, #000 100%);
+    /*animation: spin 5s linear infinite paused;*/
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    cursor: pointer;
+    margin: 20px 0;
+  }
+
+  .vinyl.reverse {
+    animation: spin-reverse 4s linear infinite; 
+  }
+  
+  .vinyl img {
+    width: 40%;
+    border-radius: 50%;
+    pointer-events: none;
+  }
+  
+  /* Style pour la barre de progression */
+.progress-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 20px;
+    width: 80%;
+    max-width: 500px;
+    margin-inline: auto;
+  }
+  
+  #progress {
+    width: 100%;
+    height: 6px;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 5px;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+  
+  #progress::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background: white;
+    cursor: pointer;
+  }
+  
+  #progress::-moz-range-thumb {
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background: white;
+    cursor: pointer;
+  }
+  
+  /* Position des timestamps */
+  
+  .time-wrapper {
+      color: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 0 20px;
+    margin-top: 10px;
+    margin-bottom: 10px; /* <-- ajoute ceci pour écarter duration du bouton */
+  }
+  
+  
+  .buttons-container {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    width: 80%;
+    max-width: 500px;
+    margin-top: 10px;
+  }
+  
+  button {
+    flex: 1;
+    font-size: 16px;
+    background: none;
+    border: 1px solid white;
+    color: white;
+    padding: 6px 14px;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+  
+  
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  
+  @media (max-width: 768px) {
+    .vinyl {
+      width: 70vw;
+      height: 70vw;
+    }
+  
+    .vinyl img {
+      width: 45%;
+    }
+  
+    #progress {
+      width: 85vw;
+    }
+  
+    .buttons-container {
+      width: 85vw;
+    }
+  }
+  
+  
@@ -0,0 +1,204 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
+
+body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(to bottom, #3d78a8, #00182e);
+    font-family: sans-serif;
+  }
+  
+  header.page-header {
+    position: absolute;
+    top: 20px;
+    left: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none; /* pour que seul le logo reste cliquable */
+  }
+  
+  .logo-container {
+    position: absolute;
+    left: 20px;
+    pointer-events: auto; /* permet au logo d'être cliquable malgré pointer-events: none plus haut */
+  }
+  
+  .logo {
+    width: 120px;
+    height: auto;
+    cursor: pointer;
+  }
+  
+  .title {
+    color: white;
+    font-size: 20px;
+    font-weight: 600;
+    margin: 0;
+    pointer-events: none;
+  }
+  
+
+  .vinyl-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  
+
+
+/* Titre du bas avec un <br> stylé */
+
+.title-under {
+    text-align: center;
+    color: white;
+    margin-top: 20px;
+  }
+  
+  .song-title {
+    font-size: 30px;
+    font-weight: 600;
+  }
+  
+  .artist-name {
+    margin: none;
+    font-size: 22px;
+    font-weight: 400;
+    opacity: 0.8;
+  }
+  
+  .vinyl {
+    width: 600px;
+    height: 600px;
+    border-radius: 50%;
+    background: radial-gradient(circle at center, #444 0%, #111 60%, #000 100%);
+    /*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%;
+    pointer-events: none;
+  }
+  
+  /* Style pour la barre de progression */
+.progress-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 20px;
+    width: 80%;
+    max-width: 500px;
+    margin-inline: auto;
+  }
+  
+  #progress {
+    width: 100%;
+    height: 6px;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 5px;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+  
+  #progress::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background: white;
+    cursor: pointer;
+  }
+  
+  #progress::-moz-range-thumb {
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background: white;
+    cursor: pointer;
+  }
+  
+  /* Position des timestamps */
+  
+  .time-wrapper {
+      color: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 0 20px;
+    margin-top: 10px;
+    margin-bottom: 10px; /* <-- ajoute ceci pour écarter duration du bouton */
+  }
+  
+  
+  .buttons-container {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    width: 80%;
+    max-width: 500px;
+    margin-top: 10px;
+  }
+  
+  button {
+    flex: 1;
+    font-size: 16px;
+    background: none;
+    border: 1px solid white;
+    color: white;
+    padding: 6px 14px;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+  
+  
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+  }
+
+  @keyframes spin-reverse {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(-360deg); }
+  }
+  
+  @media (max-width: 768px) {
+    .vinyl {
+      width: 70vw;
+      height: 70vw;
+    }
+  
+    .vinyl img {
+      width: 45%;
+    }
+  
+    #progress {
+      width: 85vw;
+    }
+  
+    .buttons-container {
+      width: 85vw;
+    }
+  }
+  
+  
@@ -0,0 +1,200 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
+
+body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(to bottom, #000e33, #002f96);
+    font-family: sans-serif;
+  }
+  
+  header.page-header {
+    position: absolute;
+    top: 20px;
+    left: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none; /* pour que seul le logo reste cliquable */
+  }
+  
+  .logo-container {
+    position: absolute;
+    left: 20px;
+    pointer-events: auto; /* permet au logo d'être cliquable malgré pointer-events: none plus haut */
+  }
+  
+  .logo {
+    width: 120px;
+    height: auto;
+    cursor: pointer;
+  }
+  
+  .title {
+    color: white;
+    font-size: 20px;
+    font-weight: 600;
+    margin: 0;
+    pointer-events: none;
+  }
+  
+
+  .vinyl-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  
+
+
+/* Titre du bas avec un <br> stylé */
+
+.title-under {
+    text-align: center;
+    color: white;
+    margin-top: 20px;
+  }
+  
+  .song-title {
+    font-size: 30px;
+    font-weight: 600;
+  }
+  
+  .artist-name {
+    margin: none;
+    font-size: 22px;
+    font-weight: 400;
+    opacity: 0.8;
+  }
+  
+  .vinyl {
+    width: 600px;
+    height: 600px;
+    border-radius: 50%;
+    background: radial-gradient(circle at center, #444 0%, #111 60%, #000 100%);
+    /*animation: spin 5s linear infinite paused;*/
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    cursor: pointer;
+    margin: 20px 0;
+  }
+  
+  .vinyl.reverse {
+    animation: spin-reverse 4s linear infinite; 
+  }
+
+  .vinyl img {
+    width: 40%;
+    border-radius: 50%;
+    pointer-events: none;
+  }
+  
+  /* Style pour la barre de progression */
+.progress-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 20px;
+    width: 80%;
+    max-width: 500px;
+    margin-inline: auto;
+  }
+  
+  #progress {
+    width: 100%;
+    height: 6px;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 5px;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+  
+  #progress::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background: white;
+    cursor: pointer;
+  }
+  
+  #progress::-moz-range-thumb {
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background: white;
+    cursor: pointer;
+  }
+  
+  /* Position des timestamps */
+  
+  .time-wrapper {
+      color: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 0 20px;
+    margin-top: 10px;
+    margin-bottom: 10px; /* <-- ajoute ceci pour écarter duration du bouton */
+  }
+  
+  
+  .buttons-container {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    width: 80%;
+    max-width: 500px;
+    margin-top: 10px;
+  }
+  
+  button {
+    flex: 1;
+    font-size: 16px;
+    background: none;
+    border: 1px solid white;
+    color: white;
+    padding: 6px 14px;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+  
+  
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  
+  @media (max-width: 768px) {
+    .vinyl {
+      width: 70vw;
+      height: 70vw;
+    }
+  
+    .vinyl img {
+      width: 45%;
+    }
+  
+    #progress {
+      width: 85vw;
+    }
+  
+    .buttons-container {
+      width: 85vw;
+    }
+  }
+  
+  
@@ -0,0 +1,200 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
+
+body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(to bottom, #000000, #4e4e4e);
+    font-family: sans-serif;
+  }
+  
+  header.page-header {
+    position: absolute;
+    top: 20px;
+    left: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none; /* pour que seul le logo reste cliquable */
+  }
+  
+  .logo-container {
+    position: absolute;
+    left: 20px;
+    pointer-events: auto; /* permet au logo d'être cliquable malgré pointer-events: none plus haut */
+  }
+  
+  .logo {
+    width: 120px;
+    height: auto;
+    cursor: pointer;
+  }
+  
+  .title {
+    color: white;
+    font-size: 20px;
+    font-weight: 600;
+    margin: 0;
+    pointer-events: none;
+  }
+  
+
+  .vinyl-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  
+
+
+/* Titre du bas avec un <br> stylé */
+
+.title-under {
+    text-align: center;
+    color: white;
+    margin-top: 20px;
+  }
+  
+  .song-title {
+    font-size: 30px;
+    font-weight: 600;
+  }
+  
+  .artist-name {
+    margin: none;
+    font-size: 22px;
+    font-weight: 400;
+    opacity: 0.8;
+  }
+  
+  .vinyl {
+    width: 600px;
+    height: 600px;
+    border-radius: 50%;
+    background: radial-gradient(circle at center, #444 0%, #111 60%, #000 100%);
+    /*animation: spin 5s linear infinite paused;*/
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    cursor: pointer;
+    margin: 20px 0;
+  }
+
+  .vinyl.reverse {
+    animation: spin-reverse 4s linear infinite; 
+  }
+  
+  .vinyl img {
+    width: 40%;
+    border-radius: 50%;
+    pointer-events: none;
+  }
+  
+  /* Style pour la barre de progression */
+.progress-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 20px;
+    width: 80%;
+    max-width: 500px;
+    margin-inline: auto;
+  }
+  
+  #progress {
+    width: 100%;
+    height: 6px;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 5px;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+  
+  #progress::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background: white;
+    cursor: pointer;
+  }
+  
+  #progress::-moz-range-thumb {
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background: white;
+    cursor: pointer;
+  }
+  
+  /* Position des timestamps */
+  
+  .time-wrapper {
+      color: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 0 20px;
+    margin-top: 10px;
+    margin-bottom: 10px; /* <-- ajoute ceci pour écarter duration du bouton */
+  }
+  
+  
+  .buttons-container {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    width: 80%;
+    max-width: 500px;
+    margin-top: 10px;
+  }
+  
+  button {
+    flex: 1;
+    font-size: 16px;
+    background: none;
+    border: 1px solid white;
+    color: white;
+    padding: 6px 14px;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+  
+  
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  
+  @media (max-width: 768px) {
+    .vinyl {
+      width: 70vw;
+      height: 70vw;
+    }
+  
+    .vinyl img {
+      width: 45%;
+    }
+  
+    #progress {
+      width: 85vw;
+    }
+  
+    .buttons-container {
+      width: 85vw;
+    }
+  }
+  
+  
@@ -11,6 +11,7 @@
      "dependencies": {
        "express": "^4.21.2",
        "pug": "^3.0.3",
+        "serialport": "^13.0.0",
        "socket.io": "^4.8.1"
      }
    },
@@ -60,6 +61,280 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@serialport/binding-mock": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/@serialport/binding-mock/-/binding-mock-10.2.2.tgz",
+      "integrity": "sha512-HAFzGhk9OuFMpuor7aT5G1ChPgn5qSsklTFOTUX72Rl6p0xwcSVsRtG/xaGp6bxpN7fI9D/S8THLBWbBgS6ldw==",
+      "license": "MIT",
+      "dependencies": {
+        "@serialport/bindings-interface": "^1.2.1",
+        "debug": "^4.3.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/@serialport/binding-mock/node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@serialport/binding-mock/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/@serialport/bindings-cpp": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/bindings-cpp/-/bindings-cpp-13.0.0.tgz",
+      "integrity": "sha512-r25o4Bk/vaO1LyUfY/ulR6hCg/aWiN6Wo2ljVlb4Pj5bqWGcSRC4Vse4a9AcapuAu/FeBzHCbKMvRQeCuKjzIQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "@serialport/bindings-interface": "1.2.2",
+        "@serialport/parser-readline": "12.0.0",
+        "debug": "4.4.0",
+        "node-addon-api": "8.3.0",
+        "node-gyp-build": "4.8.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/bindings-cpp/node_modules/@serialport/parser-delimiter": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-delimiter/-/parser-delimiter-12.0.0.tgz",
+      "integrity": "sha512-gu26tVt5lQoybhorLTPsH2j2LnX3AOP2x/34+DUSTNaUTzu2fBXw+isVjQJpUBFWu6aeQRZw5bJol5X9Gxjblw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/bindings-cpp/node_modules/@serialport/parser-readline": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-readline/-/parser-readline-12.0.0.tgz",
+      "integrity": "sha512-O7cywCWC8PiOMvo/gglEBfAkLjp/SENEML46BXDykfKP5mTPM46XMaX1L0waWU6DXJpBgjaL7+yX6VriVPbN4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@serialport/parser-delimiter": "12.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/bindings-cpp/node_modules/debug": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@serialport/bindings-cpp/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/@serialport/bindings-interface": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@serialport/bindings-interface/-/bindings-interface-1.2.2.tgz",
+      "integrity": "sha512-CJaUd5bLvtM9c5dmO9rPBHPXTa9R2UwpkJ0wdh9JCYcbrPWsKz+ErvR0hBLeo7NPeiFdjFO4sonRljiw4d2XiA==",
+      "license": "MIT",
+      "engines": {
+        "node": "^12.22 || ^14.13 || >=16"
+      }
+    },
+    "node_modules/@serialport/parser-byte-length": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-byte-length/-/parser-byte-length-13.0.0.tgz",
+      "integrity": "sha512-32yvqeTAqJzAEtX5zCrN1Mej56GJ5h/cVFsCDPbF9S1ZSC9FWjOqNAgtByseHfFTSTs/4ZBQZZcZBpolt8sUng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/parser-cctalk": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-cctalk/-/parser-cctalk-13.0.0.tgz",
+      "integrity": "sha512-RErAe57g9gvnlieVYGIn1xymb1bzNXb2QtUQd14FpmbQQYlcrmuRnJwKa1BgTCujoCkhtaTtgHlbBWOxm8U2uA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/parser-delimiter": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-delimiter/-/parser-delimiter-13.0.0.tgz",
+      "integrity": "sha512-Qqyb0FX1avs3XabQqNaZSivyVbl/yl0jywImp7ePvfZKLwx7jBZjvL+Hawt9wIG6tfq6zbFM24vzCCK7REMUig==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/parser-inter-byte-timeout": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-inter-byte-timeout/-/parser-inter-byte-timeout-13.0.0.tgz",
+      "integrity": "sha512-a0w0WecTW7bD2YHWrpTz1uyiWA2fDNym0kjmPeNSwZ2XCP+JbirZt31l43m2ey6qXItTYVuQBthm75sPVeHnGA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/parser-packet-length": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-packet-length/-/parser-packet-length-13.0.0.tgz",
+      "integrity": "sha512-60ZDDIqYRi0Xs2SPZUo4Jr5LLIjtb+rvzPKMJCohrO6tAqSDponcNpcB1O4W21mKTxYjqInSz+eMrtk0LLfZIg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/@serialport/parser-readline": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-readline/-/parser-readline-13.0.0.tgz",
+      "integrity": "sha512-dov3zYoyf0dt1Sudd1q42VVYQ4WlliF0MYvAMA3MOyiU1IeG4hl0J6buBA2w4gl3DOCC05tGgLDN/3yIL81gsA==",
+      "license": "MIT",
+      "dependencies": {
+        "@serialport/parser-delimiter": "13.0.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/parser-ready": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-ready/-/parser-ready-13.0.0.tgz",
+      "integrity": "sha512-JNUQA+y2Rfs4bU+cGYNqOPnNMAcayhhW+XJZihSLQXOHcZsFnOa2F9YtMg9VXRWIcnHldHYtisp62Etjlw24bw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/parser-regex": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-regex/-/parser-regex-13.0.0.tgz",
+      "integrity": "sha512-m7HpIf56G5XcuDdA3DB34Z0pJiwxNRakThEHjSa4mG05OnWYv0IG8l2oUyYfuGMowQWaVnQ+8r+brlPxGVH+eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/parser-slip-encoder": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-slip-encoder/-/parser-slip-encoder-13.0.0.tgz",
+      "integrity": "sha512-fUHZEExm6izJ7rg0A1yjXwu4sOzeBkPAjDZPfb+XQoqgtKAk+s+HfICiYn7N2QU9gyaeCO8VKgWwi+b/DowYOg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/parser-spacepacket": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-spacepacket/-/parser-spacepacket-13.0.0.tgz",
+      "integrity": "sha512-DoXJ3mFYmyD8X/8931agJvrBPxqTaYDsPoly9/cwQSeh/q4EjQND9ySXBxpWz5WcpyCU4jOuusqCSAPsbB30Eg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/stream": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/stream/-/stream-13.0.0.tgz",
+      "integrity": "sha512-F7xLJKsjGo2WuEWMSEO1SimRcOA+WtWICsY13r0ahx8s2SecPQH06338g28OT7cW7uRXI7oEQAk62qh5gHJW3g==",
+      "license": "MIT",
+      "dependencies": {
+        "@serialport/bindings-interface": "1.2.2",
+        "debug": "4.4.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/stream/node_modules/debug": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@serialport/stream/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
    "node_modules/@socket.io/component-emitter": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
@@ -818,6 +1093,26 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/node-addon-api": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-8.3.0.tgz",
+      "integrity": "sha512-8VOpLHFrOQlAH+qA0ZzuGRlALRA6/LVh8QJldbrC4DY0hXoMP0l4Acq8TzFC018HztWiRqyCEj2aTWY2UvnJUg==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18 || ^20 || >= 21"
+      }
+    },
+    "node_modules/node-gyp-build": {
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
+      "integrity": "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==",
+      "license": "MIT",
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
    "node_modules/object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -1142,6 +1437,57 @@
      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
      "license": "MIT"
    },
+    "node_modules/serialport": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/serialport/-/serialport-13.0.0.tgz",
+      "integrity": "sha512-PHpnTd8isMGPfFTZNCzOZp9m4mAJSNWle9Jxu6BPTcWq7YXl5qN7tp8Sgn0h+WIGcD6JFz5QDgixC2s4VW7vzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@serialport/binding-mock": "10.2.2",
+        "@serialport/bindings-cpp": "13.0.0",
+        "@serialport/parser-byte-length": "13.0.0",
+        "@serialport/parser-cctalk": "13.0.0",
+        "@serialport/parser-delimiter": "13.0.0",
+        "@serialport/parser-inter-byte-timeout": "13.0.0",
+        "@serialport/parser-packet-length": "13.0.0",
+        "@serialport/parser-readline": "13.0.0",
+        "@serialport/parser-ready": "13.0.0",
+        "@serialport/parser-regex": "13.0.0",
+        "@serialport/parser-slip-encoder": "13.0.0",
+        "@serialport/parser-spacepacket": "13.0.0",
+        "@serialport/stream": "13.0.0",
+        "debug": "4.4.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/serialport/node_modules/debug": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/serialport/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
    "node_modules/serve-static": {
      "version": "1.16.2",
      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
@@ -12,6 +12,7 @@
  "dependencies": {
    "express": "^4.21.2",
    "pug": "^3.0.3",
+    "serialport": "^13.0.0",
    "socket.io": "^4.8.1"
  }
 }
@@ -0,0 +1,10 @@
+loop
+====
+```shell
+git clone
+npm install
+node server.js
+```
+
+
+https://serialport.io/docs/guide-usage
@@ -0,0 +1,72 @@
+const express = require('express');
+const { createServer } = require('node:http');
+// socket
+const { Server } = require('socket.io');
+// usb serial (arduino)
+var { SerialPort } = require("serialport");
+const { ReadlineParser } = require('@serialport/parser-readline')
+
+const app = express();
+const server = createServer(app);
+const io = new Server(server);
+
+const port = 3000
+
+// https://serialport.io/docs/guide-usage
+
+var arduinoCOMPort = "/dev/ttyUSB0";
+var arduinoSerialPort = new SerialPort({
+  path: arduinoCOMPort, 
+  baudRate: 9600 
+});
+
+arduinoSerialPort.on('open',function() {
+  console.log('Serial Port ' + arduinoCOMPort + ' is opened.');
+});
+
+
+// // Read data that is available but keep the stream in "paused mode"
+// arduinoSerialPort.on('readable', function () {
+//   console.log('Data:', arduinoSerialPort.read())
+// })
+
+// // Switches the port into "flowing mode"
+// arduinoSerialPort.on('data', function (data) {
+//   console.log('Data:', data)
+// })
+
+// const serialParser = arduinoSerialPort.pipe(new Readline({ delimiter: '\n' }));
+
+// serialParser.on('data', data =>{
+//   console.log('got word from arduino:', data);
+// });
+
+app.set('view engine', 'pug')
+app.use(express.static('assets'))
+
+app.get('/', (req, res) => {
+  // res.send('Hello World!')
+  // res.render('index', { title: 'Hey', message: 'Hello there PUG!' })
+  res.sendFile('assets/main.html', { root : __dirname});
+})
+
+io.on('connection', (socket) => {
+  console.log('a user connected');
+  // let speed = 0.1;
+  // setInterval(() => {
+  //   speed+=0.1;
+  //   socket.emit('speed', speed);
+  // }, 2000);
+  
+  // Listening to arduino through serial port
+  const parser = arduinoSerialPort.pipe(new ReadlineParser({ delimiter: '\n' }))
+  parser.on('data', data => {
+    console.log('got word from arduino:', data);
+    socket.emit('position', data);
+  })
+
+});
+
+server.listen(port, () => {
+  console.log(`Example app listening on port ${port}`)
+})
@@ -1,7 +1,9 @@
-loop
+Loop
 ====
-```shell
-git clone
-npm install
-node server.js
-```
+
+# Node
+https://gitea.esadhar.fr/el-yazide.mohamed/loop
+
+# Arduino
+https://arduinogetstarted.com/tutorials/arduino-dc-motor
+
@@ -1,33 +0,0 @@
-const express = require('express');
-const { createServer } = require('node:http');
-const { Server } = require('socket.io');
-
-const app = express();
-const server = createServer(app);
-const io = new Server(server);
-
-
-const port = 3000
-
-
-app.set('view engine', 'pug')
-app.use(express.static('assets'))
-
-app.get('/', (req, res) => {
-  // res.send('Hello World!')
-  // res.render('index', { title: 'Hey', message: 'Hello there PUG!' })
-  res.sendFile('index.html');
-})
-
-io.on('connection', (socket) => {
-  console.log('a user connected');
-  let speed = 0.1;
-  setInterval(() => {
-    speed+=0.1;
-    socket.emit('speed', speed);
-  }, 2000);
-});
-
-server.listen(port, () => {
-  console.log(`Example app listening on port ${port}`)
-})
@@ -0,0 +1 @@
+.vscode
@@ -0,0 +1,18 @@
+#include <Encoder.h>
+
+long last_position = 0;
+
+Encoder myEnc(2, 3); // pins for A and B
+
+void setup() {
+  Serial.begin(9600);
+}
+
+void loop() {
+  long position = myEnc.read();
+  if(position != last_position){
+    last_position = position;
+    Serial.println(position);
+  }
+  delay(100);
+}
Author	SHA1	Message	Date
el-yazide.mohamed	0352efbc34	sensi re	2025-06-08 10:55:22 +02:00
el-yazide.mohamed	911049a2fe	rewind	2025-06-08 10:53:07 +02:00
el-yazide.mohamed	60bb918f54	d	2025-06-08 10:50:50 +02:00
el-yazide.mohamed	0f16a93a7e	c	2025-06-08 10:32:20 +02:00
el-yazide.mohamed	8cde0ef01e	b	2025-06-08 10:29:30 +02:00
el-yazide.mohamed	62cac7c459	web audio API	2025-06-08 10:25:31 +02:00
el-yazide.mohamed	be551e8844	seuil 1	2025-06-08 09:54:33 +02:00
el-yazide.mohamed	d56266d1f3	b2	2025-06-08 09:53:45 +02:00
el-yazide.mohamed	c74daf7337	bis	2025-06-08 09:51:07 +02:00
el-yazide.mohamed	a9808ba9d4	sensi + seuil	2025-06-08 09:46:21 +02:00
el-yazide.mohamed	303c76cbd6	anim css x	2025-06-07 21:11:51 +02:00
el-yazide.mohamed	8c1e56c3f9	html change	2025-06-07 21:05:22 +02:00
el-yazide.mohamed	82ce27c10d	rewind encore	2025-06-07 20:59:01 +02:00
el-yazide.mohamed	10e8782798	parser	2025-06-07 20:55:18 +02:00
el-yazide.mohamed	fe24e5aa23	bis	2025-06-07 20:43:37 +02:00
el-yazide.mohamed	702e428ee5	bis	2025-06-07 20:26:42 +02:00
el-yazide.mohamed	f236665829	mpg123	2025-06-07 20:20:14 +02:00
el-yazide.mohamed	21f18d1b2a	bis	2025-06-07 19:51:31 +02:00
el-yazide.mohamed	daa0505504	rewind	2025-06-07 19:49:27 +02:00
el-yazide.mohamed	69b45e386f	test son raspberry	2025-06-07 19:44:29 +02:00
el-yazide.mohamed	8accaf4ab2	son exterieur 1	2025-06-07 19:16:30 +02:00
el-yazide.mohamed	cf8c4b0e47	- sensi reverse	2025-06-07 17:35:53 +02:00
el-yazide.mohamed	710cd0506d	bis	2025-06-07 17:26:07 +02:00
el-yazide.mohamed	7a7c04dbe4	animation js	2025-06-07 17:18:25 +02:00
el-yazide.mohamed	1e04b86236	animation css	2025-06-07 17:14:30 +02:00
el-yazide.mohamed	6a8463fab5	css	2025-06-07 17:09:51 +02:00
el-yazide.mohamed	9cf7c74f9c	bisbis	2025-06-07 17:04:57 +02:00
el-yazide.mohamed	825acfe48b	bis	2025-06-07 16:56:27 +02:00
el-yazide.mohamed	cadb42d693	reverse timeline	2025-06-07 16:53:59 +02:00
el-yazide.mohamed	024338d4dc	Vitesse normalisée	2025-06-07 16:49:13 +02:00
el-yazide.mohamed	a33466d6d9	speed	2025-06-07 16:38:15 +02:00
el-yazide.mohamed	ebc97c8930	timeline rewind	2025-06-07 13:41:45 +02:00
el-yazide.mohamed	0e8efa0902	animation vinyle	2025-06-07 13:34:02 +02:00
el-yazide.mohamed	4eadf7dc7e	bis	2025-06-07 13:20:10 +02:00
el-yazide.mohamed	9033c8ad20	audio src	2025-06-07 13:14:34 +02:00
el-yazide.mohamed	ac89ce77e6	retour sensi -	2025-06-07 12:44:45 +02:00
el-yazide.mohamed	2b54c71eae	test	2025-06-07 09:26:53 +02:00
el-yazide.mohamed	e957de4d86	bisbis	2025-06-07 08:32:34 +02:00
el-yazide.mohamed	61f68ca41f	bis	2025-06-07 08:19:34 +02:00
el-yazide.mohamed	bdd82be393	audio back and forth	2025-06-07 08:06:05 +02:00
el-yazide.mohamed	a9c1f21fe3	audio reverse add	2025-06-07 07:52:01 +02:00
el-yazide.mohamed	98f3a4a02f	sensi -	2025-06-07 07:23:29 +02:00
el-yazide.mohamed	80002351ad	sensi	2025-06-07 07:18:49 +02:00
el-yazide.mohamed	533cd1052e	reverse	2025-06-07 07:00:55 +02:00
el-yazide.mohamed	3b7b46f25b	position -> vitesse	2025-06-07 06:14:25 +02:00
el-yazide.mohamed	0252347f65	socket re	2025-06-07 05:52:58 +02:00
el-yazide.mohamed	c3bf6811ea	socket	2025-06-07 05:45:24 +02:00
el-yazide.mohamed	b2f9e5abb5	server	2025-06-06 17:04:27 +02:00
el-yazide.mohamed	1088699977	socket library	2025-06-06 16:56:31 +02:00
el-yazide.mohamed	44ec586c1e	socket	2025-06-06 16:51:21 +02:00
el-yazide.mohamed	82f4868f78	websocket.io	2025-06-06 16:43:11 +02:00
el-yazide.mohamed	41717509f8	web socket	2025-06-06 16:43:10 +02:00
el-yazide.mohamed	f3c09a00ad	web socket	2025-06-06 16:43:10 +02:00
el-yazide.mohamed	cafeed83b5	ajout websocket	2025-06-06 16:43:10 +02:00
bach	0a3a79aca9	front from ely	2025-05-30 17:25:17 +02:00
bach	f969bf638c	added arduino data to front	2025-05-30 17:19:03 +02:00
bach	9250353c1c	added arduino rotary encoder	2025-05-30 15:36:48 +02:00
el-yazide.mohamed	c63d1cc49e	Add Page Roman	2025-04-25 14:30:47 +02:00
el-yazide.mohamed	d4300b6963	Interface Finale	2025-04-21 19:03:59 +02:00
el-yazide.mohamed	897b244d16	lecteur sons	2025-04-13 17:23:03 +02:00
el-yazide.mohamed	838201bb58	Pages sons	2025-04-13 16:44:00 +02:00