Início / coding / Perguntas / 79319624
Accepted
ph3rin
Asked: 2024-12-31 17:27:22 +0800 CST

Por que o nó de ganho do WebAudio pode misturar várias entradas quando ele tem apenas uma entrada?

  • 772

Eu estava tentando encontrar uma maneira de mixar fluxos de áudio com WebAudio e gravá-los com um MediaRecorder. Tenho seguido a abordagem descrita aqui:

Grave várias faixas de áudio disponíveis em um fluxo com o MediaRecorder

Parece que um nó de ganho (no exemplo deles, o nó de destino) pode executar mixagem em vários fluxos, como mostrado pelo meu experimento abaixo. No exemplo, você pode ouvir o tema Caribbean Pirates e o tema Universal Studios tocando quando você aperta o recordbotão.

Entretanto, no MDN diz que o nó de ganho (assim como o nó de destino) tem uma contagem de entrada de 1 .

Número de entradas = 1 insira a descrição da imagem aqui

Intuitivamente, algo com uma única entrada não pode executar mixagem! Estou esquecendo de algo aqui?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web Audio Track Recorder</title>
</head>
<body>
  <h1>Web Audio Track Recorder</h1>
  <button id="recordButton">Start Recording</button>
  <script src="script.js"></script>
</body>
</html>

script.js

// URLs of the audio tracks:
const track1Url = 'https://archive.org/download/tvtunes_13046/Pirates%20of%20the%20Caribbean%20-%20Hes%20a%20Pirate.mp3';
const track2Url = 'https://archive.org/download/tvtunes_7590/Universal%20Studios.mp3';

// Initialize variables
let audioContext;
let source1, source2;
let mediaRecorder;
let audioChunks = [];
let isRecording = false;

// Function to start the audio context and load tracks
async function startAudio() {
  audioContext = new (window.AudioContext || window.webkitAudioContext)();

  // Load and decode the audio tracks
  const track1Data = await fetch(track1Url).then(response => response.arrayBuffer());
  const track2Data = await fetch(track2Url).then(response => response.arrayBuffer());

  const track1Buffer = await audioContext.decodeAudioData(track1Data);
  const track2Buffer = await audioContext.decodeAudioData(track2Data);

  // Create buffer sources
  source1 = audioContext.createBufferSource();
  source2 = audioContext.createBufferSource();

  source1.buffer = track1Buffer;
  source2.buffer = track2Buffer;

  // Create a gain node to control the volume
  const gainNode = audioContext.createGain();
  gainNode.gain.setValueAtTime(0.25, audioContext.currentTime);

  // Connect sources to the gain node
  source1.connect(gainNode);
  source2.connect(gainNode);

  // Connect gain node to the destination (speakers)
  gainNode.connect(audioContext.destination);

  // Create a MediaStream from the audio context
  const destination = audioContext.createMediaStreamDestination();
  gainNode.connect(destination);

  // Initialize MediaRecorder with the audio stream
  mediaRecorder = new MediaRecorder(destination.stream);

  // Event handler for when data is available
  mediaRecorder.ondataavailable = event => {
    audioChunks.push(event.data);
  };

  // Event handler for when recording stops
  mediaRecorder.onstop = () => {
    const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
    const audioUrl = URL.createObjectURL(audioBlob);
    const downloadLink = document.createElement('a');
    downloadLink.href = audioUrl;
    downloadLink.download = 'recording.webm';
    downloadLink.click();
    audioChunks = [];
  };

  // Start the sources
  source1.start();
  source2.start();
}

// Function to toggle recording
function toggleRecording() {
  if (!isRecording) {
    if (!audioContext) {
      startAudio().then(() => {
        mediaRecorder.start();
        document.getElementById('recordButton').textContent = 'Stop Recording';
      });
    } else {
      mediaRecorder.start();
      document.getElementById('recordButton').textContent = 'Stop Recording';
    }
  } else {
    mediaRecorder.stop();
    document.getElementById('recordButton').textContent = 'Start Recording';
  }
  isRecording = !isRecording;
}

// Add event listener to the record button
document.getElementById('recordButton').addEventListener('click', toggleRecording);

Você também pode tentar aqui: https://jsfiddle.net/10ms7pyd/8/

javascript

1 respostas

  1. Best Answer

    Encontrei a seção que especifica esse comportamento na especificação. Houve alguma confusão com a conexão de entrada, a saber:

    Você PODE ter múltiplas conexões com o mesmo nó de entrada! Nesse caso, o que a API fará é:

    1. Converta todos os sinais conectados para ter o número de canais que correspondem ao número de canais requeridos pela entrada. Por exemplo, se eu tiver um sinal mono, e a entrada exigir estéreo, ele será transformado em um sinal estéreo com ambos os canais iguais ao canal único do mono.

    2. Então, todos os sinais de entrada, agora com o mesmo número de canais, serão simplesmente somados.

    Você pode encontrar o processo detalhado na especificação: channel-up-mixing-and-down-mixing .

    • 1

relate perguntas