Git Product home page Git Product logo

Comments (6)

tonetechnician avatar tonetechnician commented on July 1, 2024 1

I needed to change the audioContext destination channel count, for some reason it defaulted to 2. I found that I needed to ensure the channel count was set to the number of channels on the destination device, in my case 8 channels, otherwise the channel mapping would go funny. If you have a 4 channel soundcard it would need to be 4 channels.

So referring to the vs-pannernode.js example. I added in some lines that would take the raw ambisonic output from the foaScene audio processor. I have added comments next to my changes. If you'd like the full file I can upload it to my git.

function initAudio() {
  // Create <audio> streaming audio source.
  audioContext = new (window.AudioContext || window.webkitAudioContext);
  console.log(audioContext)
  audioContext.destination.channelCount = 8;  // Set the number of channels on the sound card
  let audioSource = 'resources/cube-sound.wav';
  audioElement = document.createElement('audio');
  audioElement.src = audioSource;
  audioElement.crossOrigin = 'anonymous';
  audioElement.load();
  audioElement.loop = true;
  audioElementSource =
    audioContext.createMediaElementSource(audioElement);

  // Create gain nodes.
  noneGain = audioContext.createGain();
  pannerGain = audioContext.createGain();
  foaGain = audioContext.createGain();
  toaGain = audioContext.createGain();
  ambioutGain = audioContext.createGain(); // Created RAW Ambisonic output gain node.
  ambioutGain.channelCount = 4;  // Ensure it is set to 4 channels
  // Initialize scene and create Source(s).
  // Initialize PannerNode/Listener
  foaScene = new ResonanceAudio(audioContext, {
    ambisonicOrder: 1,
    dimensions: {
      width: 0,
      height: 0,
      depth: 0,
    },
    materials: {
      left: 'transparent',
      right: 'transparent',
      front: 'transparent',
      back: 'transparent',
      up: 'transparent',
      down: 'transparent',
    }
  });
  console.log("foa")
  console.log(foaScene);
  toaScene = new ResonanceAudio(audioContext, {ambisonicOrder: 3});
  pannerNode = audioContext.createPanner();
  pannerNode.panningModel = 'HRTF';
  pannerNode.distanceModel = 'inverse';
  pannerNode.refDistance = ResonanceAudio.Utils.DEFAULT_MIN_DISTANCE;
  pannerNode.maxDistance = ResonanceAudio.Utils.DEFAULT_MAX_DISTANCE;
  foaSource = foaScene.createSource();
  toaSource = toaScene.createSource();

  // Connect audio graph.
  audioElementSource.connect(noneGain);
  audioElementSource.connect(pannerNode);
  audioElementSource.connect(foaSource.input);
  audioElementSource.connect(toaSource.input);
  pannerNode.connect(pannerGain);
  foaScene.output.connect(foaGain);
  toaScene.output.connect(toaGain);

  console.log(foaScene);
  console.log(foaScene.ambisonicOutput);

  foaScene.ambisonicOutput.connect(ambioutGain);  // Connect the 4 channel 'ambisonicOutput' from the foaScene to my ambisonic Gain node

  noneGain.connect(audioContext.destination);
  pannerGain.connect(audioContext.destination);
  foaGain.connect(audioContext.destination);
  toaGain.connect(audioContext.destination);

  ambioutGain.connect(audioContext.destination); // Connect the gain node to the soundcard

  audioReady = true;
  selectRenderingMode();
}

Hope this helps!

from resonance-audio-web-sdk.

tonetechnician avatar tonetechnician commented on July 1, 2024 1

Hey there @scriptify - must be honest, it's been a little while since I looked at this code, but I believe it would support other layouts.

You'll just need to figure what the channel mapping is for your surround channels, but I don't see it any different. Just add the resonance web audio decoder, set the channel count, and let it decode. If I get a chance I'll have a quick look to check.

from resonance-audio-web-sdk.

tonetechnician avatar tonetechnician commented on July 1, 2024

Sorry, I realized this was simply because my audioContext was not setup to handle 4 channels. This works as it should!

from resonance-audio-web-sdk.

iooops avatar iooops commented on July 1, 2024

Hi same issue here.

So how did you get the expected output finally?

from resonance-audio-web-sdk.

scriptify avatar scriptify commented on July 1, 2024

@tonetechnician Nice! Do you know if the same technique could also be used to make ResonanceAudio compatible with different speaker layouts like 5.1 or 7.1?

from resonance-audio-web-sdk.

scriptify avatar scriptify commented on July 1, 2024

Sounds logic! Would be cool if it could be used with Apple's Spatial Audio feature. I don't own AirPods myself so I need to borrow some and try it out. Thanks for your answer.

It would also be cool to look into other methods of mimicing the listener's head position, but that's beyond that thread.

from resonance-audio-web-sdk.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.