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

compatible pwa

Browse Source
This commit is contained in:
Cédric Abonnel
2026-03-27 01:24:59 +01:00
parent d98c1f24b3
commit 30aeeef94d
7 changed files with 154 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
public/icon-192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
public/icon-512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 337 KiB

63
public/index.html
View File

@@ -3,7 +3,11 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Soundboard Pro Studio - 1080p</title> <title>Soundboard A5L</title>
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#00f2ff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<style> <style>
:root { :root {
--bg: #050505; --bg: #050505;
@@ -113,8 +117,13 @@
<body> <body>
<header> <header>
<button class="stop-all" onclick="stopAll()">🛑 STOP ALL</button> <div style="display: flex; gap: 10px; align-items: center;">
<button onclick="toggleEditMode()" id="toggleBtn" style="padding: 12px 30px; border-radius: 4px; font-weight: bold;">MODE ÉDITION</button> <button class="stop-all" onclick="stopAll()">🛑 STOP ALL</button>
<button id="installBtn" style="display:none; padding: 12px 20px; background: var(--accent); color: black; border: none; border-radius: 4px; font-weight: bold; cursor: pointer;">
📥 INSTALLER SOUNDBOARD
</button>
</div>
<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>
@@ -149,6 +158,38 @@
let editingIndex = null; let editingIndex = null;
let tempFileData = null; let tempFileData = null;
let deferredPrompt;
const installBtn = document.getElementById('installBtn');
window.addEventListener('beforeinstallprompt', (e) => {
// Empêche Chrome d'afficher sa propre mini-barre
e.preventDefault();
// Stocke l'événement pour l'utiliser plus tard
deferredPrompt = e;
// Affiche votre bouton personnalisé
installBtn.style.display = 'block';
installBtn.addEventListener('click', async () => {
if (deferredPrompt) {
// Montre la fenêtre d'installation native
deferredPrompt.prompt();
// Attend la réponse de l'utilisateur
const { outcome } = await deferredPrompt.userChoice;
console.log(`L'utilisateur a répondu : ${outcome}`);
// On nettoie
deferredPrompt = null;
installBtn.style.display = 'none';
}
});
});
// Cache le bouton si l'app est déjà installée
window.addEventListener('appinstalled', () => {
installBtn.style.display = 'none';
deferredPrompt = null;
console.log('PWA installée avec succès !');
});
// Données pour 64 boutons (Grille 8x8) // Données pour 64 boutons (Grille 8x8)
let btnData = JSON.parse(localStorage.getItem('sb_studio_data')) || Array(64).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
@@ -300,8 +341,24 @@
init(); init();
} }
// Désactive le menu contextuel (clic droit) sur toute la page
window.oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation();
return false;
};
function closeEdit() { document.getElementById('editOverlay').style.display = 'none'; } function closeEdit() { document.getElementById('editOverlay').style.display = 'none'; }
init(); init();
</script> </script>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js')
.then(() => console.log("Service Worker Enregistré"));
}
</script>
</body> </body>
</html> </html>

25
public/manifest.json Normal file
View File

@@ -0,0 +1,25 @@
{
"name": "Soundboard A5L",
"short_name": "Soundboard",
"description": "Studio de sons 64 touches pour écran tactile",
"start_url": "index.html",
"display": "fullscreen",
"display_override": ["window-controls-overlay"],
"orientation": "landscape",
"background_color": "#050505",
"theme_color": "#00f2ff",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
}
]
}

25
public/readme.md
View File

@@ -1,7 +1,22 @@
# Soundboard par A5L
## Fonctionnalités
* Edition de 64 boutons poru diffuser des sons simultané
* Stockage du son en interne du navigateur
* Arrêt de toutes les pistes avec un bouton STOP ALL
* Progressif Web App
## Fonctionnalités à venir
* Authentification pour stocker les sons sur le serveur
* Authentification pour récuperer les sons depuis le serveur
* Utilisation d'IndexedDB pour stocker les son
* Partager des sons pour que d'autres puissent les déployer dans leur soundboard
* Rechercher des sons dans sa médiathèque ou des sons partagés pour une diffusion One Shot
* Ajouter des sons partagés par d'autres utilisateurs
Vous pouvez trouver des sons sur https://boardsounds.com/fr Vous pouvez trouver des sons sur https://boardsounds.com/fr
Utilisation d'IndexedDB pour stocker les son
Authentification pour stocker les sons sur le serveur

49
public/sw.js Normal file
View File

@@ -0,0 +1,49 @@
const CACHE_NAME = 'sb-v1.1'; // Change ce numéro pour forcer une mise à jour globale
const ASSETS = [
'./', // Racine
'./index.html',
'./manifest.json',
'./icon-192.png',
'./icon-512.png'
];
// Installation : Mise en cache des ressources critiques
self.addEventListener('install', (e) => {
self.skipWaiting(); // Force le nouveau SW à prendre le contrôle immédiatement
e.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
console.log('SW: Mise en cache des ressources');
return cache.addAll(ASSETS);
})
);
});
// Activation : Nettoyage des anciens caches
self.addEventListener('activate', (e) => {
e.waitUntil(
caches.keys().then((keyList) => {
return Promise.all(keyList.map((key) => {
if (key !== CACHE_NAME) {
console.log('SW: Suppression de l\'ancien cache', key);
return caches.delete(key);
}
}));
})
);
});
// Stratégie : Cache First, Network Fallback
self.addEventListener('fetch', (e) => {
e.respondWith(
caches.match(e.request).then((response) => {
// Retourne la réponse du cache si elle existe, sinon fait la requête réseau
return response || fetch(e.request).then((networkResponse) => {
// Optionnel : tu pourrais mettre en cache dynamiquement les nouveaux fichiers ici
return networkResponse;
});
}).catch(() => {
// Si tout échoue (offline et pas en cache), tu peux retourner une page d'erreur
console.log('SW: Ressource non trouvée');
})
);
});