Three.js: Clone THREE.Audio , THREE.AudioListener

[erickAvSanti]

How I can clone o duplicate sound from THREE.Audio with THREE.AudioListener beacuse i can´t. Console log show: Uncaught (in promise) DOMException: Cannot decode detached ArrayBuffer.

three.js:36975 r88.

Any sound has 3-4 seconds, so I can´t play multiple sound after elapsed time.

I am using multiple options , last :

for(var _idx=0; _idx<3;_idx++){ 
    this.loadSound();
}  

// ......

loadSound: function(){
    audioLoader.load( 'audio/ballo_pop.ogg', function( buffer ) {
        var audio_listener = new THREE.AudioListener();
        w_wgl.camera.add( audio_listener );
        var _sound = new THREE.Audio( audio_listener );

        _sound.setBuffer( buffer );
        _sound.setLoop( false );
        _sound.setVolume( 1 ); 
        _sounds_ogg.push(_sound);

    });
},

[Mugen87]

You should have a single listener per application and not per audio element. The typical setup is:

// basic audio setup (listener + loader)

var listener = new THREE.AudioListener();
camera.add( listener );

var audioLoader = new THREE.AudioLoader();

// now create audios 

var sound = new THREE.Audio( listener );
audioLoader.load( 'effect.ogg', function( buffer ) {
   sound.setBuffer( buffer );
   sound.play();
} );

Use this example as a reference: https://threejs.org/examples/?q=webaudio#webaudio_sandbox

[erickAvSanti]

your answer is poor

[Mugen87]

For multiple audio files with the same buffer check this example:

https://threejs.org/examples/?q=webau#webaudio_timing

[Claod44]

Hi Mugen,

audioLoader.load( 'sounds/ping_pong.mp3', function ( buffer ) {
            for ( var i = 0; i < count; i ++ ) {
                var s = i / count * Math.PI * 2;
                var ball = new THREE.Mesh( ballGeometry, ballMaterial );
                ball.castShadow = true;
                ball.userData.down = false;
                ball.position.x = radius * Math.cos( s );
                ball.position.z = radius * Math.sin( s );
                var audio = new THREE.PositionalAudio( listener );
                audio.setBuffer( buffer );
                ball.add( audio );
                scene.add( ball );
                objects.push( ball );
            }

In Three.js Loaders are just object to convert a string path to a special response content (for audio: buffer).

In your example we can see "multiple sounds" but these are from the same file.
I was searching for a way to play differents audio files by only changing the AudioLoader url. Nothing found in the Audio API and in three.js docs. Three.js code doesn't provide an easy way to play multiple musics keeping the same AudioLoader instance ?
Thank you if you can help me, I think I'm not the only one searching for this tip

[Mugen87]

Of course you can do this:

var audioLoader = new THREE.AudioLoader();

audioLoader.load( 'effect_1.ogg', function( buffer ) {
   // do something with the decoded audio buffer
} );

audioLoader.load( 'effect_2.ogg', function( buffer ) {
  // do something with the decoded audio buffer
} );

Same loader for different URLs.

The next time, please post a help request at the forum or stackoverflow.

[Claod44]

I was doing so x)

function loadMainMusic(url) {
    if(main_Music.isPlaying) {
        if(main_Music.getVolume()!=0) {
            document.dispatchEvent(main_Music_FO);
        }
        else {
            main_Music.stop();
        }
    }
    else {
        audioLoader.load( url, function( buffer ) {
            main_Music.setBuffer( buffer );
            if(!main_Music.isPlaying){
                main_Music.play();
            }
            document.dispatchEvent(main_Music_FI);
        });
    }
}

I call this function with another URL and the console.log says : THREE.Audio: Audio is already playing.
I just needed to stop the music, to replace the source --', I tried before without success, now it's working, thanks a lot for your confirmation 👍