Skip to content

docs: rest of sources #525

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions packages/audiodocs/docs/core/base-audio-context.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,13 @@ The above method lets you create [`AudioBufferSourceNode`](/sources/audio-buffer

#### Returns `AudioBufferSourceNode`.


### `createBufferQueueSource`

The above method lets you create [`AudioBufferQueueSourceNode`](/sources/audio-buffer-queue-source-node).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

some note about "mobile only" could be nice


#### Returns `AudioBufferQueueSourceNode`.

### `createGain`

The above method lets you create [`GainNode`](/effects/gain-node).
Expand Down
48 changes: 48 additions & 0 deletions packages/audiodocs/docs/sources/audio-buffer-base-source-node.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
---
sidebar_position: 4
---

import { Optional, Experimental } from '@site/src/components/Badges';

# AudioBufferBaseSourceNode

The `AudioBufferBaseSourceNode` interface is an [`AudioScheduledSourceNode`](/sources/audio-scheduled-source-node) which aggregates behavior of nodes that requires [`AudioBuffer`](/sources/audio-buffer).
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why dont we move playbackRate and detune properties to AudioBufferBaseSourceNode section? There are common for all nodes using AudioBuffers


Child classes:
- [`AudioBufferSourceNode`](/sources/audio-buffer-source-node)
- [`AudioBufferQueueSourceNode`](/sources/audio-buffer-queue-source-node)

## Events

### `onPositionChanged` <Experimental />

Allow to set (or remove) callback that will be fired after processing certain part of an audio.
Frequency is defined by `onPositionChangedInterval`. By setting this callback you can achieve pause functionality.

### `onPositionChangedInterval` <Experimental />

Allow to set frequency for `onPositionChanged` event. Value that can be set is around `1000/x` Hz.

```ts
import { AudioContext, AudioBufferSourceNode } from 'react-native-audio-api';

function App() {
const ctx = new AudioContext();
const audioBufferBaseSourceNode = ctx.createBufferSource();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually we cannot create AudioBufferBaseSourceNode, so lets change the naming to source / sourceNode

audioBufferBaseSourceNode.buffer = null; //set your buffer
let offset = 0;

audioBufferSourceNode.onPositionChanged = (event) => { //setting callback
this.offset = event.value;
};

audioBufferSourceNode.onPositionChangedInterval = 100; //setting frequency to ~10Hz

audioBufferSourceNode.onPositionChanged = null; //removing callback
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure if it is a great place to show how to remove callback, If I were you, I will add it to the description of callbacks

audioBufferBaseSourceNode.start();
}
```

:::caution
Tested only on Android and iOS.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is Android and iOS only, we do not have stubs for web -> we have to add them, hence I will change it to mobile only feature or Android and iOS only

:::
51 changes: 51 additions & 0 deletions packages/audiodocs/docs/sources/audio-buffer-queue-source-node.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
---
sidebar_position: 3
---

import { Optional, Experimental } from '@site/src/components/Badges';

# AudioBufferQueueSourceNode

The `AudioBufferQueueSourceNode` is an [`AudioBufferBaseSourceNode`](/sources/audio-buffer-base-source-node) which represents player that consists of many short buffers.

## Constructor

[`BaseAudioContext.createBufferQueueSource()`](/core/base-audio-context#createbuffersource)

## Example

```tsx
import React, { useRef } from 'react';
import {
AudioContext,
AudioBufferQueueSourceNode,
} from 'react-native-audio-api';

function App() {
const audioContextRef = useRef<AudioContext | null>(null);
if (!audioContextRef.current) {
audioContextRef.current = new AudioContext();
}
const audioBufferQueue = audioContextRef.current.createBufferQueueSource();
const buffer1 = ...; // Load your audio buffer here
const buffer2 = ...; // Load another audio buffer if needed
audioBufferQueue.enqueueBuffer(buffer1, false);
audioBufferQueue.enqueueBuffer(buffer2, true); // Last buffer should be marked as is
audioBufferQueue.connect(audioContextRef.current.destination);
audioBufferQueue.start(audioContextRef.current.currentTime);
}
```

## Methods

### `enqueueBuffer`

The above method lets you add another buffer to queue.

| Parameters | Type | Description |
| :---: | :---: | :---- |
| `buffer` | [`AudioBuffer`](/sources/audio-buffer) | Buffer with next data. |
| `isLastBuffer` | `boolean` | Boolean indicating if it is a last buffer. Default value is `false` |
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it is my responsibility, but it could be great to describe what it gives -> queue will stop if buffer with isLastBuffer = true will end.


#### Returns `undefined`.

26 changes: 23 additions & 3 deletions packages/audiodocs/docs/sources/audio-buffer-source-node.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { Optional, Overridden } from '@site/src/components/Badges';

# AudioBufferSourceNode

The `AudioBufferSourceNode` is an [`AudioScheduledSourceNode`](/sources/audio-scheduled-source-node) which represents audio source with in-memory audio data, stored in `AudioBuffer`.
The `AudioBufferSourceNode` is an [`AudioBufferBaseSourceNode`](/sources/audio-buffer-base-source-node) which represents audio source with in-memory audio data, stored in `AudioBuffer`.
You can use it for audio playback, including standard pause and resume functionalities.

An `AudioBufferSourceNode` can be started only once, so if you want to play the same sound again you have to create a new one.
Expand All @@ -21,17 +21,37 @@ However, this node is very inexpensive to create, and what is crucial you can re

[`BaseAudioContext.createBufferSource(options)`](/core/base-audio-context#createbuffersource)

## Example

```tsx
import React, { useEffect, useRef, FC } from 'react';
import {
AudioContext,
AudioBufferSourceNode,
} from 'react-native-audio-api';

function App() {
const audioContextRef = useRef<AudioContext | null>(null);
if (!audioContextRef.current) {
audioContextRef.current = new AudioContext();
}
const audioBufferSource = audioContextRef.current.createBufferSource();
const buffer = ...; // Load your audio buffer here
audioBufferSource.buffer = buffer;
audioBufferSource.connect(audioContextRef.current.destination);
audioBufferSource.start(audioContextRef.current.currentTime);
}
```

## Properties

| Name | Type | Description |
| :----: | :----: | :-------- |
| `buffer` | [`AudioBuffer`](/sources/audio-buffer) | Associated `AudioBuffer`. |
| `detune` | [`AudioParam`](/core/audio-param) | [`k-rate`](/core/audio-param#a-rate-vs-k-rate) `AudioParam` representing detuning of oscillation in cents. |
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AudioBufferBaseSourceNode does not have these props

| `loop` | `boolean` | Boolean indicating if audio data must be replayed after when end of the associated `AudioBuffer` is reached. |
| `loopSkip` | `boolean` | Boolean indicating if upon setting up `loopStart` we want to skip immediately to the loop start. |
| `loopStart` | `number` | Float value indicating the time, in seconds, at which playback of the audio must begin, if loop is true. |
| `loopEnd` | `number` | Float value indicating the time, in seconds, at which playback of the audio must end and loop back to `loopStart`, if loop is true. |
| `playbackRate` | [`AudioParam`](/core/audio-param) | [`k-rate`](/core/audio-param#a-rate-vs-k-rate) `AudioParam` defining speed factor at which the audio will be played. |

## Methods

Expand Down
19 changes: 9 additions & 10 deletions packages/audiodocs/docs/sources/audio-scheduled-source-node.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
sidebar_position: 3
sidebar_position: 4
---

import { Optional, Experimental } from '@site/src/components/Badges';
Expand All @@ -9,6 +9,10 @@ import { Optional, Experimental } from '@site/src/components/Badges';
The `AudioScheduledSourceNode` interface is an [`AudioNode`](/core/audio-node) which serves as a parent interface for several types of audio source nodes.
It provides ability to start and stop audio playback.

Child classes:
- [`AudioBufferBaseSourceNode`](/sources/audio-buffer-base-source-node)
- [`OscillatorNode`](/sources/oscillator-node)

## Methods

### `start`
Expand Down Expand Up @@ -51,19 +55,14 @@ If you invoke this method multiple times on the same node before the designated

### `onended` <Experimental />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it is not experimental any more


Above callback is fired when source node has stopped playing.
By setting this callback you can achieve pause functionality.
Allow to set (or remove) callback that will be fired when source node has stopped playing.

```ts
const [offset, setOffset] = useState(0);

/* ... */

audioBufferSourceNode.onended = (stopTime?: number) => {
setOffset((_prev) => stopTime || 0);
audioBufferSourceNode.onended = () => { //setting callback
console.log("audio ended");
};

source.start(context.currentTime, offset)
audioBufferSourceNode.onended = null; //removing callback
```

:::caution
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we have the same impl on web

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I mean :::caution part

Expand Down
22 changes: 9 additions & 13 deletions packages/audiodocs/docs/sources/oscillator-node.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
sidebar_position: 4
sidebar_position: 5
---

import AudioNodePropsTable from "@site/src/components/AudioNodePropsTable"
Expand All @@ -21,24 +21,20 @@ Similar to all of `AudioScheduledSourceNodes`, it can be started only once. If y
## Example

```tsx
import React, { useEffect, useRef, FC } from 'react';
import React, { useRef } from 'react';
import {
AudioContext,
OscillatorNode,
} from 'react-native-audio-api';

export default MyComponent: FC = () => {
function App() {
const audioContextRef = useRef<AudioContext | null>(null);

useEffect(() => {
if (!audioContextRef.current) {
audioContextRef.current = new AudioContext();
}
const oscillator = audioContextRef.current.createOscillator();
oscillator.connect(audioContextRef.current.destination);
oscillator.start(audioContextRef.current.currentTime);
}
)
if (!audioContextRef.current) {
audioContextRef.current = new AudioContext();
}
const oscillator = audioContextRef.current.createOscillator();
oscillator.connect(audioContextRef.current.destination);
oscillator.start(audioContextRef.current.currentTime);
}
```

Expand Down