-
Notifications
You must be signed in to change notification settings - Fork 9
/
LocalAudioTrack.tsx
85 lines (71 loc) · 2.34 KB
/
LocalAudioTrack.tsx
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
import type { ILocalAudioTrack } from "agora-rtc-sdk-ng";
import type { ReactNode } from "react";
import { useEffect } from "react";
import { useAwaited } from "../hooks/tools";
import type { MaybePromiseOrNull } from "../misc/utils";
import { useAutoPlayAudioTrack } from "./TrackBoundary";
export interface LocalAudioTrackProps {
/**
* The local audio track to be played. Call [`useLocalMicrophoneTrack`](https://api-ref.agora.io/en/video-sdk/reactjs/2.x/functions/useLocalMicrophoneTrack.html) to create a local audio track.
*/
readonly track?: MaybePromiseOrNull<ILocalAudioTrack>;
/**
* `true`: Play the track.`false`: Stop playing the track.
*/
readonly play?: boolean;
/**
* The volume. The value ranges from 0 (mute) to 1000 (maximum). A value of 100 is the original volume. When set to above 100, the SDK applies volume amplification using the [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API).
*/
readonly volume?: number;
/**
* `true`: Disable the track. When disabled, the SDK stops playing and publishing the track.`false`: Enable the track.
*/
readonly disabled?: boolean;
/**
* `true`: Pause sending media data of the track.`false`: Resume sending media data of the track.
*/
readonly muted?: boolean;
/**
* The React nodes to be rendered.
*/
readonly children?: ReactNode;
}
/**
* This component plays the local audio track using the playback device selected by the user in the browser.
* @example
* ```jsx
* import { LocalAudioTrack, useLocalAudioTrack } from "agora-rtc-react";
*
* function App() {
* const audioTrack = useLocalAudioTrack();
* return <LocalAudioTrack track={audioTrack} play />;
* }
* ```
*/
export function LocalAudioTrack({
track: maybeTrack,
play = false,
volume,
disabled,
muted,
children,
}: LocalAudioTrackProps) {
const track = useAwaited(maybeTrack);
useAutoPlayAudioTrack(track, play);
useEffect(() => {
if (track && volume != null) {
track.setVolume(volume);
}
}, [track, volume]);
useEffect(() => {
if (track && disabled != null) {
track.setEnabled(!disabled).catch(console.warn);
}
}, [disabled, track]);
useEffect(() => {
if (track && muted != null) {
track.setMuted(muted).catch(console.warn);
}
}, [muted, track]);
return children ? <>{children}</> : null;
}