Length of AudioBufferQueueSourceNode

[gajrajgchouhan]

Feature Request

Can we please add a length property to check how many buffer does AudioBufferQueueSourceNode holds?

[mdydek]

Can you elaborate more on your target use-case? If counting them in js, on your own, utilizing https://docs.swmansion.com/react-native-audio-api/docs/sources/audio-buffer-queue-source-node#onended- would be problematic?

[OmarThinks]

@mdydek

onEnded happens on the end of each chunk

It provides an object event, that contains only one variable

audioBufferQueueRef.current.onEnded = (event) => {
  const { bufferId } = event;
};

The bufferId
is a string, that contains a number.
This happens on the end of each chunk.

---

Suggestions:

A) on the end, adding another bufferId with a value of null or undefined.

To mark that it has stopped playing the audio, and that there is not more audio to be played.

audioBufferQueueRef.current.onEnded = (event) => {
  const { bufferId } = event;
  if (bufferId === null) {
    // developer handles the audio playing end here
  } else {
    // the audio is still playing, and there are still more items in the queue
  }
};

B) Adding another event listener:

audioBufferQueueRef.current.onEmptyQueue = (event) => {
  // Triggered when the queue is empty
};

C) Adding another key in the onEnded event (isLast):

Let this key for example be called isLast: boolean.

audioBufferQueueRef.current.onEnded = (event) => {
  const { bufferId, isLast } = event;
  if (isLast) {
    // developer handles the audio playing end here
  } else {
    // the audio is still playing, and there are still more items in the queue
  }
};

D) Adding another key in the onEnded event (currentQueueLength):

Let this key for example be called currentQueueLength: number.

audioBufferQueueRef.current.onEnded = (event) => {
  const { bufferId, currentQueueLength } = event;
  if (currentQueueLength === 0) {
    // developer handles the audio playing end here
  } else {
    // the audio is still playing, and there are still more items in the queue
  }
};

E) Adding a property to the AudioBufferQueueSourceNode (length):

Just like the queue data structure, it has length.
audioBufferQueueSourceNode.length enables us to know the length.

console.log(audioBufferQueueRef.current.length);

F) Adding a property to the AudioBufferQueueSourceNode (isPlaying):

isPlaying should be boolean, to tell us if the audio is playing or not.

console.log(audioBufferQueueRef.current.isPlaying);

---

Thanks a lot
This is a very great package! 🌹

[OmarThinks]

I found the way.

const lastBufferIdRef = useRef("");

const enqueueAudioBufferQueue = useCallback((audioBuffer: AudioBuffer) => {
  const bufferId = audioBufferQueueRef.current?.enqueueBuffer(audioBuffer); // Here
  if (bufferId) {
    lastBufferIdRef.current = bufferId;
  }
}, []);

const playAudio = useCallback(() => {
  if (audioBufferQueueRef.current) {
    audioBufferQueueRef.current.start();
    setIsAudioPlaying(true);
    audioBufferQueueRef.current.onEnded = (event) => {
      const { bufferId } = event;
      if (bufferId === lastBufferIdRef.current) {
        // Compare
        setIsAudioPlaying(false);
      }
    };
  }
}, []);

When we run enqueueBuffer, it return the buffer id.
We store this buffer id, and on the end of each chunk, we compare if this is the last buffer id or not.

This is what can be done with the latest version.

GitHub: https://github.com/OmarThinks/expo-audio-playing-and-streaming-project

Full Hook

import { useCallback, useEffect, useRef, useState } from "react";
import {
  AudioBuffer,
  AudioBufferQueueSourceNode,
  AudioContext,
} from "react-native-audio-api";

