Is MP3 interleaving different than WAV?

[autotel]

I cannot be sure this is not a problem actually with the wavesurfer.js library I am using, or something with my usage of the audio-loader library.

I created one same audio file, and encoded it into WAV and into MP3 aswell. Then loaded it using:

var load = require('audio-loader')

load('./test-media/test-bleep.mp3').then(function (audioBuffer) {
     wavesurfer.loadDecodedBuffer(audioBuffer);
});

When I load a WAV file, it displays and plays fine. Here the output with a test wav file:

When I load an MP3 file, however, the file sounds one octave lower (I would guess), I presume it is interleaving channels that are actually present one after another.
The same audio, loaded as MP3:

If I load a musical track, I get the track, playing at half speed, with some artifacts, and the first half of the track is playing on one speaker while the second half is playing from the other speaker. The reported length, sampleRate and numberOfChannels is nearly the same when loading MP3 than WAV.

I would suppose that I am doing something wrong, since such issue hasn't been reported. I think that is still useful to post this as bug in order to reflect how I was expecting the system to work. If I find the source of the error, I will post it.

[autotel]

I created a minimum code that produces the mentioned effect. It is running in Electron

var $=require("jquery");
var load = require('audio-loader');
var WaveSurfer = require('wavesurfer.js');

load('./test-media/megaman.mp3').then(function (audioBuffer) {

  var $el=$('<div class="wavesurfer"></div>');
  $el.appendTo('body');
  var DOM_el=$el[0];
  let self=this;


  const wavesurfer = WaveSurfer.create({
    container: DOM_el,
    waveColor: 'violet',
    progressColor: 'purple',
    splitChannels:true,
  });

  wavesurfer.loadDecodedBuffer(audioBuffer);


});

Also, super sketchy code, but this would re-build the mp3 files back in order

var audioBufferUtils=require('audio-buffer-utils');

var reInterleave=true;
    //rebuild audioBuffer
    if(reInterleave){
      var channelCount=audioBuffer.numberOfChannels;
      var interleavedArray=[];
      for(var channelN=0; channelN < channelCount; channelN++){
        var samples=audioBuffer.getChannelData(channelN);
        for(var spln=0; spln<samples.length; spln++){
          interleavedArray.push(samples[spln]);
        }
      }
      var deinterleavedArray=[];
      for(var spln =0; spln < interleavedArray.length; spln += channelCount){
        for(var ch=0; ch<channelCount; ch++){
          if(!deinterleavedArray[ch])deinterleavedArray[ch]=[];
          deinterleavedArray[ch].push(interleavedArray[spln+ch]);
        }
      }
      console.log(deinterleavedArray);
      var reInterleavedAudioBuffer=audioBufferUtils.create(deinterleavedArray,channelCount,audioBuffer.sampleRate);
      audioBuffer=reInterleavedAudioBuffer;
      console.log(audioBuffer);
    }

audioBuffer being, of course the same as in the example code (the provided parameter in the .then callback)

[autotel]

I just realized that it is not loading the entire file, but only half of it. Anyone knows why this could be happening?

[paulpv]

@autotel Did you ever solve this?

I just started using audio-play, first with .wav files only, and after writing quite a bit of code for my app to work with .wav files I started to add in .mp3 files and immediately ran in to this problem.
Audio loads not at the beginning, and toned down and/or playing too slow.
Lots of other related issues in the audio-play, audio-decode, and this audio-loader repos. :/

I can't tell yet if this is a problem with the loader, decoder, or player, but I suspect the problem is not with the player.