Skip to content

Commit 0bc623c

Browse files
rossarmstrongrossarmstrong
committed
Add browser documentation and update main site references
- Created a new index.html for browser documentation, detailing the usage of decibri-web. - Updated the main documentation index.html to include links to browser getting started and API reference. - Enhanced navigation to include browser-related sections in both desktop and mobile menus. - Updated FAQ and comparison sections to clarify browser capabilities and recommend decibri-web for browser audio capture. - Added new entries to the sitemap for browser documentation pages.
1 parent ba01cc2 commit 0bc623c

7 files changed

Lines changed: 645 additions & 20 deletions

File tree

‎docs/docs/browser/api-reference.html‎

Lines changed: 347 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,347 @@
1+
<!DOCTYPE html>
2+
<html lang="en" data-theme="dark">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="theme-color" content="#0a0a0f" media="(prefers-color-scheme: dark)">
7+
<meta name="theme-color" content="#f8f8fb" media="(prefers-color-scheme: light)">
8+
<script>
9+
(function() {
10+
var t = localStorage.getItem('decibri-theme');
11+
if (t) document.documentElement.setAttribute('data-theme', t);
12+
else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) document.documentElement.setAttribute('data-theme', 'light');
13+
})();
14+
</script>
15+
<title>API Reference | decibri docs</title>
16+
<meta name="description" content="decibri-web API reference. Constructor options, methods, events, types, and differences from decibri for Node.js.">
17+
<meta name="robots" content="index, follow">
18+
<meta property="og:title" content="API Reference | decibri docs">
19+
<meta property="og:description" content="decibri-web API reference. Constructor options, methods, events, types, and differences from decibri for Node.js.">
20+
<meta property="og:type" content="article">
21+
<meta property="og:url" content="https://decibri.dev/docs/browser/api-reference.html">
22+
<link rel="canonical" href="https://decibri.dev/docs/browser/api-reference.html">
23+
<link rel="icon" href="/favicon.ico" type="image/x-icon">
24+
<link rel="preconnect" href="https://fonts.googleapis.com">
25+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
26+
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
27+
<link rel="stylesheet" href="../styles.css">
28+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
29+
</head>
30+
<body>
31+
32+
<nav class="docs-nav">
33+
<div class="nav-inner">
34+
<a href="/docs/index.html" class="nav-logo">deci<span>bri</span> docs</a>
35+
<div class="mobile-nav">
36+
<a href="https://github.com/analyticsinmotion/decibri-web" class="nav-cta" target="_blank" rel="noopener noreferrer" aria-label="GitHub"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg></a>
37+
<button class="mobile-nav-btn" onclick="toggleTheme()" aria-label="Toggle theme" title="Toggle theme">
38+
<svg class="icon-moon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
39+
<svg class="icon-sun" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
40+
</button>
41+
<button class="mobile-nav-btn" onclick="toggleMobileMenu()" aria-label="Open menu">
42+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
43+
</button>
44+
</div>
45+
</div>
46+
</nav>
47+
<div class="mobile-menu-overlay" onclick="toggleMobileMenu()"></div>
48+
<div class="mobile-menu"></div>
49+
<div class="sidebar-overlay"></div>
50+
<aside id="sidebar" class="sidebar"></aside>
51+
52+
<div class="doc-content">
53+
<div class="doc-container">
54+
55+
<div class="breadcrumb">
56+
<a href="/docs/index.html">Docs</a>
57+
<span class="sep">/</span>
58+
<a href="/docs/browser/index.html">Browser</a>
59+
<span class="sep">/</span>
60+
<span class="current">API Reference</span>
61+
</div>
62+
63+
<h1>API Reference</h1>
64+
<p class="lead">Complete reference for the decibri-web browser API. For installation and basic usage, see <a href="index.html">Getting Started</a>.</p>
65+
66+
<h2>Constructor</h2>
67+
<h3><code>new Decibri(options?)</code></h3>
68+
<p>Creates a new capture instance. Does not start capture. Call <code>start()</code> to begin.</p>
69+
<pre><code class="language-javascript">import { Decibri } from 'decibri-web';
70+
const mic = new Decibri(options?);</code></pre>
71+
72+
<div class="table-wrap">
73+
<table>
74+
<thead>
75+
<tr>
76+
<th>Option</th>
77+
<th>Type</th>
78+
<th>Default</th>
79+
<th>Description</th>
80+
</tr>
81+
</thead>
82+
<tbody>
83+
<tr>
84+
<td><code>sampleRate</code></td>
85+
<td><code>number</code></td>
86+
<td><code>16000</code></td>
87+
<td>Target sample rate in Hz (1,000 to 384,000)</td>
88+
</tr>
89+
<tr>
90+
<td><code>channels</code></td>
91+
<td><code>number</code></td>
92+
<td><code>1</code></td>
93+
<td>Number of channels (browsers reliably support 1)</td>
94+
</tr>
95+
<tr>
96+
<td><code>framesPerBuffer</code></td>
97+
<td><code>number</code></td>
98+
<td><code>1600</code></td>
99+
<td>Frames per chunk. 1,600 at 16 kHz = 100 ms chunks (64 to 65,536)</td>
100+
</tr>
101+
<tr>
102+
<td><code>device</code></td>
103+
<td><code>string</code></td>
104+
<td>system default</td>
105+
<td><code>deviceId</code> string from <code>Decibri.devices()</code></td>
106+
</tr>
107+
<tr>
108+
<td><code>format</code></td>
109+
<td><code>'int16' | 'float32'</code></td>
110+
<td><code>'int16'</code></td>
111+
<td>Sample encoding format</td>
112+
</tr>
113+
<tr>
114+
<td><code>vad</code></td>
115+
<td><code>boolean</code></td>
116+
<td><code>false</code></td>
117+
<td>Enable voice activity detection</td>
118+
</tr>
119+
<tr>
120+
<td><code>vadThreshold</code></td>
121+
<td><code>number</code></td>
122+
<td><code>0.01</code></td>
123+
<td>RMS energy threshold for speech detection (0 to 1)</td>
124+
</tr>
125+
<tr>
126+
<td><code>vadHoldoff</code></td>
127+
<td><code>number</code></td>
128+
<td><code>300</code></td>
129+
<td>Milliseconds of sub-threshold audio before <code>'silence'</code> is emitted</td>
130+
</tr>
131+
<tr>
132+
<td><code>echoCancellation</code></td>
133+
<td><code>boolean</code></td>
134+
<td><code>true</code></td>
135+
<td>Browser echo cancellation. Set <code>false</code> for music/tuner apps</td>
136+
</tr>
137+
<tr>
138+
<td><code>noiseSuppression</code></td>
139+
<td><code>boolean</code></td>
140+
<td><code>true</code></td>
141+
<td>Browser noise suppression. Set <code>false</code> for raw signal</td>
142+
</tr>
143+
<tr>
144+
<td><code>workletUrl</code></td>
145+
<td><code>string</code></td>
146+
<td>(inline Blob URL)</td>
147+
<td>URL for AudioWorklet processor file. Override if CSP blocks <code>blob:</code> URLs</td>
148+
</tr>
149+
</tbody>
150+
</table>
151+
</div>
152+
153+
<h2>Methods</h2>
154+
155+
<h3><code>mic.start()</code></h3>
156+
<p>Returns <code>Promise&lt;void&gt;</code>. Requests microphone permission and begins capture. Must be called from a user gesture in Safari. No-op if already started. Rejects with a clear error on permission denial.</p>
157+
158+
<h3><code>mic.stop()</code></h3>
159+
<p>Stops capture and releases all resources (tracks, context, nodes). Safe to call anytime, including before <code>start()</code> or multiple times. Emits <code>'end'</code> then <code>'close'</code>.</p>
160+
161+
<h2>Properties</h2>
162+
163+
<h3><code>mic.isOpen</code></h3>
164+
<p><code>boolean</code> (read-only). Returns <code>true</code> while actively capturing audio.</p>
165+
166+
<h2>Static methods</h2>
167+
168+
<h3><code>Decibri.devices()</code></h3>
169+
<p>Returns <code>Promise&lt;DeviceInfo[]&gt;</code>. Lists available audio input devices. Labels may be empty before microphone permission is granted.</p>
170+
<pre><code class="language-javascript">const devices = await Decibri.devices();
171+
console.log(devices);
172+
// [
173+
// { deviceId: 'abc123', label: 'Built-in Microphone', groupId: 'g1' },
174+
// ...
175+
// ]</code></pre>
176+
177+
<h3><code>Decibri.version()</code></h3>
178+
<p>Returns version information for decibri-web.</p>
179+
<pre><code class="language-javascript">Decibri.version();
180+
// { decibriWeb: '0.1.0' }</code></pre>
181+
182+
<h2>Events</h2>
183+
184+
<div class="table-wrap">
185+
<table>
186+
<thead>
187+
<tr>
188+
<th>Event</th>
189+
<th>Payload</th>
190+
<th>Description</th>
191+
</tr>
192+
</thead>
193+
<tbody>
194+
<tr>
195+
<td><code>'data'</code></td>
196+
<td><code>Int16Array</code> or <code>Float32Array</code></td>
197+
<td>Audio chunk. Format depends on <code>format</code> option. Emitted ~10 times/sec at default settings.</td>
198+
</tr>
199+
<tr>
200+
<td><code>'error'</code></td>
201+
<td><code>Error</code></td>
202+
<td>Permission denied, worklet load failure, AudioContext creation failure.</td>
203+
</tr>
204+
<tr>
205+
<td><code>'end'</code></td>
206+
<td>(none)</td>
207+
<td>Emitted after <code>stop()</code>.</td>
208+
</tr>
209+
<tr>
210+
<td><code>'close'</code></td>
211+
<td>(none)</td>
212+
<td>Emitted after <code>stop()</code>, after <code>'end'</code>.</td>
213+
</tr>
214+
<tr>
215+
<td><code>'speech'</code></td>
216+
<td>(none)</td>
217+
<td>VAD: RMS energy crossed threshold. Requires <code>vad: true</code>.</td>
218+
</tr>
219+
<tr>
220+
<td><code>'silence'</code></td>
221+
<td>(none)</td>
222+
<td>VAD: sub-threshold audio for <code>vadHoldoff</code> ms. Requires <code>vad: true</code>.</td>
223+
</tr>
224+
</tbody>
225+
</table>
226+
</div>
227+
228+
<h2>Types</h2>
229+
<pre><code class="language-javascript">// DeviceInfo
230+
{
231+
deviceId: string,
232+
label: string,
233+
groupId: string,
234+
}
235+
236+
// VersionInfo
237+
{
238+
decibriWeb: string,
239+
}</code></pre>
240+
241+
<h2>Differences from decibri (Node.js)</h2>
242+
<div class="table-wrap">
243+
<table>
244+
<thead>
245+
<tr>
246+
<th>Feature</th>
247+
<th>Node.js <code>decibri</code></th>
248+
<th><code>decibri-web</code></th>
249+
<th>Notes</th>
250+
</tr>
251+
</thead>
252+
<tbody>
253+
<tr>
254+
<td>Class name</td>
255+
<td><code>Decibri</code></td>
256+
<td><code>Decibri</code></td>
257+
<td>Identical</td>
258+
</tr>
259+
<tr>
260+
<td>Constructor</td>
261+
<td>Sync, capture starts on read</td>
262+
<td>Sync, requires <code>await start()</code></td>
263+
<td>Browser needs async permission</td>
264+
</tr>
265+
<tr>
266+
<td><code>'data'</code> payload</td>
267+
<td><code>Buffer</code></td>
268+
<td><code>Int16Array</code> / <code>Float32Array</code></td>
269+
<td>Different types, same PCM data</td>
270+
</tr>
271+
<tr>
272+
<td><code>devices()</code></td>
273+
<td>Sync</td>
274+
<td>Async (returns Promise)</td>
275+
<td>Browser API is async</td>
276+
</tr>
277+
<tr>
278+
<td><code>device</code> option</td>
279+
<td>Number index or name substring</td>
280+
<td>String <code>deviceId</code> only</td>
281+
<td>Browser uses opaque device IDs</td>
282+
</tr>
283+
<tr>
284+
<td><code>version()</code></td>
285+
<td><code>{ decibri, portaudio }</code></td>
286+
<td><code>{ decibriWeb }</code></td>
287+
<td>Different runtime info</td>
288+
</tr>
289+
<tr>
290+
<td><code>echoCancellation</code></td>
291+
<td>N/A</td>
292+
<td><code>boolean</code> (default <code>true</code>)</td>
293+
<td>Browser-only option</td>
294+
</tr>
295+
<tr>
296+
<td><code>noiseSuppression</code></td>
297+
<td>N/A</td>
298+
<td><code>boolean</code> (default <code>true</code>)</td>
299+
<td>Browser-only option</td>
300+
</tr>
301+
<tr>
302+
<td><code>'backpressure'</code> event</td>
303+
<td>Available</td>
304+
<td>Not available</td>
305+
<td>No browser equivalent</td>
306+
</tr>
307+
<tr>
308+
<td><code>pipe()</code> / streams</td>
309+
<td>Full Readable stream</td>
310+
<td>Not available</td>
311+
<td>Browser has no Node streams</td>
312+
</tr>
313+
<tr>
314+
<td><code>sampleRate</code></td>
315+
<td>Any (PortAudio resamples)</td>
316+
<td>Any (AudioWorklet resamples)</td>
317+
<td>Same behavior</td>
318+
</tr>
319+
<tr>
320+
<td><code>format</code></td>
321+
<td><code>'int16'</code> or <code>'float32'</code></td>
322+
<td><code>'int16'</code> or <code>'float32'</code></td>
323+
<td>Identical</td>
324+
</tr>
325+
<tr>
326+
<td>VAD (<code>speech</code>/<code>silence</code>)</td>
327+
<td>RMS-based</td>
328+
<td>RMS-based (same algorithm)</td>
329+
<td>Identical</td>
330+
</tr>
331+
</tbody>
332+
</table>
333+
</div>
334+
335+
<footer class="doc-footer">
336+
<p>Apache-2.0 &copy; <a href="https://analyticsinmotion.com" target="_blank" rel="noopener noreferrer">Analytics in Motion</a> &middot; <a href="https://github.com/analyticsinmotion/decibri-web" target="_blank" rel="noopener noreferrer">GitHub</a> &middot; <a href="https://www.npmjs.com/package/decibri-web" target="_blank" rel="noopener noreferrer">npm</a></p>
337+
</footer>
338+
339+
</div>
340+
</div>
341+
342+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
343+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
344+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
345+
<script src="../nav.js"></script>
346+
</body>
347+
</html>

0 commit comments

Comments
 (0)