javascript - 从服务器端文件提供 FileReader

Question

我开始定制/改进一个旧的音频编辑器项目。我可以通过从计算机中拖放将音轨导入到 Canvas 中。问题是，我还想使用已存储在服务器中的音轨，只需单击可用轨道列表...而不是使用 <input type="file">标签。如何使用 FileReader 读取服务器端文件？也许是 Ajax？提前致谢。

这是文件读取器的代码:

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

感谢 micronn 的建议，我成功地绕过了原始代码。代码如下:

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

此后，在 fileLoaded 函数中，轨道将添加到编辑器中。

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

而且......就是这样!