Howler + ctx Analyser issue

Question

I'm trying to connect an audio analyzer node to my howler setup.

The problem is that I get an array filled by "128" which mean there is no sound, but the sound is playing.

Here is my code :

  var Sound = new Howl({
              src: 'https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3',
              html5: true,
              format: ['mp3']
          });

  Sound.play();

  // Create analyzer
  var analyser = Howler.ctx.createAnalyser();

  // Connect master gain to analyzer
  Howler.masterGain.connect(analyser);

  // Connect analyzer to destination
  analyser.connect(Howler.ctx.destination);

  // Creating output array (according to documentation https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API)
  analyser.fftSize = 2048;
  var bufferLength = analyser.frequencyBinCount;
  var dataArray = new Uint8Array(bufferLength);

  // Get the Data array
  analyser.getByteTimeDomainData(dataArray);

  // Display array on time each 3 sec (just to debug)
  setInterval(function(){ 
    analyser.getByteTimeDomainData(dataArray);
    console.dir(dataArray);
  }, 3000);

Here is a plunker of my project reduced to minimal :

Plunker

My implementation is based on these sources :

avanwink answer on this post

The documentation of sound visualization

score 2 · Accepted Answer · answered Jun 20 '17 at 08:16

Fixed !

Because, previously, was using radio stream to test my player, I set the html5 option to true in the Howl object.

Removing this option, allow howler to use the web audio API and so fixed my issue :

Working version :

var Sound = new Howl({
              src: 'https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3',
              format: ['mp3']
          });

  Sound.play();

  // Create analyzer
  var analyser = Howler.ctx.createAnalyser();

  // Connect master gain to analyzer
  Howler.masterGain.connect(analyser);

  // Connect analyzer to destination
  analyser.connect(Howler.ctx.destination);

  // Creating output array (according to documentation https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API)
  analyser.fftSize = 2048;
  var bufferLength = analyser.frequencyBinCount;
  var dataArray = new Uint8Array(bufferLength);

  // Get the Data array
  analyser.getByteTimeDomainData(dataArray);

  // Display array on time each 3 sec (just to debug)
  setInterval(function(){ 
    analyser.getByteTimeDomainData(dataArray);
    console.dir(dataArray);
  }, 3000);

Howler + ctx Analyser issue

1 Answers1