const useAudioBufferQueue = ({ sampleRate }: { sampleRate: number }) => {
  const audioContextRef = useRef<AudioContext | null>(null);
  const audioBufferQueueRef = useRef<AudioBufferQueueSourceNode | null>(null);
  const [isAudioPlaying, setIsAudioPlaying] = useState(false);
  const lastBufferIdRef = useRef("");

  const resetState = useCallback(() => {
    console.log("reset is triggered");
    setIsAudioPlaying(false);
    lastBufferIdRef.current = "";
    try {
      audioBufferQueueRef.current?.stop?.();
      audioBufferQueueRef.current?.clearBuffers?.();
    } catch {}
  }, []);

  useEffect(() => {
    resetState();
    const audioContext = new AudioContext({ sampleRate });
    const audioBufferQueue = audioContext.createBufferQueueSource();
    audioBufferQueue.connect(audioContext.destination);

    audioContextRef.current = audioContext;
    audioBufferQueueRef.current = audioBufferQueue;

    return resetState;
  }, [resetState, sampleRate]);

  const playAudio = useCallback(() => {
    if (audioBufferQueueRef.current) {
      audioBufferQueueRef.current.start();
      setIsAudioPlaying(true);
      audioBufferQueueRef.current.onEnded = (event) => {
        console.log("onEnded", event);
        const { bufferId } = event;
        if (bufferId === lastBufferIdRef.current) {
          resetState();
        }
      };
    }
  }, [resetState]);

  const enqueueAudioBufferQueue = useCallback((audioBuffer: AudioBuffer) => {
    const bufferId = audioBufferQueueRef.current?.enqueueBuffer(audioBuffer);
    console.log("enqueuedBufferId", bufferId);
    if (bufferId) {
      lastBufferIdRef.current = bufferId;
    }
  }, []);

  return {
    isAudioPlaying,
    enqueueAudioBufferQueue,
    stopPlayingAudio: resetState,
    playAudio,
  };
};

export { useAudioBufferQueue };

Full Example

import { useAudioBufferQueue } from "@/hooks/audio/useAudioBufferQueue";
import { useAudioStreamer } from "@/hooks/audio/useAudioStreamer";
import React, { useCallback } from "react";
import { Button, Text, View } from "react-native";
import { AudioBuffer } from "react-native-audio-api";

const Learn1 = () => {
  const {
    enqueueAudioBufferQueue,
    isAudioPlaying,
    playAudio,
    stopPlayingAudio,
  } = useAudioBufferQueue({ sampleRate: 16000 });

  const onAudioReady = useCallback(
    (audioBuffer: AudioBuffer) => {
      enqueueAudioBufferQueue(audioBuffer);
    },
    [enqueueAudioBufferQueue]
  );

  const { isRecording, startRecording, stopRecording } = useAudioStreamer({
    sampleRate: 16000,
    interval: 1000,
    onAudioReady,
  });

  return (
    <View
      style={{
        flex: 1,
        alignSelf: "stretch",
        alignItems: "stretch",
        justifyContent: "center",
        padding: 16,
      }}
    >
      <Button
        title={isRecording ? "Stop Recording" : "Start Recording"}
        onPress={isRecording ? stopRecording : startRecording}
      />

      {isAudioPlaying ? (
        <Button title="Stop" onPress={stopPlayingAudio} />
      ) : (
        <Button title="Play Audio Buffers" onPress={playAudio} />
      )}

      <Text>Is Audio Playing: {isAudioPlaying ? "True" : "False"}</Text>
    </View>
  );
};

export default Learn1;

[OmarThinks]

The documentation says:

https://docs.swmansion.com/react-native-audio-api/docs/sources/audio-buffer-queue-source-node#events

onEnded Overridden
Allows to set (or remove) callback that will be fired 
when queue source node has stopped playing with payload event.bufferId = undefined or 
when a specific buffer has ended with payload event.bufferId = <bufferId>.

I think that this means that, when it stops, it should trigger an event with an undefined as the bufferId.
But that doesn't happen.

Code:

audioBufferQueueRef.current.onEnded = (event) => {
  console.log(event);
};

Logs:

 LOG  {"bufferId": "0"}
 LOG  {"bufferId": "1"}
 LOG  {"bufferId": "2"}
 LOG  {"bufferId": "3"}

---

Thanks a lot! 🌹

[maciejmakowski2003]

Actually it triggers this event with bufferId = undefined only if you invoke stop method, in all other cases it triggers it when certain buffer ends. we do not want to trigger that event with undefined bufferId when we do not have more buffers in a queue and user do not call stop method

[OmarThinks]

@maciejmakowski2003
Thanks a lot! 🌹

---

