139 lines
4.0 KiB
JavaScript
139 lines
4.0 KiB
JavaScript
// 1. Sélection des éléments du 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;
|
|
|
|
// sokcet.io & arduino serial info
|
|
const socket = io();
|
|
socket.on('position', (position) => {
|
|
console.log('recieved position', position);
|
|
});
|
|
|
|
// 3. 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() {
|
|
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;
|
|
const duration = audio.duration;
|
|
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) {
|
|
audio.pause();
|
|
vinyl.style.animationPlayState = 'paused';
|
|
isPlaying = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 4. É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;
|
|
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);
|