rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Navi-Sounds: AudioBuffer statt HTMLAudio — echtes Gebell zuverlaessig ab dem ersten Wuff

Browse source 
HTMLAudio+preload laedt auf iOS lazy (canplaythrough feuert nie) und verlor
beim ersten Einschalten das Rennen gegen den Probe-Wuff -> Game-Boy-Fallback.
Jetzt: fetch + decodeAudioData in den bestehenden AudioContext (praezises
Timing via BufferSource, offline via SW-Precache); Probe-Wuff 450ms verzoegert.
Synthese bleibt Fallback bei 404/Decode-Fehler.
Bump v1244
This commit is contained in:
rene 2026-06-06 19:55:44 +02:00
parent 2042a3f513
commit 448066567d
6 changed files with 51 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

2
VERSION
View file

@ -1 +1 @@
1243 1244

24
backend/static/index.html
View file

@ -86,14 +86,14 @@
<title>Ban Yaro</title> <title>Ban Yaro</title>
<!-- Theme + theme-color Statusleiste vor CSS setzen --> <!-- Theme + theme-color Statusleiste vor CSS setzen -->
<script src="/js/boot-early.js?v=1243"></script> <script src="/js/boot-early.js?v=1244"></script>
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung --> <!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=1243"> <link rel="stylesheet" href="/css/design-system.css?v=1244">
<link rel="stylesheet" href="/css/layout.css?v=1243"> <link rel="stylesheet" href="/css/layout.css?v=1244">
<link rel="stylesheet" href="/css/components.css?v=1243"> <link rel="stylesheet" href="/css/components.css?v=1244">
<link rel="stylesheet" href="/css/utilities.css?v=1243"> <link rel="stylesheet" href="/css/utilities.css?v=1244">
<link rel="stylesheet" href="/css/lists.css?v=1243"> <link rel="stylesheet" href="/css/lists.css?v=1244">
</head> </head>
<body> <body>
@ -612,11 +612,11 @@
<div id="modal-container"></div> <div id="modal-container"></div>
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features --> <!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
<script src="/js/api.js?v=1243"></script> <script src="/js/api.js?v=1244"></script>
<script src="/js/ui.js?v=1243"></script> <script src="/js/ui.js?v=1244"></script>
<script src="/js/app.js?v=1243"></script> <script src="/js/app.js?v=1244"></script>
<script src="/js/worlds.js?v=1243"></script> <script src="/js/worlds.js?v=1244"></script>
<script src="/js/offline-indicator.js?v=1243"></script> <script src="/js/offline-indicator.js?v=1244"></script>
<!-- Feature-Seiten werden lazy geladen --> <!-- Feature-Seiten werden lazy geladen -->
@ -626,7 +626,7 @@
<!-- Boot: Offline-Banner + SW-Registration (extrahiert für CSP) --> <!-- Boot: Offline-Banner + SW-Registration (extrahiert für CSP) -->
<script src="/js/boot.js?v=1243"></script> <script src="/js/boot.js?v=1244"></script>
</body> </body>

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung. Router, State-Management, Navigation, Initialisierung.
============================================================ */ ============================================================ */
const APP_VER = '1243'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VER = '1244'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
window.APP_VER = APP_VER; // global verfügbar für andere Module (z.B. offline-indicator) window.APP_VER = APP_VER; // global verfügbar für andere Module (z.B. offline-indicator)
window.APP_VERSION = APP_VERSION; window.APP_VERSION = APP_VERSION;

63
backend/static/js/pages/routes.js
View file

