Multiple 3D sounds in Three.js

Question

I'm a bit struggling on this one.

I want to do a line made of cubes, each one has a sound and if you get closer to it you can hear its sound.

The goal is to navigate from the beginning of the line to the end, this way you are able to play the different sounds and make a 'music'.

The problem I have is that I can only hear 6 of the 20 cubes.

Here is the online example : http://maximebonhomme.fr/mission87/tests

(Left click to move forward, Right click to move backward)

--

This is the function to create the sound : (from : http://threejs.org/examples/#misc_sound)

var Sound = function ( sources, radius, volume ) {
  var audio = document.createElement( 'audio' );
  for ( var i = 0; i < sources.length; i ++ ) {
    var source = document.createElement( 'source' );
    source.src = sources[ i ];
    audio.appendChild( source );
  }
  this.position = new THREE.Vector3();
  this.play = function () {
    audio.play();
  }
  this.update = function ( camera ) {
    var distance = this.position.distanceTo( camera.position );
    if ( distance <= radius ) {
      audio.volume = volume * ( 1 - distance / radius );
      // console.log(distance/radius/2);
      material_sky.color.setHSL(distance / radius / 2 ,0.666,0.666);
    } else {
      audio.volume = 0;
    }
  }
}

--

This is where I create my cubes

for(var i = 0 ; i < 20 ; i ++){
  array[i] = new THREE.Mesh(music_geo,material_draw);
  array[i].position.z = i*20;
  array[i].position.x = 30;
  scene.add(array[i]);

  sounds[i] = new Sound( [ soundSRC+source2+'.mp3', soundSRC+source2+'.ogg' ], 10, 1 );
  sounds[i].position.copy( array[i].position );
  sounds[i].play();
}

--

And this is where I update the sounds with the camera (in my render function)

for(var i = 0 ; i < 20 ; i ++){
  sounds[i].update( camera );
}

--

So I would like to know if it is me doing something wrong or if it's Three.js, the browser or something that can't support more than 6 sounds.

Thanks a lot !

EDIT 08/06/14

I managed to get over this issue by using the Web Audio API Here's the fix if someone is interested, the sound is a frequency (that's what I wanted) but it'll work with a song file I suppose.

The function that creates the sound :

if (window.hasOwnProperty('AudioContext') && !window.hasOwnProperty('webkitAudioContext'))
    window.webkitAudioContext = AudioContext;

var context = new webkitAudioContext();

var Sound = function ( radius, volume ) {

  var source = context.createBufferSource();
  var osc = context.createOscillator();
  var oscGain =context.createGainNode();
  osc.type = 0;

  osc.connect(oscGain);
  oscGain.connect(context.destination);
  osc.noteOn(0); 
  osc.frequency.value = 500;
  oscGain.gain.value = 0;

  this.position = new THREE.Vector3();

  this.update = function ( camera ) {
    var distance = this.position.distanceTo( camera.position );
    if ( distance <= radius ) {
      oscGain.gain.value = volume * ( 1 - distance / radius );

      material_sky.color.setHSL(distance / radius / 2 ,0.666,0.666);
    } else {
      oscGain.gain.value = 0;
    }
  }
}

Cheers !

Answer 1

I managed to get over this issue by using the Web Audio API Here's the fix if someone is interested, the sound is a frequency (that's what I wanted) but it'll work with a song file I suppose.

The function that creates the sound :

if (window.hasOwnProperty('AudioContext') && !window.hasOwnProperty('webkitAudioContext'))
    window.webkitAudioContext = AudioContext;

var context = new webkitAudioContext();

var Sound = function ( radius, volume ) {

  var source = context.createBufferSource();
  var osc = context.createOscillator();
  var oscGain =context.createGainNode();
  osc.type = 0;

  osc.connect(oscGain);
  oscGain.connect(context.destination);
  osc.noteOn(0); 
  osc.frequency.value = 500;
  oscGain.gain.value = 0;

  this.position = new THREE.Vector3();

  this.update = function ( camera ) {
    var distance = this.position.distanceTo( camera.position );
    if ( distance <= radius ) {
      oscGain.gain.value = volume * ( 1 - distance / radius );

      material_sky.color.setHSL(distance / radius / 2 ,0.666,0.666);
    } else {
      oscGain.gain.value = 0;
    }
  }
}

Cheers !