我如何使用 Resonance Audio 的 setPosition 来定义一个音频源在 javascript 画布元素上的位置，单位是像素（x,y）？

Question

我有一个基于画布的二维网络音频游戏，其中包括使用网络音频api在画布上的特定像素坐标上的空间化音源。

虽然我已经成功地使用网络音频pannerNode在画布元素上精确地定位了每个音源，就像这样。

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);
  };

我现在试图使用Resonance Audio Web SDK升级音频空间化，这样我就可以使用其更高级的音频空间化特性。

我如何使用Resonance Audio的setPosition来定义画布元素上音频源的像素（x,y）位置？

我似乎不知道如何将 Resonance Audio 的原生刻度（米）转换为画布元素上的像素坐标。我想如果我能解决这个问题，我就可以在2D游戏中定义不同音频室的大小和位置，这将是非常酷的。

谢谢，我有一个基于二维画布的二维游戏。

Answer 1

所以，事实证明，如果你得到画布上的像素坐标，在那里你想定位你的音源，然后使用相同的单位（像素）来定位和更新监听器的位置，那么一切都很好。只要你对你的音源和你的听众使用相同的单位，那么他们就会保持相对的关系，共振音频空间化就会工作。

// 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);