cedricAbonnel/soundboard_a5l
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Version avec 56 boutons

Browse Source
This commit is contained in:
Cédric Abonnel
2026-03-26 23:46:43 +01:00
parent aa7bba900b
commit 8155a4dcef
2 changed files with 127 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
public/index.html
View File

@@ -2,83 +2,133 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Soundboard Pro - Expert Edition</title> <title>Soundboard Pro Studio - 1080p</title>
<style> <style>
:root { --bg: #0f0f0f; --panel-bg: #1e1e1e; --accent: #ffb703; --text: #eee; } :root {
body { background: var(--bg); color: var(--text); margin: 0; font-family: sans-serif; overflow: hidden; } --bg: #050505;
--panel-bg: #151515;
--accent: #00f2ff; /* Cyan néon pour le 1080p */
--danger: #ff004c;
--text: #ffffff;
}
header { height: 50px; background: #222; display: flex; align-items: center; padding: 0 15px; justify-content: space-between; border-bottom: 2px solid #333; } body {
.grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(6, 1fr); gap: 5px; height: calc(100vh - 50px); padding: 5px; box-sizing: border-box; } background: var(--bg);
color: var(--text);
.btn { background: #2a2a2a; border: 1px solid #444; border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative; font-size: 0.7rem; text-align: center; } margin: 0;
.btn.active { border-color: var(--accent); color: var(--accent); } font-family: 'Segoe UI', Roboto, sans-serif;
.btn.playing { background: #e63946; color: white; box-shadow: 0 0 10px #e63946; } overflow: hidden;
.btn.has-loop::after { content: "∞"; position: absolute; top: 2px; right: 5px; font-size: 12px; color: var(--accent); } height: 100vh;
}
/* Overlay / Panneau d'édition */ /* Header Studio */
header {
height: 80px;
background: linear-gradient(180deg, #222 0%, #111 100%);
display: flex;
align-items: center;
padding: 0 30px;
justify-content: space-between;
border-bottom: 3px solid #333;
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
/* Grille Full HD (8 colonnes x 8 lignes = 64 boutons) */
.grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
gap: 10px;
height: calc(100vh - 80px);
padding: 15px;
box-sizing: border-box;
}
.btn {
background: #1a1a1a;
border: 1px solid #333;
border-radius: 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.1s ease;
cursor: pointer;
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
.btn:hover { background: #222; border-color: #555; }
.btn.active { border-color: #444; color: #aaa; }
.btn.playing {
background: var(--danger);
color: white;
box-shadow: 0 0 20px var(--danger), inset 0 0 15px rgba(0,0,0,0.3);
border-color: white;
transform: scale(0.98);
}
.btn-num { position: absolute; top: 5px; left: 8px; font-size: 0.7rem; color: #555; }
.loop-tag { position: absolute; bottom: 5px; right: 8px; font-size: 14px; color: var(--accent); opacity: 0; }
.btn.has-loop .loop-tag { opacity: 1; }
/* Modale d'édition centrée (Style Desktop) */
#editOverlay { #editOverlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.8); display: none; z-index: 100; background: rgba(0,0,0,0.9); display: none; z-index: 100;
align-items: flex-end; justify-content: center; align-items: center;
} }
#editPanel { #editPanel {
background: var(--panel-bg); width: 100%; padding: 20px; background: var(--panel-bg); width: 500px; padding: 40px;
border-radius: 20px 20px 0 0; box-sizing: border-box; border-radius: 15px; border: 2px solid var(--accent);
transform: translateY(100%); transition: transform 0.3s ease; box-shadow: 0 0 50px rgba(0,242,255,0.2);
} }
#editOverlay.show { display: flex; }
#editOverlay.show #editPanel { transform: translateY(0); }
.form-group { margin-bottom: 15px; } input[type="text"], input[type="range"] {
label { display: block; margin-bottom: 5px; color: #888; font-size: 0.9rem; } width: 100%; padding: 12px; margin: 10px 0; background: #000;
input[type="text"], input[type="range"] { width: 100%; padding: 10px; background: #333; border: 1px solid #444; color: white; border-radius: 5px; box-sizing: border-box; } border: 1px solid #444; color: white; border-radius: 4px;
}
.actions { display: flex; gap: 10px; margin-top: 20px; }
.actions button { flex: 1; padding: 15px; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; } .actions { display: flex; gap: 15px; margin-top: 30px; }
.actions button { flex: 1; padding: 15px; border-radius: 5px; font-weight: bold; border: none; cursor: pointer; }
.btn-save { background: var(--accent); color: black; } .btn-save { background: var(--accent); color: black; }
.btn-cancel { background: #444; color: white; } .btn-cancel { background: #333; color: white; }
.btn-file { background: #219ebc; color: white; margin-bottom: 10px; width: 100%; }
body.edit-mode .btn { border: 1px dashed var(--accent); } body.edit-mode .btn { border: 1px dashed var(--accent); cursor: crosshair; }
.stop-all { background: var(--danger); color: white; border: none; padding: 12px 25px; border-radius: 4px; font-weight: bold; cursor: pointer; }
</style> </style>
</head> </head>
<body> <body>
<header> <header>
<div id="status">MODE LECTURE</div> <button class="stop-all" onclick="stopAll()">🛑 STOP ALL</button>
<button onclick="toggleEditMode()" id="toggleBtn" style="padding: 5px 15px;">ÉDITER</button> <button onclick="toggleEditMode()" id="toggleBtn" style="padding: 12px 30px; border-radius: 4px; font-weight: bold;">MODE ÉDITION</button>
</header> </header>
<div class="grid" id="board"></div> <div class="grid" id="board"></div>
<div id="editOverlay" onclick="closeEditIfOutside(event)"> <div id="editOverlay">
<div id="editPanel" onclick="event.stopPropagation()"> <div id="editPanel">
<h3 id="editTitle" style="margin-top:0">Paramètres du bouton</h3> <h2 id="editTitle" style="margin-top:0; color:var(--accent)">Configuration Bouton</h2>
<label>Nom de l'échantillon</label>
<input type="text" id="inputName">
<div class="form-group"> <button onclick="document.getElementById('fileInput').click()" style="width:100%; padding:15px; margin:15px 0; background:#333; color:white; border:1px solid #555; border-radius:4px;">📁 CHARGER LE FICHIER AUDIO</button>
<label>Nom du bouton</label> <center><small id="fileNameLabel" style="color:#777"></small></center>
<input type="text" id="inputName" placeholder="Entrez un nom...">
<div style="margin-top:20px;">
<input type="checkbox" id="inputLoop"> <label>Activer la boucle infinie</label>
</div> </div>
<div class="form-group"> <label style="margin-top:20px; display:block">Volume (Gain)</label>
<button class="btn-file" onclick="document.getElementById('fileInput').click()">📁 CHOISIR UN FICHIER SON</button> <input type="range" id="inputVolume" min="0" max="1" step="0.01" value="1">
<small id="fileNameLabel" style="color:#666; display:block"></small>
</div>
<div class="form-group" style="display:flex; align-items:center; gap:10px;">
<input type="checkbox" id="inputLoop" style="width:20px; height:20px;">
<label for="inputLoop" style="margin:0">Activer la boucle (Loop)</label>
</div>
<div class="form-group">
<label>Volume</label>
<input type="range" id="inputVolume" min="0" max="1" step="0.1" value="1">
</div>
<div class="actions"> <div class="actions">
<button class="btn-cancel" onclick="closeEdit()">ANNULER</button> <button class="btn-cancel" onclick="closeEdit()">ANNULER</button>
<button class="btn-save" onclick="saveSettings()">ENREGISTRER</button> <button class="btn-save" onclick="saveSettings()">APPLIQUER</button>
</div> </div>
</div> </div>
</div> </div>
@@ -90,8 +140,8 @@
let editingIndex = null; let editingIndex = null;
let tempFileData = null; let tempFileData = null;
// Données des boutons // Données pour 64 boutons (Grille 8x8)
let btnData = JSON.parse(localStorage.getItem('sb_pro_data')) || Array(30).fill(null).map((_, i) => ({ let btnData = JSON.parse(localStorage.getItem('sb_studio_data')) || Array(64).fill(null).map((_, i) => ({
id: i, name: "", file: null, loop: false, volume: 1 id: i, name: "", file: null, loop: false, volume: 1
})); }));
@@ -104,7 +154,9 @@
const div = document.createElement('div'); const div = document.createElement('div');
div.className = `btn ${data.file ? 'active' : ''} ${data.loop ? 'has-loop' : ''}`; div.className = `btn ${data.file ? 'active' : ''} ${data.loop ? 'has-loop' : ''}`;
div.id = `btn-${i}`; div.id = `btn-${i}`;
div.innerHTML = `<span>${data.name || (i+1)}</span>`; div.innerHTML = `<span class="btn-num">${i+1}</span>
<span style="padding:10px">${data.name || "-"}</span>
<span class="loop-tag">∞</span>`;
div.onclick = () => handleBtnClick(i); div.onclick = () => handleBtnClick(i);
board.appendChild(div); board.appendChild(div);
}); });
@@ -113,19 +165,16 @@
function toggleEditMode() { function toggleEditMode() {
isEditMode = !isEditMode; isEditMode = !isEditMode;
document.body.classList.toggle('edit-mode', isEditMode); document.body.classList.toggle('edit-mode', isEditMode);
document.getElementById('status').innerText = isEditMode ? "MODE ÉDITION" : "MODE LECTURE"; document.getElementById('toggleBtn').innerText = isEditMode ? "QUITTER L'ÉDITION" : "MODE ÉDITION";
document.getElementById('toggleBtn').innerText = isEditMode ? "QUITTER" : "ÉDITER"; document.getElementById('toggleBtn').style.background = isEditMode ? "var(--accent)" : "#444";
document.getElementById('toggleBtn').style.color = isEditMode ? "black" : "white";
} }
function handleBtnClick(i) { function handleBtnClick(i) {
if (isEditMode) { if (isEditMode) openEdit(i);
openEdit(i); else playSound(i);
} else {
playSound(i);
}
} }
// --- LOGIQUE LECTURE ---
function playSound(i) { function playSound(i) {
const data = btnData[i]; const data = btnData[i];
if (!data.file) return; if (!data.file) return;
@@ -144,7 +193,13 @@
} }
} }
// --- LOGIQUE ÉDITION --- function stopAll() {
Object.keys(players).forEach(key => {
players[key].pause(); players[key].currentTime = 0;
document.getElementById(`btn-${key}`).classList.remove('playing');
});
}
function openEdit(i) { function openEdit(i) {
editingIndex = i; editingIndex = i;
const data = btnData[i]; const data = btnData[i];
@@ -152,10 +207,9 @@
document.getElementById('inputName').value = data.name; document.getElementById('inputName').value = data.name;
document.getElementById('inputLoop').checked = data.loop; document.getElementById('inputLoop').checked = data.loop;
document.getElementById('inputVolume').value = data.volume || 1; document.getElementById('inputVolume').value = data.volume || 1;
document.getElementById('fileNameLabel').innerText = data.file ? "Fichier chargé" : "Aucun fichier"; document.getElementById('fileNameLabel').innerText = data.file ? "Audio présent" : "Audio vide";
tempFileData = data.file; tempFileData = data.file;
document.getElementById('editOverlay').style.display = 'flex';
document.getElementById('editOverlay').classList.add('show');
} }
document.getElementById('fileInput').onchange = (e) => { document.getElementById('fileInput').onchange = (e) => {
@@ -164,7 +218,7 @@
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (ev) => { reader.onload = (ev) => {
tempFileData = ev.target.result; tempFileData = ev.target.result;
document.getElementById('fileNameLabel').innerText = "Nouveau fichier : " + file.name; document.getElementById('fileNameLabel').innerText = "Fichier : " + file.name;
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
@@ -175,16 +229,13 @@
btnData[editingIndex].loop = document.getElementById('inputLoop').checked; btnData[editingIndex].loop = document.getElementById('inputLoop').checked;
btnData[editingIndex].volume = parseFloat(document.getElementById('inputVolume').value); btnData[editingIndex].volume = parseFloat(document.getElementById('inputVolume').value);
btnData[editingIndex].file = tempFileData; btnData[editingIndex].file = tempFileData;
localStorage.setItem('sb_studio_data', JSON.stringify(btnData));
localStorage.setItem('sb_pro_data', JSON.stringify(btnData)); if (players[editingIndex]) delete players[editingIndex];
if (players[editingIndex]) delete players[editingIndex]; // Reset audio pour appliquer changements
closeEdit(); closeEdit();
init(); init();
} }
function closeEdit() { document.getElementById('editOverlay').classList.remove('show'); } function closeEdit() { document.getElementById('editOverlay').style.display = 'none'; }
function closeEditIfOutside(e) { if(e.target.id === 'editOverlay') closeEdit(); }
init(); init();
</script> </script>
</body> </body>

3
public/readme.md Normal file
View File

@@ -0,0 +1,3 @@
Vous pouvez trouver des sons sur https://boardsounds.com/fr