Определите высоту живого аудио входа в браузере

Question

Как вы можете определить высоту живого аудиовхода в браузере?

Приведенный ниже код даст вам 1024 значения частоты.Однако я не знаю, как перейти от этого к фактическим шагам (например, A #).

const audioContext = new window.AudioContext();
const analyser = audioContext.createAnalyser();

navigator.getUserMedia(
  { audio: true },
  stream => {
    audioContext.createMediaStreamSource(stream).connect(analyser);

    const dataArray = new Uint8Array(analyser.frequencyBinCount);

    analyser.getByteTimeDomainData(dataArray);

    // Log the contents of the analyzer ever 500ms. 
    setInterval(() => {
      console.log(dataArray.length);
    }, 500);
  },
  err => console.log(err)
);

Answer 1

То, к чему вы сейчас обращаетесь, - это данные домена времени, и его нельзя использовать для извлечения заметки (которая, кажется, вам нужна).

То, что вам нужно, - это домен частот, используя AnalyserNode.get [XXX] FrequencyData , из которого можно узнать, какие частоты громче или тише.

Однако, поскольку большая часть звука состоит из гармоний, вы не можете извлечь то, что note было воспроизведено с микрофона, добавьте к этому, что у нас есть доступ только к ограниченному разрешению, и не толькоВы не сможете извлечь заметку из микрофона, но даже не из виртуального осциллятора.

Ниже приведен пример из этого Q / A и примеров из MDN.;

const canvasCtx = canvas.getContext('2d');
const WIDTH = canvas.width = 500;
const HEIGHT = canvas.height = 150;

const audioCtx = new (window.AudioContext || window.webkitAudioContext);
const analyser = audioCtx.createAnalyser();

const nyquist = audioCtx.sampleRate / 2;

// highest precision
analyser.fftSize = 32768;

const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
const osc = audioCtx.createOscillator();
osc.frequency.value = 400;
osc.connect(analyser);
osc.connect(audioCtx.destination);

range.oninput = e => {
  osc.frequency.value = range.value;
};

if(!audioCtx.state || audioCtx.state === 'running') {
  begin();
}
else {
  log.textContent = 'click anywhere to begin';
  onclick = e => {
    onclick = null;
    begin()
  }
}

function begin() {
  osc.start(0);
  draw();
}

function draw() {
  requestAnimationFrame(draw);

  // get the Frequency Domain
  analyser.getByteFrequencyData(dataArray);

  canvasCtx.fillStyle = 'rgb(0, 0, 0)';
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  const barWidth = (WIDTH / bufferLength) * 2.5;
  let max_val = -Infinity;
  let max_index = -1;
  let x = 0;
  for(let i = 0; i < bufferLength; i++) {
    let barHeight = dataArray[i];
    if(barHeight > max_val) {
      max_val = barHeight;
      max_index = i;
    }

    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
    canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
    x += barWidth;
  }
  log.textContent = `loudest freq: ${max_index * (nyquist / bufferLength)}
real value: ${range.value}`;
}

#log{display: inline-block; margin:0 12px}
#canvas{display: block;}