Estudio de la Web audio API. El nodo de Paneado. Percepción espacial del sonido

Descripción

La percepción espacial del sonido es un elemento importante en el desarrollo de juegos o aplicaciones de audio. La Web Audio API nos permite a través del AudioPannerNode trabajar la espacialidad del sonido. Mediante sus métodos y atributos podemos parametrizar la posición de la fuente y conseguir un ambiente sonoro en 2D o incluso en 3D.

Posición relativa del oyente

Pan L- R:: 0
Pan eje Y:: 0
Pan eje Z:: 0

Volumen:

x 1_+0dB
Zoom

Tamaño de la muestra de frecuencia 2*∫ +

Si escuchas este ejemplo con tus auriculares estéreo, advertirás que mediante los 3 controles espaciales del panner, podrás variar la percepción izquierda-derecha de la fuente (L-R) la posición enaltura (eje Y) y la posición relativa frente a ti, delate o detrás (eje Z).

Profundizando en el PannerNode encontraremos atributos y métodos que incrementan la complejidad de la percepción espacial del sonido, como:

Constantes que definen e tipo de algoritmo o panningModel a utilizar en la espacialización, a elegir entre paneados equipotenciales o algoritmos complejos de alta calidad o HRTF.
Posición y orientación de las fuentes y los oyentes.
Atributos asociados con fuentes direccionales, especificaremos, por ejemplo un coneInnerAngle o ángulo del conos de radiación, en el cual no habrá reducción de nivel.
Métodos que determinan la posición, orientación relativas de las fuentes y los oyentes.
El método setVelocity sirve para declarar el vector de velocidad de la fuente de audio, este vector controlará tanto la dirección como la velocidad en un entorno 3D y determinará la cantida de efecto doppler a aplicar.

En el ejemplo hemos utilizado el método setPosition(x, y, z); del nodo de paneado o AudioPannerNode para conseguir espacialidad en la percepción del sonido. Podríamos haber utilizado la interfaz AudioListener que usa tambien un sistema cartesiano de coordenadas para establecer la posición relativa del oyente frente a la fuente, entre otras variables, y exteinde las posibilidades de la espacialización del sonido con la Web Audio API.

El siguiente fragmento de código muestra cómo asignamos los valores de los sliders (aquí potenciómetros) HTML al método setPosition del nodo de Paneado. Así descriiremos la posición relativa de la fuente frente al oyente. Los valores oscilarán entre 1 y -1, teniendo como centro a posición (0,0,0).


                      //creamos el panner
          panner = contextoDeAudio.createPanner();
          // Ajustamos los valores del nodo a los del potenciómetro
          // Panner
          var panX = document.querySelector('#pan').value;
          var panY = document.querySelector('#pany').value;
          var panZ = document.querySelector('#panz').value;
          panner.setPosition(panX, panY, panZ);
          // x,y,z representan las coordenadas en el espacio del oyente

Para graficar los valores de nuestra cadena de datos creamos una función de dibujo utilizando el elemento <canvas> que recorra este array de datos y los imprima en pantalla

  


