Feed FileReader von Server-Seite Dateien

Question

Ich fange an, ein altes Audio-Editor-Projekt anzupassen/zu verbessern. Ich kann Audiotracks auf meine Leinwand importieren VIA Drag & Drop von meinem Computer. Die Sache ist, dass ich auch Audiotracks verwenden möchte, die bereits auf dem Server gespeichert sind, indem ich einfach auf eine Liste verfügbarer Tracks klicke ... anstatt die <input type="file"> Tags zu verwenden. Wie kann ich die serverseitigen Dateien mit einem FileReader lesen? Ajax vielleicht? Danke im Voraus.

Dies ist der Code für die Datei Leser:

Player.prototype.loadFile = function(file, el) { 
    //console.log(file); 
    var reader = new FileReader, 
     fileTypes = ['audio/mpeg', 'audio/mp3', 'audio/wave', 'audio/wav'], 
     that = this; 

    if (fileTypes.indexOf(file.type) < 0) { 
     throw('Unsupported file format!'); 
    } 

    reader.onloadend = function(e) { 
     if (e.target.readyState == FileReader.DONE) { // DONE == 2 
      $('.progress').children().width('100%'); 

      var onsuccess = function(audioBuffer) { 
       $(el).trigger('Audiee:fileLoaded', [audioBuffer, file]); 
      }, 
      onerror = function() { 
       // on error - show alert modal 
       var tpl = (_.template(AlertT))({ 
        message: 'Error while loading the file ' + file.name + '.' 
       }), 
       $tpl = $(tpl); 

       $tpl.on('hide', function() { $tpl.remove() }) 
       .modal();   // show the modal window 

       // hide the new track modal 
       $('#newTrackModal').modal('hide'); 
      }; 

      that.context.decodeAudioData(e.target.result, onsuccess, onerror); 
     } 
    }; 

    // NOTE: Maybe move to different module... 
    reader.onprogress = function(e) { 
     if (e.lengthComputable) { 
      $progress = $('.progress', '#newTrackModal'); 
      if ($progress.hasClass('hide')) 
       $progress.fadeIn('fast'); 

      // show loading progress 
      var loaded = Math.floor(e.loaded/e.total * 100); 
      $progress.children().width(loaded + '%'); 
     } 
    }; 

    reader.readAsArrayBuffer(file); 
}; 

return Player; 

Answer 1

Danke für die Anregung micronn ich den Original-Code ein Bypass ohne Touch machen verwaltet:

Sie können eine ähnliche Lösung in dem Winamp2-js Projekt umgesetzt sehen. Der Code wie folgt lautet:

jQuery('.file_in_server').click(function() 
{ 
    var url=jQuery(this).attr('src');//Get the server path with the mp3/wav file 
    var filename = url.replace(/^.*[\\\/]/, ''); 
    var path="http://localhost/test/audio/tracks/"+filename; 
    var file = new File([""], filename); //I need this hack because the original function recives a buffer as well as the file sent from the web form, so I need it to send at least the filename 

    var get_track = new XMLHttpRequest(); 
    get_track.open('GET',path,true); 
    get_track.responseType="arraybuffer"; 
    get_track.onload = function(e) 
    { 
    if (this.status == 200) //When OK 
    { 
     Audiee.Player.context.decodeAudioData(this.response,function(buffer){ //Process the audio toward a buffer 
     jQuery('#menu-view ul.nav').trigger('Audiee:fileLoaded', [buffer, file]); //Send the buffer & file hack to the loading function 
     },function(){ 
     alert("Error opening file"); 
     jQuery('#newTrackModal').modal('hide'); 
     }); 
    } 
    }; 
    get_track.send(); 
}); 

Danach wird in der fileLoaded Funktion wird die Spur in den Editor hinzugefügt.

 var name = 'Pista ' + Audiee.Collections.Tracks.getIndexCount(); 
     track = new TrackM({buffer: audioBuffer, file: file, name: name}); //being audioBuffer my buffer, file the fake file and name the fake file name 
     Audiee.Collections.Tracks.add(track); 

Und das ist es!

Answer 2

Vielleicht brauchen Sie nicht nur in Bezug auf Filereader zu denken, aber eine Abstraktion zu schaffen, die die gewünschte Funktionalität bereitstellt und unterschiedliche Implementierungen wählen basierend auf der Art von Ressource, auf die Sie zugreifen müssen. Sie können XMLHttpRequest für Ressourcen auf dem Server (eine HTTP-Anforderung) und FileReader für lokale Dateien verwenden. https://github.com/captbaritone/winamp2-js/blob/master/js/my-file.js