Как я могу определить положение источника звука на элементе холста javascript в пикселях (x, y) с помощью setPosition Resonance Audio? - PullRequest
Новая
       117

Как я могу определить положение источника звука на элементе холста javascript в пикселях (x, y) с помощью setPosition Resonance Audio?

0 голосов
/ 30 мая 2020
• 1000 именно на элементе холста с помощью узла панорамирования веб-аудио, например: 
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, чтобы я мог использовать его, возможно, более продвинутые характеристики пространственного звучания *. 1006 *

Как я могу определить положение источников звука на элементе холста в пикселях (x, y) с помощью setPosition Resonance Audio?

Кажется, я не могу понять, как преобразовать собственный Масштаб резонансного звука (в метрах) в пиксельных координатах на моем элементе холста. Я предполагаю, что если я смогу решить эту проблему, я затем определю размер и расположение различных аудиозал в 2-й игре, что было бы очень круто.

Спасибо.

1 Ответ

0 голосов
/ 31 мая 2020

Итак, получается, если вы получаете координаты на холсте в пикселях, в которых вы хотите разместить свои источники, а затем используете те же единицы (пиксели) для определения местоположения и обновления позиции слушателя, тогда все в порядке. Пока вы используете одни и те же единицы для источников и слушателя, они остаются относительно друг друга, и работает резонансное пространственное звучание: 

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