THREE.AudioLoader load cached src

[mkungla]

Description of the problem

When I call to THREE.AudioLoader.load src on path which was already played on scene then I get errors

The buffer passed to decodeAudioData contains an unknown content type.path
EncodingError: The given encoding is not supported.

It seems that THREE.XHRLoader returns THREE.Cache ArrayBuffer and AudioLoader.decodeAudioData fails there.

Three.js version

• Dev
• 0.76.1

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• Linux
• Android
• IOS

[mrdoob]

Oh, can you provide a jsfiddle we can work with?

[mkungla]

@mrdoob One very RAW example

// Set up the scene switching between tracks after 3 sec
// For this example I have 3 mp3 tracks in directory radio
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var audioListener = new THREE.AudioListener();
camera.add( audioListener );
var player = new THREE.Audio( audioListener );
player.autoplay = true;
scene.add( player );
var loader = new THREE.AudioLoader();

/**
 * You will see errors in console when switch_track switches back to track 1
 * 
 * The buffer passed to decodeAudioData contains an unknown content type.devel
 * EncodingError: The given encoding is not supported.
 */
THREE.Cache.enabled = true;

/**
 * THREE.Cache.enabled = false;
 *
 * Errors are gone and tracks switch
 */
var song_id = 1;
function switch_track(song_id) {
    loader.load('radio/'+song_id+'.mp3', function ( audioBuffer ) {  
         player.setBuffer( audioBuffer );
    });
}
setInterval(function(){
     if(song_id > 3)  song_id = 1; 
     switch_track(song_id);
     song_id++;
},5000);

It seems that THREE.XHRLoader returns THREE.Cache ArrayBuffer and AudioLoader.decodeAudioData fails there.

[mrdoob]

I get this error:

Uncaught InvalidStateError: Failed to set the 'buffer' property on 'AudioBufferSourceNode': Cannot set buffer after it has been already been set

Which seems to be a limitation of the WebAudio API itself.

[mkungla]

@mrdoob your error comes from chrome I guess!? Does it switch all tracks first time and error occurs when setInterval(function(){ goes for the next iteration of tracks, and does it switch without errors when you set THREE.Cache.enabled = true;?

[mkungla]

In THREE.XHRLoader.load you have

var cached = THREE.Cache.get( url );
if ( cached !== undefined ) {
    if ( onLoad ) {
        setTimeout( function () {
            onLoad( cached );
        }, 0 );
    }
    return cached;
}

Is there any scenario where cached would actually implement AudioBuffer and can be used within THREE.AudioLoader.load

[mrdoob]

@mrdoob your error comes from chrome I guess!?

Yes.

Does it switch all tracks first time and error occurs when setInterval(function(){ goes for the next iteration of tracks,

No. It already fails when trying to play 2.mp3

and does it switch without errors when you set THREE.Cache.enabled = true;?

Neither true nor false made any difference.

[mkungla]

@mrdoob So in general seems indeed that this is not an a THREE issue, but limitation of WebAudio API itself to update buffer after it has been already been set. It's up to you either close this issue or is there something to investigate further. So as I understand changing audio src on THREE.PositionalAudio, THREE.AudioLoader ... is not possible without having some custom bufferLoader perhaps?

[Mugen87]

I think three.js handles this quite well. It's rather a matter of how you use Audio and PositionalAudio in your application. It would be better if you create separate Audio entities for your three mp3 files once and reuse them whenever it's necessary. For background music or lengthy ambient sound you should use an ordinary HTML5 audio element or maybe something like this #11115.