The problem is that we need to know information about the status of the AudioBufferQueueSourceNode object.
We need to know anything:

• Is it playing now? (At Least)
• Or how many audio buffers are in the queue? (Optional)

Or any hint that will lead us to the fact of is audio playing or not.

The current status is that the AudioBufferQueueSourceNode doesn't expose any information about it's current state. I believe.

---

I believe that at the moment, this workaround is available:

#628 (comment)

const lastBufferIdRef = useRef("");

const enqueueAudioBufferQueue = useCallback((audioBuffer: AudioBuffer) => {
const bufferId = audioBufferQueueRef.current?.enqueueBuffer(audioBuffer); // Here
if (bufferId) {
lastBufferIdRef.current = bufferId;
}
}, []);

const playAudio = useCallback(() => {
if (audioBufferQueueRef.current) {
audioBufferQueueRef.current.start();
setIsAudioPlaying(true);
audioBufferQueueRef.current.onEnded = (event) => {
const { bufferId } = event;
if (bufferId === lastBufferIdRef.current) {
// Compare
setIsAudioPlaying(false);
}
};
}
}, []);
When we run enqueueBuffer, it return the buffer id. We store this buffer id, and on the end of each chunk, we compare if this is the last buffer id or not.

This is what can be done with the latest version.

---

Do you think any of these suggestions is valuable potential solution to the problem?

#628 (comment)

Suggestions:

A) on the end, adding another bufferId with a value of null or undefined.

To mark that it has stopped playing the audio, and that there is not more audio to be played.

audioBufferQueueRef.current.onEnded = (event) => {
const { bufferId } = event;
if (bufferId === null) {
// developer handles the audio playing end here
} else {
// the audio is still playing, and there are still more items in the queue
}
};

B) Adding another event listener:

audioBufferQueueRef.current.onEmptyQueue = (event) => {
// Triggered when the queue is empty
};

C) Adding another key in the onEnded event (isLast):

Let this key for example be called isLast: boolean.

audioBufferQueueRef.current.onEnded = (event) => {
const { bufferId, isLast } = event;
if (isLast) {
// developer handles the audio playing end here
} else {
// the audio is still playing, and there are still more items in the queue
}
};

D) Adding another key in the onEnded event (currentQueueLength):

Let this key for example be called currentQueueLength: number.

audioBufferQueueRef.current.onEnded = (event) => {
const { bufferId, currentQueueLength } = event;
if (currentQueueLength === 0) {
// developer handles the audio playing end here
} else {
// the audio is still playing, and there are still more items in the queue
}
};

E) Adding a property to the AudioBufferQueueSourceNode (length):

Just like the queue data structure, it has length. audioBufferQueueSourceNode.length enables us to know the length.

console.log(audioBufferQueueRef.current.length);

F) Adding a property to the AudioBufferQueueSourceNode (isPlaying):

isPlaying should be boolean, to tell us if the audio is playing or not.

---

This is a very great package. 🚀
Thanks a lot for your hard work! 🌹

[maciejmakowski2003]

you can track how many audio buffers are in a queue using some variable. when you enqueue you just should increment this variable and when you get onEnded you should decrement it. in addition if you store last added buffer ID, you are able to determine if queue is playing (if you get onEnded with that bufferId, it means that we have nothing to play, so it plays silence)

[maciejmakowski2003]

QueueSourceNode plays as long as you do not invoke stop or pause method. if it has nothing to play, it plays silence

[OmarThinks]

@maciejmakowski2003
Awesome.
Exposing any information about the state of the AudioBufferQueueSourceNode will be great though.

This will increase the quality of the package by letting us know more information about the state of the object.
If possible, you can write it once, in an error prone way, and this will facilitate using the package.
But we managing the state on every implementation is error prone.

Thanks a lot! 🌹

[maciejmakowski2003]

okey, will add it via onPositionChanged event. it would be more aligned with our vision

[OmarThinks]

@maciejmakowski2003

Thanks a lot!
I'm so grateful! 🌹 🌹 🌹

[maciejmakowski2003]

sending state like playing/paused/stopped/empty would be enough?

[OmarThinks]

Yup
That will do 🌹
Thanks a lot! 🌹