function cadenaDeAudio(source) {
    //Declaración de nodos en función de navegador...
	if (esFirefox) { contextoDeAudio.volumen = contextoDeAudio.createGain();}else{
    contextoDeAudio.volumen = contextoDeAudio.createGainNode();}
    contextoDeAudio.panner = contextoDeAudio.createPanner();
    contextoDeAudio.analizador = contextoDeAudio.createAnalyser();
    //Analizador
    contextoDeAudio.analizador.smoothingTimeConstant = 0.3;
    contextoDeAudio.analizador.fftSize = 1024;
    contextoDeAudio.analizador.minDecibels = -120;
    contextoDeAudio.analizador.maxDecibels = 0;
    // Ajustamos los valores del nodo a los del potenciómetro
    // Panner
    //oyente
    var panX = document.querySelector('#pan').value;
    var panY = document.querySelector('#pany').value;
    var panZ = document.querySelector('#panz').value;
    contextoDeAudio.panner.setPosition(panX, panY, panZ); // xy z representan las coordenadas en el espacio del oyente
    //posición donde apunta el cono de radiación (0,0,0)= directo a la fuente
/*var ejeX = document.querySelector('#ejex').value;
			var ejeY = document.querySelector('#ejey').value;
			var ejeZ = document.querySelector('#ejez').value;
			contextoDeAudio.panner.setOrientation(ejeX, ejeY, ejeZ);
			//Diagrama de radiación (ángulo de la fuente) fuera de este ángulo se aplica reducción
			//var angulo = document.querySelector('#angulo').value;
			//contextoDeAudio.panner.coneOuterAngle(angulo);
			//Cuanta reducciñon se aplica
			//var atenuacion = document.querySelector('#atenuacion').value;
			//contextoDeAudio.panner.coneOuterGain(atenuacion);*/
    //ajustes de volumen
    var volumen = document.querySelector('#volumen').value;
    contextoDeAudio.volumen.gain.value = volumen;
    //Ruteo
    source.connect(contextoDeAudio.volumen);
    contextoDeAudio.volumen.connect(contextoDeAudio.panner);
    contextoDeAudio.panner.connect(contextoDeAudio.analizador);
    contextoDeAudio.panner.connect(contextoDeAudio.destination);
    return source;
}

function dibujaEspectro() {
    ctxe.clearRect(0, 0, ancho, alto);
    var datos_frecuencia = new Uint8Array(contextoDeAudio.analizador.frequencyBinCount);
    contextoDeAudio.analizador.getByteFrequencyData(datos_frecuencia);
    var NumerodeBarras = Math.round(ancho / resolucion);
    for (var i = 0; i < NumerodeBarras; i++) {
        //for (var i = 0; i < (datos_frecuencia.length); i++) {
        var magnitud = datos_frecuencia[i];
        // ajustamos las variables para dibujarlas en el canvas
        //dibujamos tipo hue ;)
        var hue = i / datos_frecuencia.length * 360
        ctxe.fillStyle = 'hsl(' + hue + ', 100%, 50%)';
        ctxe.fillRect(resolucion * i, alto, resolucion - 2, -magnitud + 60);
    }
   //Actualizamos la barra de progreso en tiempo real
	actualiza_barra(retardo);
	//Cremao el bucle de RequestAnimationFrame invocando de nuevo a la función.
	requestAnimationFrame(dibujaEspectro.bind(this));
}


function potenciometro(slider) {
    if (contextoDeAudio.activeSourceCount > 0) {
        if (slider.id == 'pan' || slider.id == 'pany' || slider.id == 'panz') {
            var panX = document.querySelector('#pan').value;
            var panY = document.querySelector('#pany').value;
            var panZ = document.querySelector('#panz').value;
            $('#valorx').html(panX);
            $('#valory').html(panY);
            $('#valorz').html(panZ);
            contextoDeAudio.panner.setPosition(panX, panY, panZ);
        } else if (slider.id == 'volumen') {
             var volumen = slider.value;
            contextoDeAudio.volumen.gain.value = volumen;
            $('#varvol').html(volumen);
			//Lineal a dB
            dBs = 20 * Math.log(volumen) / Math.LN10;
			 $('#dBvol').html(dBs.toFixed(2));
        } else if (slider.id == 'ejex' || slider.id == 'ejey' || slider.id == 'ejez') {
            var ejeX = document.querySelector('#ejex').value;
            var ejeY = document.querySelector('#ejey').value;
            var ejeZ = document.querySelector('#ejez').value;
            $('#valorejex').html(ejeX);
            $('#valorejey').html(ejeY);
            $('#valorejez').html(ejeZ);
            contextoDeAudio.panner.setOrientation(ejeX, ejeY, ejeZ);
        } else if (slider.id == 'angulo') {
            var angulo = slider.value;
            contextoDeAudio.panner.coneOuterAngle.value = angulo;
            $('#valorangulo').html(angulo);
        } else if (slider.id == 'atenuacion') {
            var atenuacion = slider.value;
            contextoDeAudio.panner.coneOuterGain.value = atenuacion;
            $('#valoratenuacion').html(atenuacion);
        }
    }
}

Paneado espacial

Descripción

Posición relativa del oyente