如何从客户端加载文件？

Question

以下示例尝试从客户端加载音频数据。我知道安全在技术上是有问题的。但是当定义路径时，它应该工作。当我从localhost加载时，它只能部分工作，而不是客户端。我怎样才能改进我的代码以使其工作？非常感谢。

document.getElementById('button1').onclick = function() {				
  clip0.click();
}
		
  var listener = new THREE.AudioListener();  
  var audioLoader = new THREE.AudioLoader();

getAudioFile.onchange = function(){
  var files = this.files;		
  var file = URL.createObjectURL(files[0]);
};		
		
  var clip0 = document.querySelector('#clip0');
      clip0.addEventListener('click', function () {			
    //console.log( ("Loadeng:") + "./three/examples/sounds/" + getAudioFile.files[0].name);
      console.log( ("Loadeng:") + "C:/Users/Public/Music/" + getAudioFile.files[0].name );
			
    //loadClip( "./three/examples/sounds/" + getAudioFile.files[0].name );
      loadClip( "C:/Users/Public/Music/" + getAudioFile.files[0].name );
    //loadClip('https://cdn.rawgit.com/mrdoob/three.js/master/examples/sounds/358232_j_s_song.mp3');
      });		
		
  var audioLoaded = false,	   
      result	
	
function loadClip( audioUrl ) {
      audioLoaded = false	
	
      console.log(`\nLoading sound...`);		
      audioLoader.load( audioUrl, function( buffer ) {			
      sound = new THREE.PositionalAudio( listener );			
      sound.setBuffer( buffer );			
      sound.setRefDistance( 20 );
      sound.setLoop(false);
      sound.setVolume(5);
      console.log(`\nAudio finished loading!`);
      audioLoaded = true       
      });			
	
play.onclick = function playClip() {
      console.log( `\nplayClip()` );
      play.style.background = "#92ddb8";	  
	  
      reset.disabled = false;
      play.disabled = true;
      paused.disabled = false;
      
      sound.play();			
 }

 reset.onclick = function resetClip() {		
     console.log( `\nresetClip()` );    
     play.style.background = "";
     play.style.color = "";      
      
     stop.disabled = true;
     play.disabled = false;
     paused.disabled = false;
      
     sound.stop()    
     console.clear()
 }
   
 paused.onclick = function pausedClip() {		
     console.log( `\npausedClip()` );    
     play.style.background = "";
     play.style.color = "";		

     stop.disabled = false;
     play.disabled = false;
     paused.disabled = true;
      
     sound.pause();
}
}

#button1 {
   position:absolute;
   margin-top: 0px;
   margin-left: 50px;
}
#getAudioFile {
   position:absolute;
   margin-top:0px;
   margin-left:133px;
}

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

<p id="clip0"></p>

<button id="play" class="play">Play</button>
<button id="paused" class="paused">Pause</button>
<button id="reset" class="reset">Reset</button>
		
<input type="file" id="getAudioFile">			
		
<button type="button" id="button1" onclick="getAudioFile">Load Clip:</button>