Three.js中的多种3D声音

我在这个上有点挣扎。

我想做一条由立方体组成的线，每个线都有声音，如果靠近它，您会听到它的声音。

目标是从行的开头导航到结尾，这样您就可以播放不同的声音并发出“音乐”。

我的问题是我只能听到20个立方体中的6个。

这是在线示例：http : //maximebonhomme.fr/mission87/tests

（单击鼠标左键前进，单击鼠标右键后退）

-

这是创建声音的功能：（来自：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;
    }
  }
}

-

这是我创建多维数据集的地方

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();
}

-

这是我用相机更新声音的地方（在渲染功能中）

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

-

因此，我想知道这是我做错了事还是浏览器Three.js或不支持6种以上声音的事情。

非常感谢 ！

编辑14/06/06

我设法通过使用Web Audio API克服了这个问题。如果有人感兴趣，这是解决方法，声音是一种频率（这就是我想要的），但可以与我想像的歌曲文件一起使用。

产生声音的功能：

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;
    }
  }
}

干杯！