[AudioBufferSourceNode] add detune, playbackRate, loopStart, loopEnd parameters (#233)

* feat: base parameter setters

* feat: audio params

* fix: conflict

* feat: missing interface

* feat: frame-accurate start stop

* feat: handle absn loops and playback rate

* fix: loop loop

* chore: testing

* fix: absn looping

* chore: update coverage

Author: michalsek

apps/common-app/src/examples/Piano/PianoNote.tsx

@@ -20,7 +20,7 @@ class PianoNote {
   }
 
   start(bufferList: Record<string, AudioBuffer>) {
-    const { buffer /*, playbackRate */ } = getSource(bufferList, this.key);
+    const { buffer, playbackRate } = getSource(bufferList, this.key);
 
     if (!buffer) {
       return;
@@ -30,6 +30,7 @@ class PianoNote {
 
     this.bufferSource = this.audioContext.createBufferSource();
     this.bufferSource.buffer = buffer;
+    this.bufferSource.playbackRate.value = playbackRate;
 
     this.gain = this.audioContext.createGain();
     this.gain.gain.setValueAtTime(0.001, this.audioContext.currentTime);

apps/common-app/src/examples/Piano/utils.ts

@@ -43,7 +43,7 @@ export const sourcesTeda: Partial<Record<KeyName, string>> = {
   'B4': 'https://michalsek.github.io/audio-samples/piano/12_B4.mp3',
 };
 
-export const sources = sourcesTeda;
+export const sources = sourcesTone;
 
 export const keyMap: KeyMap = {
   'C4': {

docs/web-audio-coverage.md

@@ -69,11 +69,11 @@ Some of the noticeable implementation details that are still in progress or not
 | Property 🔹/ Method 🔘 | state |
 | ---------------------- | ----- |
 | 🔹 buffer              | ✅    |
-| 🔹 detune              | ❌    |
+| 🔹 detune              | ✅    |
 | 🔹 loop                | ✅    |
-| 🔹 loopStart           | ❌    |
-| 🔹 loopEnd             | ❌    |
-| 🔹 playBackRate        | ❌    |
+| 🔹 loopStart           | ✅    |
+| 🔹 loopEnd             | ✅    |
+| 🔹 playBackRate        | ✅    |
 | 🔘 start(overridden)   | ❌    |
 
 </div>

packages/react-native-audio-api/common/cpp/HostObjects/AudioBufferSourceNodeHostObject.cpp

@@ -1,11 +1,17 @@
 #include "AudioBufferSourceNodeHostObject.h"
+#include "AudioParamHostObject.h"
 
 namespace audioapi {
 using namespace facebook;
 
 AudioBufferSourceNodeHostObject::AudioBufferSourceNodeHostObject(
     const std::shared_ptr<AudioBufferSourceNodeWrapper> &wrapper)
-    : AudioScheduledSourceNodeHostObject(wrapper) {}
+    : AudioScheduledSourceNodeHostObject(wrapper) {
+  auto detuneParam = wrapper->getDetuneParam();
+  detuneParam_ = AudioParamHostObject::createFromWrapper(detuneParam);
+  auto playbackRateParam = wrapper->getPlaybackRateParam();
+  playbackRateParam_ = AudioParamHostObject::createFromWrapper(playbackRateParam);
+}
 
 std::shared_ptr<AudioBufferSourceNodeWrapper> AudioBufferSourceNodeHostObject::
     getAudioBufferSourceNodeWrapperFromAudioNodeWrapper() {
@@ -17,6 +23,10 @@ std::vector<jsi::PropNameID> AudioBufferSourceNodeHostObject::getPropertyNames(
   std::vector<jsi::PropNameID> propertyNames =
       AudioScheduledSourceNodeHostObject::getPropertyNames(runtime);
   propertyNames.push_back(jsi::PropNameID::forAscii(runtime, "loop"));
+  propertyNames.push_back(jsi::PropNameID::forAscii(runtime, "loopStart"));
+  propertyNames.push_back(jsi::PropNameID::forAscii(runtime, "loopEnd"));
+  propertyNames.push_back(jsi::PropNameID::forAscii(runtime, "detune"));
+  propertyNames.push_back(jsi::PropNameID::forAscii(runtime, "playbackRate"));
   propertyNames.push_back(jsi::PropNameID::forAscii(runtime, "buffer"));
   propertyNames.push_back(jsi::PropNameID::forAscii(runtime, "resetBuffer"));
   return propertyNames;
@@ -33,6 +43,26 @@ jsi::Value AudioBufferSourceNodeHostObject::get(
     return {loop};
   }
 
+  if (propName == "loopStart") {
+    auto wrapper = getAudioBufferSourceNodeWrapperFromAudioNodeWrapper();
+    auto loopStart = wrapper->getLoopStart();
+    return {loopStart};
+  }
+
+  if (propName == "loopEnd") {
+    auto wrapper = getAudioBufferSourceNodeWrapperFromAudioNodeWrapper();
+    auto loopEnd = wrapper->getLoopEnd();
+    return {loopEnd};
+  }
+
+  if (propName == "detune") {
+    return jsi::Object::createFromHostObject(runtime, detuneParam_);
+  }
+
+  if (propName == "playbackRate") {
+    return jsi::Object::createFromHostObject(runtime, playbackRateParam_);
+  }
+
   if (propName == "buffer") {
     auto wrapper = getAudioBufferSourceNodeWrapperFromAudioNodeWrapper();
     auto buffer = wrapper->getBuffer();
@@ -60,6 +90,18 @@ void AudioBufferSourceNodeHostObject::set(
     return;
   }
 
+  if (propName == "loopStart") {
+    auto wrapper = getAudioBufferSourceNodeWrapperFromAudioNodeWrapper();
+    wrapper->setLoopStart(value.getNumber());
+    return;
+  }
+
+  if (propName == "loopEnd") {
+    auto wrapper = getAudioBufferSourceNodeWrapperFromAudioNodeWrapper();
+    wrapper->setLoopEnd(value.getNumber());
+    return;
+  }
+
   if (propName == "buffer") {
     auto wrapper = getAudioBufferSourceNodeWrapperFromAudioNodeWrapper();
 

packages/react-native-audio-api/common/cpp/HostObjects/AudioBufferSourceNodeHostObject.h

@@ -10,6 +10,8 @@
 namespace audioapi {
 using namespace facebook;
 
+class AudioParamHostObject;
+
 class AudioBufferSourceNodeHostObject
     : public AudioScheduledSourceNodeHostObject {
  public:
@@ -31,7 +33,11 @@ class AudioBufferSourceNodeHostObject
   }
 
  private:
+  std::shared_ptr<AudioParamHostObject> detuneParam_;
+  std::shared_ptr<AudioParamHostObject> playbackRateParam_;
+
   std::shared_ptr<AudioBufferSourceNodeWrapper>
   getAudioBufferSourceNodeWrapperFromAudioNodeWrapper();
 };
+
 } // namespace audioapi

packages/react-native-audio-api/common/cpp/HostObjects/Constants.h

@@ -10,6 +10,8 @@ constexpr int SAMPLE_RATE = 44100;
 constexpr int CHANNEL_COUNT = 2;
 constexpr float MOST_POSITIVE_SINGLE_FLOAT =
     static_cast<float>(std::numeric_limits<float>::max());
+constexpr float MOST_NEGATIVE_SINGLE_FLOAT =
+    static_cast<float>(std::numeric_limits<float>::lowest());
 constexpr float NYQUIST_FREQUENCY = SAMPLE_RATE / 2.0;
 static float MAX_DETUNE = 1200 * std::log2(MOST_POSITIVE_SINGLE_FLOAT);
 constexpr float MAX_GAIN = MOST_POSITIVE_SINGLE_FLOAT;