es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cambio de volumen para una de las fuentes en la API de WebAudio

28 Jul, 2023 Programación

Estoy leyendo este artículo.

Mi objetivo es reproducir dos sonidos al mismo tiempo. Un sonido tiene un volumen diferente. El uso de etiquetas de audio regulares no es una solución porque no funciona bien en dispositivos móviles. Así que comencé a investigar sobre la API de Web Audio.

Escribí el siguiente código, que funciona bien en todos los dispositivos. El único problema es que no puedo averiguar cómo controlar el volumen. El código del ejemplo no funciona.

Por favor, ayuda 🙏

function init() {
  // Solucionar los prefijos
  window.AudioContext = window.AudioContext || window.webkitAudioContext;
  context = new AudioContext();
  bufferLoader = new BufferLoader(
    context,
    [
      'mp3/speech.mp3',
      'mp3/bg-melody.mp3',
    ],
    finishedLoading
  );

  bufferLoader.load();
}

function finishedLoading(bufferList) {
   document.querySelector('.message').innerHTML = "Listo para reproducir";
  // Crear dos fuentes y reproducirlas al mismo tiempo.
  source1 = context.createBufferSource();
  source2 = context.createBufferSource();
  source1.buffer = bufferList[0];
  source2.buffer = bufferList[1];
  source1.connect(context.destination);

  // Este código no está funcionando
  var gainNode = context.createGain();
  gainNode.gain.value = 0.1;
  source2.connect(gainNode);
  source2.connect(context.destination);
  source2.loop = true;
}

Actualización:

Este cambio solucionó el problema:

source2.connect(gainNode).connect(context.destination);
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para controlar el volumen del segundo sonido en el código proporcionado, se necesita crear un nodo de ganancia (GainNode) y conectarlo a la segunda fuente. En el código actual, se crea un nodo de ganancia y se establece el valor de ganancia en 0.1, pero la segunda fuente solo está conectada al nodo de destino del contexto, no al nodo de ganancia. Por lo tanto, el control de volumen no funciona.

    Para solucionar esto, la segunda fuente debe estar conectada al nodo de ganancia y luego el nodo de ganancia debe estar conectado al nodo de destino del contexto. Esto se puede lograr utilizando el método connect() del nodo de ganancia. El fragmento de código actualizado es el siguiente:

    function finishedLoading(bufferList) {
   document.querySelector('.message').innerHTML = "Listo para reproducir";
  // Crear dos fuentes y reproducirlas juntas.
  source1 = context.createBufferSource();
  source2 = context.createBufferSource();
  source1.buffer = bufferList[0];
  source2.buffer = bufferList[1];
  source1.connect(context.destination);

  // Crear un nodo de ganancia para controlar el volumen
  var gainNode = context.createGain();
  gainNode.gain.value = 0.1;
  // Conectar la segunda fuente al nodo de ganancia y el nodo de ganancia al nodo de destino del contexto
  source2.connect(gainNode).connect(context.destination);
  source2.loop = true;
}

    Al encadenar el método connect() del nodo de ganancia después del método connect() de la segunda fuente, primero se conecta la segunda fuente al nodo de ganancia y luego el nodo de ganancia se conecta al nodo de destino del contexto. Esto permite que el nodo de ganancia controle el volumen de la segunda fuente.

Comments are closed.