How to load a file from the client side?

Question

The following example tries to load audio data from the client side. I am aware that the security technically is problematic. But when the path is defined, it should work. When I load from localhost, it only works partially and not at all by the client. How could I improve my code to make it work? Many Thanks.

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>