fix: everything working except info while phone is locked

Author: mdydek

apps/common-app/src/examples/AudioFile/AudioFile.tsx

@@ -6,17 +6,15 @@ import {
   AudioBufferSourceNode,
   AudioManager,
 } from 'react-native-audio-api';
+import { AudioPlayer } from '../../utils/AudioPlayer';
 
 import { Container, Button, Spacer, Slider } from '../../components';
 
 const URL =
   'https://software-mansion.github.io/react-native-audio-api/audio/voice/example-voice-01.mp3';
 
-const LOOP_START = 0;
-const LOOP_END = 10;
-
 const INITIAL_RATE = 1;
-const INITIAL_DETUNE = 0;
+const TRACK_LENGTH = 25;
 
 const labelWidth = 80;
 
@@ -26,72 +24,71 @@ const AudioFile: FC = () => {
 
   const [offset, setOffset] = useState(0);
   const [playbackRate, setPlaybackRate] = useState(INITIAL_RATE);
-  const [detune, setDetune] = useState(INITIAL_DETUNE);
+  const [elapsedTime, setElapsedTime] = useState(0);
 
   const [audioBuffer, setAudioBuffer] = useState<AudioBuffer | null>(null);
-
-  const audioContextRef = useRef<AudioContext | null>(null);
-  const bufferSourceRef = useRef<AudioBufferSourceNode | null>(null);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
 
   const handlePlaybackRateChange = (newValue: number) => {
     setPlaybackRate(newValue);
-
-    if (bufferSourceRef.current) {
-      bufferSourceRef.current.playbackRate.value = newValue;
-    }
+    audioPlayer.setPlaybackRate(newValue);
   };
 
-  const handleDetuneChange = (newValue: number) => {
-    setDetune(newValue);
+  const audioContext = useMemo(() => new AudioContext(), []);
+  const audioPlayer = useMemo(() => new AudioPlayer(audioContext), []);
 
-    if (bufferSourceRef.current) {
-      bufferSourceRef.current.detune.value = newValue;
+  useEffect(() => {
+    return () => {
+      audioPlayer.stop();
+      audioContext.close();
     }
-  };
+  }, []);
+
+  useEffect(() => {
+    timerRef.current = setTimeout(() => {
+      if (isPlaying) {
+        setElapsedTime((prev) => prev + 1);
+      }
+    }, 1000 / playbackRate);
+    
+    return () => clearTimeout(timerRef.current!);
+  }, [isPlaying, playbackRate, elapsedTime]);
+
+  useEffect(() => {
+      AudioManager.setLockScreenInfo({
+        elapsedTime: elapsedTime * 1000,
+      });
+      if (elapsedTime > TRACK_LENGTH) {
+        setElapsedTime(0);
+        setIsPlaying(false);
+        audioPlayer.stop();
+        AudioManager.setLockScreenInfo({
+          state: 'state_paused',
+        });
+      }
+  }, [elapsedTime]);
 
-  const handlePress = () => {
-    if (!audioContextRef.current) {
-      return;
-    }
 
+  const handlePress = useCallback(() => {
     if (isPlaying) {
-      bufferSourceRef.current?.stop(audioContextRef.current.currentTime);
+      audioPlayer.stop();
       AudioManager.setLockScreenInfo({
         state: 'state_paused',
       });
     } else {
       if (!audioBuffer) {
         fetchAudioBuffer();
       }
-
       AudioManager.setLockScreenInfo({
         state: 'state_playing',
-      });
-
-      AudioManager.observeAudioInterruptions(true);
-
-      bufferSourceRef.current = audioContextRef.current.createBufferSource({
-        pitchCorrection: true,
-      });
-      bufferSourceRef.current.buffer = audioBuffer;
-      bufferSourceRef.current.loop = true;
-      bufferSourceRef.current.onended = (event) => {
-        setOffset((_prev) => event.value || 0);
-      };
-      bufferSourceRef.current.loopStart = LOOP_START;
-      bufferSourceRef.current.loopEnd = LOOP_END;
-      bufferSourceRef.current.playbackRate.value = playbackRate;
-      bufferSourceRef.current.detune.value = detune;
-      bufferSourceRef.current.connect(audioContextRef.current.destination);
-
-      bufferSourceRef.current.start(
-        audioContextRef.current.currentTime,
-        offset
-      );
+      })
+      audioPlayer.buffer = audioBuffer!;
+      audioPlayer.playbackRate = playbackRate;
+      audioPlayer.play();
     }
 
     setIsPlaying((prev) => !prev);
-  };
+  }, [isPlaying, audioBuffer, playbackRate]);
 
   const fetchAudioBuffer = useCallback(async () => {
     setIsLoading(true);
@@ -120,7 +117,7 @@ const AudioFile: FC = () => {
       title: 'Audio file',
       artist: 'Software Mansion',
       album: 'Audio API',
-      duration: 10,
+      duration: TRACK_LENGTH,
     });
 
     const remotePlaySubscription = AudioManager.enableSystemEvent(
@@ -141,7 +138,15 @@ const AudioFile: FC = () => {
       AudioManager.enableSystemEvent(
         'remoteChangePlaybackPosition',
         (event) => {
-          console.log('remoteChangePlaybackPosition event:', event);
+          audioPlayer.stop();
+          if (isPlaying) {
+            audioPlayer.play(
+              event.value || 0
+            );
+          } else {
+            audioPlayer.offset = event.value || 0;
+          }
+          setElapsedTime(event.value || 0);
         }
       );
 
@@ -183,16 +188,6 @@ const AudioFile: FC = () => {
         step={0.25}
         minLabelWidth={labelWidth}
       />
-      <Spacer.Vertical size={20} />
-      <Slider
-        label="Detune"
-        value={detune}
-        onValueChange={handleDetuneChange}
-        min={-1200}
-        max={1200}
-        step={100}
-        minLabelWidth={labelWidth}
-      />
     </Container>
   );
 };

apps/common-app/src/utils/AudioPlayer.ts

@@ -0,0 +1,95 @@
+import { AudioContext, AudioBuffer, AudioManager, AudioBufferSourceNode } from "react-native-audio-api";
+
+export class AudioPlayer {
+  private _audioContext: AudioContext;
+  private _isPlaying: boolean;
+  private _buffer: AudioBuffer | null = null;
+  private _bufferSource: AudioBufferSourceNode | null = null;
+  private _detune: number = 0;
+  private _playbackRate: number = 1;
+  private _offset: number = 0;
+
+  constructor(audioContext: AudioContext) {
+    this._audioContext = audioContext;
+    this._isPlaying = false;
+  }
+
+  public set buffer(buffer: AudioBuffer) {
+    this._buffer = buffer;
+  }
+
+  public set offset(offset: number) {
+    this._offset = offset;
+  }
+
+  public set detune(value: number) {
+    this._detune = value;
+  }
+
+  public set playbackRate(value: number) {
+    this._playbackRate = value;
+  }
+
+  public get isPlaying(): boolean {
+    return this._isPlaying;
+  }
+
+  public play(offset?: number): void {
+    if (!this._buffer) {
+        throw new Error("Audio buffer is not set");
+    }
+    this._bufferSource?.stop(this._audioContext.currentTime);
+    this._bufferSource = this._audioContext.createBufferSource({pitchCorrection: true});
+    this._bufferSource.buffer = this._buffer;
+    this._bufferSource.playbackRate.value = this._playbackRate;
+    this._bufferSource.detune.value = this._detune;
+    this._bufferSource.onended = (event) => {
+        this._offset = event.value;
+    }
+    this._bufferSource.connect(this._audioContext.destination);
+    if (offset === undefined) {
+        this._bufferSource.start(this._audioContext.currentTime, this._offset || 0);
+    } else {
+        this._bufferSource.start(this._audioContext.currentTime, offset);
+    }
+  }
+
+  public stop(): void {
+    this._bufferSource?.stop(this._audioContext.currentTime);
+  }
+
+  public setDetune(value: number): void {
+    if (this._bufferSource) {
+      this._bufferSource.detune.value = value;
+    }
+  }
+
+  public setPlaybackRate(value: number): void {
+    if (this._bufferSource) {
+      this._bufferSource.playbackRate.value = value;
+    }
+  }
+
+  public enableLoop(loop_start: number, loop_end: number): void {
+    if (loop_start > loop_end) {
+        throw new Error("Loop start time must be less than loop end time");
+    }
+    if (this._bufferSource) {
+      this._bufferSource.loop = true;
+      this._bufferSource.loopStart = loop_start;
+      this._bufferSource.loopEnd = loop_end;
+    }
+  }
+
+  public disableLoop(): void {
+    if (this._bufferSource) {
+      this._bufferSource.loop = false;
+    }
+  }
+
+  public setOnendedCallback(callback: () => void): void {
+    if (this._bufferSource) {
+      this._bufferSource.onended = callback;
+      };
+  }
+}