Bibimbap/debug-audio.html at main · kdklv/Bibimbap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>audio debug</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      background: #080c14; color: #e8eaf0;
      font-family: ui-monospace, 'Menlo', monospace;
      font-size: 13px; height: 100%; overflow: hidden;
    }
    #log {
      position: fixed; inset: 0; bottom: 116px;
      overflow-y: auto; padding: 12px 14px;
      -webkit-overflow-scrolling: touch;
    }
    .entry { padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.05); line-height: 1.5; word-break: break-all; }
    .entry.info  { color: #a0c4ff; }
    .entry.ok    { color: #6be89b; }
    .entry.warn  { color: #ffd97d; }
    .entry.error { color: #ff6b6b; }
    .entry.muted { color: rgba(232,234,240,0.35); }
    .ts { color: rgba(255,255,255,0.25); margin-right: 6px; }

    #meter {
      position: fixed; bottom: 116px; left: 0; right: 0; height: 6px;
      background: rgba(255,255,255,0.05);
    }
    #meter-bar {
      height: 100%; width: 0%; background: #6be89b;
      transition: width 0.05s linear;
    }

    #controls {
      position: fixed; bottom: 0; left: 0; right: 0; height: 110px;
      display: grid; grid-template-columns: 1fr 1fr 1fr;
      gap: 7px; padding: 8px 10px;
      background: rgba(8,12,20,0.95);
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    button {
      background: rgba(160,196,255,0.10); border: 1px solid rgba(160,196,255,0.28);
      color: #a0c4ff; font-family: inherit; font-size: 11px;
      border-radius: 6px; cursor: pointer;
      -webkit-tap-highlight-color: transparent; touch-action: manipulation;
      padding: 6px 4px; line-height: 1.3; text-align: center;
    }
    button:active { background: rgba(160,196,255,0.25); }
    button.primary { background: rgba(160,196,255,0.20); border-color: rgba(160,196,255,0.6); font-weight: 600; }
    button.warn    { background: rgba(255,217,125,0.12); border-color: rgba(255,217,125,0.5); color: #ffd97d; }
  </style>
</head>
<body>

<div id="log"></div>
<div id="meter"><div id="meter-bar"></div></div>

<div id="controls">
  <button class="primary" id="btn-init">1. Init Audio</button>
  <button id="btn-webaudio">2. WebAudio Note</button>
  <button id="btn-htmlaudio">3. &lt;audio&gt; Beep</button>
  <button id="btn-measure">4. Measure Signal</button>
  <button id="btn-state">5. Check State</button>
  <button id="btn-clear">Clear</button>
</div>

<script>
// ─── Logger ────────────────────────────────────────────────────────────────
const logEl    = document.getElementById('log');
const meterBar = document.getElementById('meter-bar');
const t0 = Date.now();

function log(msg, level = 'info') {
  const ms  = ((Date.now() - t0) / 1000).toFixed(2);
  const div = document.createElement('div');
  div.className = `entry ${level}`;
  div.innerHTML = `<span class="ts">+${ms}s</span>${esc(msg)}`;
  logEl.appendChild(div);
  logEl.scrollTop = logEl.scrollHeight;
}
function esc(s) {
  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

// ─── Device info ───────────────────────────────────────────────────────────
log('— device info —', 'muted');
log(`UA: ${navigator.userAgent}`, 'muted');

// Parse iOS version from UA
const iosMatch = navigator.userAgent.match(/OS (\d+)[_.](\d+)/);
if (iosMatch) {
  log(`iOS version: ${iosMatch[1]}.${iosMatch[2]}`, 'info');
} else if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
  log('iOS detected but version not parsed', 'warn');
} else {
  log('not iOS', 'muted');
}

log(`maxTouchPoints: ${navigator.maxTouchPoints}`, 'muted');
log(`AudioContext: ${'AudioContext' in window}`, 'AudioContext' in window ? 'ok' : 'error');
log(`webkitAudioContext: ${'webkitAudioContext' in window}`, 'muted');

// ─── State ────────────────────────────────────────────────────────────────
let audioCtx  = null;
let masterOut = null;
let analyser  = null;
let analyserData = null;
let meterTimer = null;

// ─── 1. Init ──────────────────────────────────────────────────────────────
function initAudio() {
  if (audioCtx) { log('already inited — state: ' + audioCtx.state, 'warn'); return; }

  try {
    const Ctor = window.AudioContext || window.webkitAudioContext;
    audioCtx = new Ctor();
    log(`AudioContext created — state: ${audioCtx.state}`, audioCtx.state === 'running' ? 'ok' : 'warn');
    log(`sampleRate: ${audioCtx.sampleRate} Hz`, 'muted');
  } catch(e) { log(`new AudioContext() threw: ${e}`, 'error'); return; }

  // resume() — called synchronously within gesture, log promise result
  const p = audioCtx.resume();
  if (p && p.then) {
    p.then(() => log(`resume() resolved — state: ${audioCtx.state}`, audioCtx.state === 'running' ? 'ok' : 'warn'))
     .catch(e => log(`resume() rejected: ${e}`, 'error'));
  }

  // Build graph:  masterOut → analyser → destination
  try {
    masterOut = audioCtx.createGain();
    masterOut.gain.value = 0.7;

    analyser = audioCtx.createAnalyser();
    analyser.fftSize = 256;
    analyserData = new Float32Array(analyser.fftSize);

    masterOut.connect(analyser);
    analyser.connect(audioCtx.destination);

    log('graph: osc→gain→masterOut→analyser→destination', 'ok');
  } catch(e) { log(`graph setup threw: ${e}`, 'error'); }

  // Background-resume handlers
  document.addEventListener('visibilitychange', () => {
    log(`visibilitychange hidden=${document.hidden} state=${audioCtx?.state}`, 'info');
    if (!document.hidden && audioCtx?.state === 'suspended') audioCtx.resume();
  });
  window.addEventListener('pageshow', () => {
    if (audioCtx?.state === 'suspended') audioCtx.resume();
  });

  log('init done — tap "2. WebAudio Note" to test', 'ok');
  log('⚠️  if no sound: check mute switch & volume!', 'warn');
}

// ─── 2. WebAudio Note ──────────────────────────────────────────────────────
function playWebAudio() {
  if (!audioCtx) { log('run Init first', 'error'); return; }

  log(`ctx state: ${audioCtx.state}  currentTime: ${audioCtx.currentTime.toFixed(4)}`, 'info');

  if (audioCtx.state === 'suspended') {
    log('suspended — calling resume() now', 'warn');
    audioCtx.resume()
      .then(() => log(`resumed — state: ${audioCtx.state}`, 'ok'))
      .catch(e => log(`resume failed: ${e}`, 'error'));
  }

  try {
    const t    = audioCtx.currentTime;
    // Schedule slightly ahead to avoid t=0 edge case on iOS
    const start = Math.max(t, t + 0.05);

    const osc  = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc.type = 'sine';
    osc.frequency.value = 440;
    gain.gain.setValueAtTime(0.0001, start);
    gain.gain.linearRampToValueAtTime(0.7, start + 0.05);
    gain.gain.exponentialRampToValueAtTime(0.0001, start + 0.8);
    osc.connect(gain);
    gain.connect(masterOut);
    osc.start(start);
    osc.stop(start + 0.9);
    osc.onended = () => log('osc.onended fired — note finished', 'ok');

    log(`osc.start(${start.toFixed(4)})  osc.stop(${(start+0.9).toFixed(4)})`, 'ok');
    log('you should hear A4 (440 Hz) for ~0.8s', 'ok');

    // Start level meter
    startMeter();

  } catch(e) { log(`playWebAudio threw: ${e}`, 'error'); }
}

// ─── 3. <audio> element test ───────────────────────────────────────────────
// Generate a minimal WAV in-memory so we don't need a server
function playHtmlAudio() {
  log('— <audio> element test —', 'muted');
  try {
    const wav  = makeSineWav(440, 1.0);
    const url  = URL.createObjectURL(wav);
    const el   = new Audio(url);
    el.oncanplaythrough = () => log('<audio> canplaythrough', 'info');
    el.onplay  = () => log('<audio> play event fired', 'ok');
    el.onended = () => { log('<audio> ended — did you hear it?', 'ok'); URL.revokeObjectURL(url); };
    el.onerror = (e) => log(`<audio> error: ${el.error?.message ?? e}`, 'error');
    const pp = el.play();
    if (pp && pp.then) {
      pp.then(() => log('<audio>.play() promise resolved', 'ok'))
        .catch(e => log(`<audio>.play() rejected: ${e}`, 'error'));
    }
    log('HTMLAudioElement.play() called — listen for beep', 'info');
  } catch(e) { log(`<audio> test threw: ${e}`, 'error'); }
}

// Minimal PCM WAV encoder
function makeSineWav(freq, duration, sr = 44100) {
  const n   = Math.floor(sr * duration);
  const buf = new ArrayBuffer(44 + n * 2);
  const v   = new DataView(buf);
  const str = (off, s) => { for (let i=0;i<s.length;i++) v.setUint8(off+i, s.charCodeAt(i)); };
  str(0,  'RIFF'); v.setUint32(4,  36 + n*2, true);
  str(8,  'WAVE'); str(12, 'fmt ');
  v.setUint32(16, 16, true);   // chunk size
  v.setUint16(20, 1,  true);   // PCM
  v.setUint16(22, 1,  true);   // mono
  v.setUint32(24, sr, true);   // sample rate
  v.setUint32(28, sr*2, true); // byte rate
  v.setUint16(32, 2,  true);   // block align
  v.setUint16(34, 16, true);   // bits per sample
  str(36, 'data'); v.setUint32(40, n*2, true);
  for (let i=0; i<n; i++) {
    // Fade in/out to avoid clicks
    const env = Math.min(i/sr*4, 1, (n-i)/sr*4);
    const s   = Math.sin(2*Math.PI*freq*i/sr) * env * 0.6;
    v.setInt16(44 + i*2, Math.round(s * 32767), true);
  }
  return new Blob([buf], { type: 'audio/wav' });
}

// ─── 4. Measure signal ────────────────────────────────────────────────────
function measureSignal() {
  if (!analyser) { log('run Init first', 'error'); return; }
  log('— reading AnalyserNode (10 samples × 200ms) —', 'muted');
  let count = 0;
  const iv = setInterval(() => {
    analyser.getFloatTimeDomainData(analyserData);
    let peak = 0;
    for (let i = 0; i < analyserData.length; i++)
      peak = Math.max(peak, Math.abs(analyserData[i]));
    const dB = peak > 0 ? (20 * Math.log10(peak)).toFixed(1) : '-∞';
    const bar = Math.min(100, peak * 200);
    meterBar.style.width = bar + '%';
    meterBar.style.background = peak > 0.01 ? '#6be89b' : '#ff6b6b';
    const level = peak > 0.001 ? 'ok' : (peak > 0 ? 'warn' : 'error');
    log(`peak: ${peak.toFixed(6)}  (${dB} dBFS)  ${peak > 0.001 ? '✓ SIGNAL' : peak > 0 ? '~ weak' : '✗ SILENCE'}`, level);
    if (++count >= 10) clearInterval(iv);
  }, 200);
}

function startMeter() {
  if (meterTimer) clearInterval(meterTimer);
  let ticks = 0;
  meterTimer = setInterval(() => {
    if (!analyser) return;
    analyser.getFloatTimeDomainData(analyserData);
    let peak = 0;
    for (let i = 0; i < analyserData.length; i++) peak = Math.max(peak, Math.abs(analyserData[i]));
    meterBar.style.width = Math.min(100, peak * 300) + '%';
    meterBar.style.background = peak > 0.01 ? '#6be89b' : (peak > 0 ? '#ffd97d' : '#ff6b6b');
    if (++ticks > 40) { clearInterval(meterTimer); meterTimer = null; meterBar.style.width = '0%'; }
  }, 50);
}

// ─── 5. State snapshot ────────────────────────────────────────────────────
function checkState() {
  log('— state snapshot —', 'muted');
  if (!audioCtx) { log('audioCtx: null', 'warn'); return; }
  log(`state: ${audioCtx.state}`, audioCtx.state === 'running' ? 'ok' : 'warn');
  log(`currentTime: ${audioCtx.currentTime.toFixed(4)}`, 'muted');
  log(`sampleRate: ${audioCtx.sampleRate}`, 'muted');
  log(`document.hidden: ${document.hidden}`, 'muted');
  if (analyser) {
    analyser.getFloatTimeDomainData(analyserData);
    let peak = 0;
    for (let i = 0; i < analyserData.length; i++) peak = Math.max(peak, Math.abs(analyserData[i]));
    log(`analyser peak right now: ${peak.toFixed(6)}`, peak > 0.001 ? 'ok' : 'muted');
  }
}

// ─── Buttons ──────────────────────────────────────────────────────────────
document.getElementById('btn-init').addEventListener('pointerdown', e => { e.preventDefault(); initAudio(); });
document.getElementById('btn-webaudio').addEventListener('pointerdown', e => { e.preventDefault(); playWebAudio(); });
document.getElementById('btn-htmlaudio').addEventListener('pointerdown', e => { e.preventDefault(); playHtmlAudio(); });
document.getElementById('btn-measure').addEventListener('pointerdown', e => { e.preventDefault(); measureSignal(); });
document.getElementById('btn-state').addEventListener('pointerdown', e => { e.preventDefault(); checkState(); });
document.getElementById('btn-clear').addEventListener('pointerdown', e => {
  e.preventDefault(); logEl.innerHTML = ''; log('cleared', 'muted');
});

window.addEventListener('error', e => log(`uncaught: ${e.message} (${e.filename}:${e.lineno})`, 'error'));
window.addEventListener('unhandledrejection', e => log(`unhandled rejection: ${e.reason}`, 'error'));
</script>
</body>
</html>