0

I'm currently playing around with the Web Audio API in Chrome (60.0.3112.90) to possibly build a sound wave of a given file via FilerReader, AudioContext, createScriptProcessor, and createAnalyser. I have the following code:

const visualize = analyser => {
  analyser.fftSize = 256;
  let bufferLength = analyser.frequencyBinCount;
  let dataArray = new Float32Array(bufferLength);
  analyser.getFloatFrequencyData(dataArray);
}    

loadAudio(file){
  // creating FileReader to convert audio file to an ArrayBuffer
  const fileReader = new FileReader();

  navigator.getUserMedia = (navigator.getUserMedia ||
                      navigator.webkitGetUserMedia ||
                      navigator.mozGetUserMedia ||
                      navigator.msGetUserMedia);

  fileReader.addEventListener('loadend', () => {
    const fileArrayBuffer = fileReader.result;

    let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    let processor = audioCtx.createScriptProcessor(4096, 1, 1);
    let analyser = audioCtx.createAnalyser();

    analyser.connect(processor);
    let data = new Float32Array(analyser.frequencyBinCount);

    let soundBuffer;
    let soundSource = audioCtx.createBufferSource();

    // loading audio track into buffer
    audioCtx.decodeAudioData( 
      fileArrayBuffer, 
      buffer => {
        soundBuffer = buffer;
        soundSource.buffer = soundBuffer;

        soundSource.connect(analyser);
        soundSource.connect(audioCtx.destination);

        processor.onaudioprocess = () => {
          // data becomes array of -Infinity values after call below
          analyser.getFloatFrequencyData(data);
        };

        visuaulize(analyser);
      },
      error => 'error with decoding audio data: ' + error.err
    );
  });

  fileReader.readAsArrayBuffer(file);
}

Upon loading a file, I get all the way to analyser.getFloatFrequencyData(data). Upon reading the Web audio API docs, it says that the parameter is:

The Float32Array that the frequency domain data will be copied to. 
For any sample which is silent, the value is -Infinity.

In my case, I have both an mp3 and wav file I'm using to test this and after invoking analyser.getFloatFrequency(data), both files end up giving me data which becomes an array of `-Infinity' values.

This may be due to my ignorance with Web Audio's API, but my question is why are both files, which contain loud audio, giving me an array that represents silent samples?

9
  • Are you using Chrome? Commented Aug 15, 2017 at 17:18
  • Not totally clear what you're trying to do - but I don't see you actually calling start() on the audiobuffersource, unless it's inside iHateMyselfForThis.recordAudio(audioCtx, analyser)?
    – cwilso
    Commented Aug 15, 2017 at 18:09
  • @RaymondToy yes, I've updated my question with that information Commented Aug 17, 2017 at 15:26
  • @cwilso I've revised my code to omit setting context as I'm using this in a stateful react component. As you can see, I'm not invoking start(). I'm trying to get frequencies without having to play the file itself (if possible. Commented Aug 17, 2017 at 15:31
  • How else do you think the analyser is going to non-zero samples to analyse if you don't actually start the source that feeds the analyser? Commented Aug 17, 2017 at 20:09

2 Answers 2

3

The Web Audio AnalyserNode is only designed to work in realtime. (It used to be called RealtimeAnalyser.) Web Audio doesn't have the ability to do analysis on buffers; take a look at another library, like DSP.js.

9
  • There isn't any way to use Web Audio api to build a sound wave representation of an entire song given the song file itself? I've seen multiple projects such as wavesurfer-js.org which seem to have mastered some sort of technique that allows the rendering of a sound file's sound wave visually. Commented Aug 22, 2017 at 17:01
  • No, you totally CAN use Web Audio to build a representation of the entire file - via the OfflineAudioContext - but you can't use an Analyser on it.
    – cwilso
    Commented Sep 20, 2017 at 5:45
  • Since the OfflineAudioContext has an AnalyserNode as well this is actually possible.
    – elpoto
    Commented Dec 7, 2023 at 21:01
  • @elpoto It's certainly possible to create one, yes. But the Analyser is a real-time processor - you ask it, in effect, at any time "what's the frequency analysis, or a snipper, of the last chunk of data you got?" - and when you're in an offline context, that's not going to be particularly useful (because it's not "live" - you're probably either at the beginning or the end of the audio data). The OfflineAudioContext has createAnalyser for symmetry, but it's not particularly useful.
    – cwilso
    Commented Dec 8, 2023 at 22:09
  • What the original scenario probably wants is likely some sort of averaged/summed frequency analysis of the entire data set - which isn't what AnalyserNode does. It works on a much shorter analysis frame - sort of like one vertical slice of the spectrogram that you can create with Wavesurfer.
    – cwilso
    Commented Dec 8, 2023 at 22:14
1

Instead of:

soundSource.connect(analyser);
soundSource.connect(audioCtx.destination);

try:

soundSource.connect(analyser);
analyser.connect(audioCtx.destination);

Realising I sould do a source ==> anlalsyser ==>> destination chain solved this problem when I encountered it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.