position -> vitesse

This commit is contained in:
El-yazide MOHAMED 2025-06-07 06:14:25 +02:00
parent 0252347f65
commit 3b7b46f25b

View File

@ -12,15 +12,40 @@ const loopBtn = document.getElementById('loop');
let isPlaying = false;
let isLooping = false;
// sokcet.io & arduino serial info
// 3. Variables pour calculer la vitesse de rotation
let lastPosition = null;
let lastTime = null;
// 4. 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; // en secondes
const speed = deltaPos / deltaTime; // ticks par seconde
console.log('instant speed:', speed);
// Seuil minimal pour stopper la lecture si la balle ne tourne plus
if (Math.abs(speed) < 2) {
controlPlayback(0); // stop
} else {
// Mappe la vitesse vers une valeur de lecture entre 0.5 et 2
let playbackSpeed = 1 + speed * 0.01; // facteur à ajuster selon ton encoder
playbackSpeed = Math.max(0.5, Math.min(2, playbackSpeed));
controlPlayback(playbackSpeed);
}
}
lastPosition = position;
lastTime = now;
});
// 3. Fonctions
// 5. Fonctions
// Fonction pour basculer la lecture
function togglePlay() {
if (isPlaying) {
audio.pause();
@ -32,21 +57,18 @@ function togglePlay() {
isPlaying = !isPlaying;
}
// Mise à jour de la barre de progression
function updateProgress() {
const progressPercent = (audio.currentTime / audio.duration) * 100;
progress.value = progressPercent;
currentTimeEl.textContent = formatTime(audio.currentTime);
}
// 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,7 +76,7 @@ function setProgress(e) {
audio.currentTime = (clickX / width) * duration;
}
// Fonction pour regler la vitesse de lecture en fonction de la balle
// Fonction pour régler la lecture selon la vitesse
function controlPlayback(speed) {
if (speed > 0) {
if (!isPlaying) {
@ -62,8 +84,7 @@ function controlPlayback(speed) {
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));
audio.playbackRate = speed;
} else {
if (isPlaying) {
audio.pause();
@ -73,40 +94,29 @@ function controlPlayback(speed) {
}
}
// 4. Événements
// 6. É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);
});
// 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;
@ -116,23 +126,3 @@ audio.addEventListener('ended', () => {
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);