2016-10-27 1 views
0

Рабочего примером: https://codepen.io/anon/pen/RGmVgGНе получать данные частоты в вебе-аудио с использованием getFloatFrequencyData с живым входом

У меня есть код, который получает работу в реальных микрофонных входные данные и выводит его на динамик в системе по умолчанию. Я проверил, что получаю данные.

Я пытаюсь получить частотные данные, но он возвращается как массив -Infinity (или -100 в Firefox).

Я прошел через MDN-документы для этого и, похоже, все на месте, но я не получаю данные частоты. Любая идея, что мне нужно делать по-другому?

HTML

Audio Data: 
<div id="audio-data"></div> 

Frequency Data: 
<div id="frequency-data"></div> 

JS

window.addEventListener('load',() => { 
    navigator.mediaDevices.getUserMedia({audio: true}) 
    .then((stream) => { 
     const audioDataDisplay = document.querySelector('#audio-data'); 
     const frequencyDataDisplay = document.querySelector('#frequency-data'); 
     const context = new AudioContext(); 
     const source = context.createMediaStreamSource(stream); 
     const processor = context.createScriptProcessor(256, 1, 1); 

     source.connect(processor); 
     processor.connect(context.destination); 

     // route default microphone audio to default speaker output for system 
     // display live audio buffer data 
     processor.onaudioprocess = (data) => { 
     const channelCount = data.outputBuffer.numberOfChannels; 

     for (let i = 0; i < channelCount; i++) { 
      const inputChannelData = data.inputBuffer.getChannelData(i); 
      const outputChannelData = data.outputBuffer.getChannelData(i); 

      for (let j = 0; j < inputChannelData.length; j++) { 
      outputChannelData[j] = inputChannelData[j]; 
      } 

      audioDataDisplay.innerHTML = outputChannelData; 
     } 
     } 

     // analyze the frequency data and display data 
     // only shows as an array of -Infinity in Chrome, -100 in Firefox. 
     const analyser = context.createAnalyser(); 
     const dataArray = new Float32Array(analyser.frequencyBinCount); 

     setInterval(() => { 
     analyser.getFloatFrequencyData(dataArray); 
     frequencyDataDisplay.innerHTML = dataArray; 
     }, 1000); 
    }); 
}); 

ответ

2

Вы никогда ничего подключения к вашему анализатора узла. Добавьте что-то вроде

source.connect(analyser); 

после создания анализатора.

+0

Спасибо! Впервые я работаю с этими api и все еще полагаюсь на образцы кода MDN для определения процедур. Работаю сейчас. – Geuis

Смежные вопросы