Hi all,
I’m trying to load external audio files with the three AudioLoader. For this I use an input FileUpload. Does anyone know what I’m doing wrong? I have created a fiddle to show the problem. Many thanks for the help.
Try something like this: https://jsfiddle.net/2q7Lgdvv/8/
It uses the File API in order to load local audio files.
@Mugen87 thank you!! I noticed that on my first fiddle the code was not complete. Here is the correction. I will try to integrate your proposal.
@Mugen87 There are problems with the constructors. I can not rebuild too much, otherwise the rest will not work anymore. Could I also apply it to the existing code? The variables -> var listener = new THREE.AudioListener (); and var audioLoader = new THREE.AudioLoader (); I can not change. See the current example “correction”.
This version worked on my computer: https://jsfiddle.net/5gbbe459/25/
Check the new event listener onFileInput().
@Mugen87 Oh sorry, yes it works, but I meant in connection with the LoadClip Button so select the audio file and then with theLoadClip Button loading, so that it behaves as when loading the fixed path on the left side , (Next -> loadClip -> play) For the variable Clip0 under loadClip (?); should the file be loaded, then the rest results. On the console must be like the “Clip1 with fixed path”, also the message Audio finished loading! appear. Do you have any idea about this?
TBH, i don’t understand the logic of your UI, sry 
Right now, the audio plays as soon as you select it over the dialog. Instead of directly playing the audio after the decode, you can start the playback when the user performs an interaction (e.g. clicks a button). So you just execute audio.play() at a later point.
Yes, I understand that, it is not a simple matter. For the sake of simplicity, I have stearked the actual code to the essential Reduced to avoid confusion. Instead, it now creates some ambiguity. I realize what the audioPlay has for properties. In my example, I use SoundPlay over thePlay-Button.
- Search the
AudioFileover the dialog and select. 2. TheAudioFileshould be loaded into the player via theLoadClip-Button. 3. It should then be able to be controlled via the play, stop and reset button.
The process should be the same as the example with the fixed path on the left side. The same controls should also be used. Simply that the AudioFiles can be loaded into the same structure instead of a fixed path, from an arbitrary external path. Actually, the only problem is that I can not load the selected AudioFile from the dialog with clip0, so that it responds to the soundPlay
var clip0 = document.querySelector('#clip0');
clip0.addEventListener('click', function () {
loadClip('hier müsste der externe Pfad des AudoFiles (über file, loadFile oder .value etc.) hin, um von clip0 geladen werden zu können. );
});
var clip1 = document.querySelector('#clip1');
clip1.addEventListener('click', function () {
loadClip('https://cdn.rawgit.com/mrdoob/three.js/master/examples/sounds/358232_j_s_song.mp3');
});
play.onclick = function playClip() {
console.log( `\nplayClip()` );
play.style.background = "#92ddb8";
reset.disabled = false;
play.disabled = true;
paused.disabled = false;
sound.play(); //<<--- Damit wird der Play ausgelöst.
}@Mugen87, we make it too complicated. I think it would be enough if I could just pass the entire path of the selection to var clip0 ... loadClip ('Path');. The rest is already there. Instead of the Fix defined path in Example Clip1, the variable path (full path) would have to be retrieved. Now I only get a filename I can not load because the way to the file is missing.
I try it now directly, but the security prevents the execution. But at least you can see what I want to do. Interestingly, the direct link to the localhost is running. The direct link to the client is not. When I load the same way to Localhost via LoadClip, it only partially works, and not to the client at all. Is there any reasonable solution? See example
You should take some time and study how the input element actually works. It seems to me that you don’t understand the handling of client-sided data. You can load external files if they are actually hosted and accessible via an URL. Local client data needs to be uploaded to a web server first or you use the mentioned File API for real local access.
1 Like
Yes, I probably did not really understand that … 
it’s just not clear to me why a direct link works, and not the same about the selection. Will probably be due to the security. And that’s why I have to go through the API. Accordingly, there is no way around it. And because that does not correspond with my already integrated buttons, it probably will not work out. Many Thanks.
@Mugen87 About that link in German “Zugriff auf Dateien von Webapplikationen”) Thank god I know that “Sprachen” = “Languages” ))
Ja, Gott sei Dank !!
@Tom Thanks for sharing your solution 
@prisoner849 Oops! Sry, for posting the German version. The smart MDN always shows the located version of their docs 
1 Like