Skip to content

Commit 5f8d9ff

Browse files
committed
chore(audio-context): update readme
1 parent f58d704 commit 5f8d9ff

1 file changed

Lines changed: 142 additions & 1 deletion

File tree

packages/audio-context/README.md

Lines changed: 142 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,150 @@
11
# @nativescript/audio-context
22

3-
```javascript
3+
Web Audio API style audio graph support for NativeScript (iOS and Android).
4+
5+
This package provides a native-backed `AudioContext`/`OfflineAudioContext` with common Web Audio nodes so you can keep a familiar Web Audio programming model in NativeScript apps.
6+
7+
## Installation
8+
9+
```bash
10+
ns plugin add @nativescript/audio-context
11+
```
12+
13+
or
14+
15+
```bash
416
npm install @nativescript/audio-context
517
```
618

19+
## Quick Start
20+
21+
```ts
22+
import { AudioContext } from '@nativescript/audio-context';
23+
24+
const ctx = new AudioContext({ latencyHint: 'interactive' });
25+
26+
const osc = ctx.createOscillator({ type: 'sine', frequency: 440 });
27+
const gain = ctx.createGain({ gain: 0.12 });
28+
29+
osc.connect(gain);
30+
gain.connect(ctx.destination);
31+
32+
await ctx.resume();
33+
osc.start();
34+
35+
setTimeout(async () => {
36+
osc.stop();
37+
await ctx.close();
38+
}, 1200);
39+
```
40+
41+
## Decode And Play Audio
42+
43+
`decodeAudioData` supports:
44+
45+
- App-relative file paths (`~/...`)
46+
- `file://` paths
47+
- Other string sources handled by native decoders (for example URL/data string inputs)
48+
- `ArrayBuffer` / `ArrayBufferView`
49+
50+
```ts
51+
import { AudioContext } from '@nativescript/audio-context';
52+
53+
const ctx = new AudioContext({ latencyHint: 'playback' });
54+
await ctx.resume();
55+
56+
const buffer = await ctx.decodeAudioData('~/assets/file-assets/audio/sine441stereo.mp3');
57+
58+
const source = ctx.createBufferSource();
59+
source.buffer = buffer;
60+
source.connect(ctx.destination);
61+
source.start();
62+
63+
source.onended = async () => {
64+
await ctx.close();
65+
};
66+
```
67+
68+
## Media Element Source
69+
70+
Use `createMediaElementSource` to route a media element/player through the audio graph.
71+
72+
```ts
73+
import { AudioContext } from '@nativescript/audio-context';
74+
import { Audio } from '@nativescript/canvas-media';
75+
76+
const ctx = new AudioContext();
77+
await ctx.resume();
78+
79+
const media = new Audio();
80+
media.src = '~/assets/file-assets/audio/gs-16b-1c-44100hz.wav';
81+
media.loop = true;
82+
83+
const mediaSource = ctx.createMediaElementSource(media);
84+
const panner = ctx.createPanner({ panningModel: 'equalpower' });
85+
86+
mediaSource.connect(panner);
87+
panner.connect(ctx.destination);
88+
89+
await media.play();
90+
91+
// Cleanup when done.
92+
media.pause();
93+
await ctx.close();
94+
```
95+
96+
## Offline Rendering
97+
98+
```ts
99+
import { OfflineAudioContext } from '@nativescript/audio-context';
100+
101+
const sampleRate = 44100;
102+
const seconds = 2;
103+
const off = new OfflineAudioContext(1, sampleRate * seconds, sampleRate);
104+
105+
const osc = off.createOscillator({ type: 'sine', frequency: 440 });
106+
const gain = off.createGain({ gain: 0.2 });
107+
108+
osc.connect(gain);
109+
gain.connect(off.destination);
110+
osc.start();
111+
112+
const rendered = await off.startRendering();
113+
console.log(rendered.length, rendered.sampleRate, rendered.numberOfChannels);
114+
```
115+
116+
## Supported API Surface
117+
118+
Main contexts:
119+
120+
- `AudioContext`
121+
- `OfflineAudioContext`
122+
123+
Core graph primitives:
124+
125+
- `AudioNode`, `AudioParam`, `AudioBuffer`
126+
- `AudioBufferSourceNode`, `MediaElementAudioSourceNode`
127+
- `GainNode`, `BiquadFilterNode`, `PannerNode`, `StereoPannerNode`, `DelayNode`
128+
- `ConstantSourceNode`, `OscillatorNode`
129+
- `AnalyserNode`, `WaveShaperNode`, `IIRFilterNode`, `ConvolverNode`, `PeriodicWave`
130+
131+
Context lifecycle and routing:
132+
133+
- `resume()`, `suspend()`, `close()`
134+
- `state`, `onstatechange`
135+
- `sinkId`, `setSinkId(deviceId)`
136+
137+
## Optional: Global Polyfill Integration
138+
139+
If you also use `@nativescript/canvas-polyfill`, it can register Web Audio globals such as:
140+
141+
- `AudioContext`
142+
- `webkitAudioContext`
143+
- `OfflineAudioContext`
144+
- node constructors (`GainNode`, `PannerNode`, etc.)
145+
146+
This is useful when running libraries that expect browser-like globals.
147+
7148
## License
8149

9150
Apache License Version 2.0

0 commit comments

Comments
 (0)