|
1 | 1 | # @nativescript/audio-context |
2 | 2 |
|
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 |
4 | 16 | npm install @nativescript/audio-context |
5 | 17 | ``` |
6 | 18 |
|
| 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 | + |
7 | 148 | ## License |
8 | 149 |
|
9 | 150 | Apache License Version 2.0 |
0 commit comments