How can I define the position of an audio source on a javascript canvas element in pixels (x,y) with Resonance Audio's setPosition?

Question

I have a 2d canvas based web audio game which includes spatialised audio sources situated at specific pixel coordinates on the canvas using the web audio api.

Whilst I have successfully managed to locate each audio source precisely on the canvas element using the web audio pannerNode like so:

var canvas = document.getElementById("map");
var context = canvas.getContext("2d");
function audioFileLoader(fileDirectory) {
  var soundObj = {};
  var playSound = undefined;
  var panner = undefined;
  var gainNode = undefined;
  var getSound = new XMLHttpRequest();
  soundObj.fileDirectory = fileDirectory;
  getSound.open("GET", soundObj.fileDirectory, true);
  getSound.responseType = "arraybuffer";
  getSound.onload = function() {
audioContext.decodeAudioData(getSound.response, function(buffer) { soundObj.soundToPlay = buffer;
}); };
  getSound.send();
panner = audioContext.createPanner();
panner.panningModel = 'HRTF'; 

  soundObj.position = function(x,y,z) {
      panner.setPosition(x,y,z);
  };

I am now attempting to upgrade the audio spatialisation using the Resonance Audio Web SDK so I can use its arguably more advanced audio spatialisation characteristics.

How can I define the position of the audio sources on the canvas element in pixels (x,y) with Resonance Audio's setPosition?

I can't seem to work out how to convert the native Resonance Audio scale (meters) into pixel coords on my canvas element. I'm assuming that if I can solve this I then define the size and locations of different audio rooms within the 2d game, which would be very cool.

Thanks.

Answer 1

So, turns out if you get the coords on the canvas in pixels where you want to locate your sources, then use the same units (pixels) to locate and update the position of the listener then all is well. As long as you use the same units for your sources and your listener, then they remain relative to each other and the resonance audio spatialisation works:

// Set some global variables            
            var canvas = document.getElementById("map");
            var context = canvas.getContext("2d");
            var mouseX;
            var mouseY;

// Map event functions 

// Get mouse coordinates on the map element

            function updateCoords() {
                mouseX = event.offsetX;
                mouseY = event.offsetY;
            }

// Create mouse event functions

            function moveAroundMap(event) {
                updateCoords();
                mapX.innerText = mouseX;
                mapY.innerText = mouseY;

// Update the listener position on the canvas in pixels (x,y)
                resonanceAudioScene.setListenerPosition(mouseX,mouseY,-20); // elevate the listener rather than lowering the sources
            }

            map.addEventListener("mousemove", moveAroundMap, false);


// Create an AudioContext
        let audioContext = new AudioContext();

        // Create a (third-order Ambisonic) Resonance Audio scene and pass it
        // the AudioContext.
        let resonanceAudioScene = new ResonanceAudio(audioContext);
        resonanceAudioScene.setAmbisonicOrder(3);

        // Connect the scene’s binaural output to stereo out.
        resonanceAudioScene.output.connect(audioContext.destination);

        // Create an AudioElement.
        let audioElement = document.createElement('audio');

        // Load an audio file into the AudioElement.
        audioElement.src = './samples/mono-seagulls.mp3';
        audioElement.loop = true;

        // Generate a MediaElementSource from the AudioElement.
        let audioElementSource = audioContext.createMediaElementSource(audioElement);

        // Add the MediaElementSource to the scene as an audio input source.
        let source = resonanceAudioScene.createSource();
        audioElementSource.connect(source.input);

        // Set the source position relative to the listener
        source.setPosition(140, 150, 0);