Support volume prop audio player (#952)

* support volume prop * add adjust volume example
draftbit · Oct 6, 2024 · a5f0084 · a5f0084
1 parent 18fd15a
commit a5f0084
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git a/example/src/AudioPlayerExample.tsx b/example/src/AudioPlayerExample.tsx
@@ -25,6 +25,14 @@ export default function AudioPlayerExample() {
           isLooping
         />
       </Section>
+      <Section style={{}} title="Adjust volume">
+        <AudioPlayer
+          source={require("./assets/loop.wav")}
+          playsInBackground
+          interruptionMode="stop"
+          volume={0.3}
+        />
+      </Section>
       <Section style={{}} title="Custom styling">
         <AudioPlayer
           style={{

diff --git a/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerCommon.ts b/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerCommon.ts
@@ -9,6 +9,7 @@ export interface HeadlessAudioPlayerProps extends MediaPlayerProps {
   playsInSilentModeIOS?: boolean;
   playThroughEarpieceAndroid?: boolean;
   isLooping?: boolean;
+  volume?: number;
 }
 
 export interface AudioPlayerInterfaceProps {

diff --git a/packages/core/src/components/MediaPlayer/AudioPlayer/HeadlessAudioPlayer.tsx b/packages/core/src/components/MediaPlayer/AudioPlayer/HeadlessAudioPlayer.tsx
@@ -32,6 +32,7 @@ const HeadlessAudioPlayer = React.forwardRef<
       onPlaybackStatusUpdate: onPlaybackStatusUpdateProp,
       onPlaybackFinish,
       isLooping = false,
+      volume = 1.0,
     },
     ref
   ) => {
@@ -47,6 +48,12 @@ const HeadlessAudioPlayer = React.forwardRef<
       }
     }, [currentSound, isLooping]);
 
+    React.useEffect(() => {
+      if (currentSound && typeof currentSound?.setVolumeAsync === "function") {
+        currentSound.setVolumeAsync(volume);
+      }
+    }, [currentSound, volume]);
+
     const updateAudioMode = React.useCallback(async () => {
       try {
         await Audio.setAudioModeAsync({