Javascript Three.js中的多个3D声音

我在这件事上有点挣扎

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

目标是从一行的开头导航到结尾，这样你就可以播放不同的声音并制作一首“音乐”

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

以下是在线示例：

（左键单击向前移动，右键单击向后移动）

--

这是创建声音的功能： （发件人：）

var声音=功能（声源、半径、音量）{
var audio=document.createElement（'audio'）；
对于（var i=0；i如果（距离我设法通过使用Web音频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;
    }
  }
}

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

if（window.hasOwnProperty（'AudioContext'）&&！window.hasOwnProperty（'webkitadiocontext'））
window.webkitAudioContext=AudioContext；
var context=新的webkitAudioContext（）；
var声音=功能（半径、音量）{
var source=context.createBufferSource（）；
var osc=context.create振荡器（）；
var oscGain=context.createGainNode（）；
osc.type=0；
osc连接（osc增益）；
连接（context.destination）；
osc注释（0）；
osc.frequency.value=500；
oscGain.gain.value=0；
this.position=新的3.Vector3（）；
this.update=功能（摄像头）{
var距离=此.position.distanceTo（camera.position）；
如果（距离当我打开该页面时，我的浏览器开始下载20个7 MB的mp3文件。对我来说，这些下载至少需要很长时间才能完成。也许你只听到那些已经完成下载的文件。@詹姆斯：是的，这绝对不是一个好方法，因为有些浏览器会播放6种声音，有些浏览器会播放14种声音正如你所说，它加载了20倍于同一个文件…我想我要研究一下Web音频API。谢谢你的回复。你一定要将你的解决方案作为答案发布并接受它。
for(var i = 0 ; i < 20 ; i ++){
  sounds[i].update( camera );
}

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

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