@ -77,7 +77,9 @@ window.Page_routes = (() => {
// ---------------------------------------------------------- // ----------------------------------------------------------
const NavSound = (() => { const NavSound = (() => {
let ctx = null; let ctx = null;
let files = null; // { wuff, klaeffen } HTMLAudio | leer = Synthese let bufs = null; // { wuff, klaeffen } AudioBuffer | leer = Synthese.
// HTMLAudio+preload taugt NICHT (iOS lädt lazy, canplaythrough feuert nie →
// es blieb beim Game-Boy-Sound, René 2026-06-06) → fetch + decodeAudioData.
const enabled = () => { try { return localStorage.getItem('by_nav_sound') !== '0'; } catch (e) { return true; } }; const enabled = () => { try { return localStorage.getItem('by_nav_sound') !== '0'; } catch (e) { return true; } };
function _ctx() { function _ctx() {
@ -85,6 +87,17 @@ window.Page_routes = (() => {
if (ctx.state === 'suspended') ctx.resume().catch(() => {}); if (ctx.state === 'suspended') ctx.resume().catch(() => {});
return ctx; return ctx;
} }
function _loadBufs() {
if (bufs !== null) return;
bufs = {};
['wuff', 'klaeffen'].forEach(name => {
fetch(`/sounds/${name}.mp3`)
.then(r => { if (!r.ok) throw new Error(String(r.status)); return r.arrayBuffer(); })
.then(ab => _ctx().decodeAudioData(ab))
.then(b => { bufs[name] = b; })
.catch(() => {}); // 404/Decode-Fehler → Synthese bleibt
});
}
// Ein synthetischer „Wuff": Sägezahn-Sweep durch Tiefpass, kurzer Attack, schneller Decay. // Ein synthetischer „Wuff": Sägezahn-Sweep durch Tiefpass, kurzer Attack, schneller Decay.
function _wuff(at, pitch = 1) { function _wuff(at, pitch = 1) {
const c = _ctx(), t = c.currentTime + at; const c = _ctx(), t = c.currentTime + at;
@ -101,22 +114,23 @@ window.Page_routes = (() => {
} }
function _barks(n, pitch, gap) { function _barks(n, pitch, gap) {
if (!enabled()) return; if (!enabled()) return;
const sample = files && (pitch > 1.3 ? files.klaeffen : files.wuff); try {
if (sample) { // echte Aufnahme (Schäferhund, /sounds/*.mp3) const buf = bufs && (pitch > 1.3 ? bufs.klaeffen : bufs.wuff);
// klaeffen.mp3 ist bereits eine ~2,8-s-Bell-SEQUENZ → nur 1× abspielen; if (buf) { // echte Aufnahme (Schäferhund, /sounds/*.mp3)
// wuff.mp3 ist ein einzelner Beller → n-mal mit Pause. // klaeffen.mp3 ist bereits eine ~2,8-s-Bell-SEQUENZ → nur 1× abspielen;
const reps = sample === files.klaeffen ? 1 : n; // wuff.mp3 ist ein einzelner Beller → n-mal mit Pause.
let i = 0; const c = _ctx();
const play = () => { const reps = buf === bufs.klaeffen ? 1 : n;
if (i++ >= reps) return; for (let i = 0; i < reps; i++) {
sample.currentTime = 0; const s = c.createBufferSource();
sample.play().catch(() => {}); s.buffer = buf;
setTimeout(play, gap * 1000 + 350); s.connect(c.destination);
}; s.start(c.currentTime + i * (buf.duration + 0.22));
play(); }
return; return;
} }
try { for (let i = 0; i < n; i++) _wuff(i * gap, pitch); } catch (e) {} for (let i = 0; i < n; i++) _wuff(i * gap, pitch); // Fallback: Synthese
} catch (e) {}
} }
return { return {
enabled, enabled,
@ -126,16 +140,7 @@ window.Page_routes = (() => {
const b = c.createBuffer(1, 1, 22050), s = c.createBufferSource(); const b = c.createBuffer(1, 1, 22050), s = c.createBufferSource();
s.buffer = b; s.connect(c.destination); s.start(0); s.buffer = b; s.connect(c.destination); s.start(0);
} catch (e) {} } catch (e) {}
// Echte Samples einmalig anfragen (404 → Synthese bleibt) _loadBufs(); // echte Samples laden (404 → Synthese bleibt)
if (files === null) {
files = {};
['wuff', 'klaeffen'].forEach(name => {
const a = new Audio(`/sounds/${name}.mp3`);
a.preload = 'auto';
a.addEventListener('canplaythrough', () => { files[name] = a; }, { once: true });
a.addEventListener('error', () => {}, { once: true });
});
}
}, },
links() { _barks(2, 1.0, 0.30); }, // 2× Wuff links() { _barks(2, 1.0, 0.30); }, // 2× Wuff
rechts() { _barks(1, 1.0, 0.30); }, // 1× Wuff rechts() { _barks(1, 1.0, 0.30); }, // 1× Wuff
@ -2198,7 +2203,9 @@ window.Page_routes = (() => {
const btn = e.currentTarget; const btn = e.currentTarget;
btn.style.color = on ? 'var(--c-primary)' : 'var(--c-text-secondary)'; btn.style.color = on ? 'var(--c-primary)' : 'var(--c-text-secondary)';
btn.querySelector('use')?.setAttribute('href', `/icons/phosphor.svg#${on ? 'speaker-high' : 'speaker-none'}`); btn.querySelector('use')?.setAttribute('href', `/icons/phosphor.svg#${on ? 'speaker-high' : 'speaker-none'}`);
if (on) { NavSound.unlock(); NavSound.rechts(); } // Probe-Wuff leicht verzögert: gibt fetch+decodeAudioData beim ERSTEN
// Einschalten die Chance, das echte Sample zu laden (sonst Synthese-Fallback).
if (on) { NavSound.unlock(); setTimeout(() => NavSound.rechts(), 450); }
UI.toast.info(on UI.toast.info(on
? 'Navi-Sounds an: 2× Wuff = links, 1× Wuff = rechts, Kläffen = falscher Weg 🐕' ? 'Navi-Sounds an: 2× Wuff = links, 1× Wuff = rechts, Kläffen = falscher Weg 🐕'
: 'Navi-Sounds aus.'); : 'Navi-Sounds aus.');

2
backend/static/landing.html
View file

@ -4,7 +4,7 @@
<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">
<meta name="color-scheme" content="light dark"> <meta name="color-scheme" content="light dark">
<script src="/js/landing-init.js?v=1243"></script> <script src="/js/landing-init.js?v=1244"></script>
<title>Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz</title> <title>Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz</title>
<meta name="description" content="Ban Yaro: Die kostenlose All-in-One Hunde-App für DACH. Tagebuch, Giftköder-Alarm, Training mit KI, Forum, Wurfbörse, Stammbaum, Inzucht-Check — DSGVO-konform, offline-fähig, ohne App Store."> <meta name="description" content="Ban Yaro: Die kostenlose All-in-One Hunde-App für DACH. Tagebuch, Giftköder-Alarm, Training mit KI, Forum, Wurfbörse, Stammbaum, Inzucht-Check — DSGVO-konform, offline-fähig, ohne App Store.">
<meta name="keywords" content="Hunde App, Hunde Community, Wurfbörse, Züchter, Welpen kaufen, Stammbaum Hund, Inzuchtkoeffizient, Hundezucht, Impfpass Hund, Giftköder Alarm, Gassi Community, Hundetraining App, Hunde Forum, Hunde KI, Hundefilm Datenbank, Welpen Marktplatz"> <meta name="keywords" content="Hunde App, Hunde Community, Wurfbörse, Züchter, Welpen kaufen, Stammbaum Hund, Inzuchtkoeffizient, Hundezucht, Impfpass Hund, Giftköder Alarm, Gassi Community, Hundetraining App, Hunde Forum, Hunde KI, Hundefilm Datenbank, Welpen Marktplatz">

2
backend/static/sw.js
View file

@ -4,7 +4,7 @@
============================================================ */ ============================================================ */
// ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab // ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab
const VER = '1243'; const VER = '1244';
const CACHE_VERSION = `by-v${VER}`; const CACHE_VERSION = `by-v${VER}`;
const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten