从服务器端文件中提取FileReader [英] Feed FileReader from server side files

问题描述

我开始定制/改进旧的音频编辑器项目。我可以将音轨导入我的画布VIA拖放我的电脑。问题是我还想使用已存储在服务器中的音轨，只需点击可用曲目列表...而不是使用< input type =file> 标签。如何使用FileReader读取服务器端文件？也许是Ajax？提前致谢。

I´m starting to customize/improve an old audio editor project. I can import audio tracks to my canvas VIA drag&drop from my computer. The thing is that I also would like to use audio tracks already stored in the server just clicking over a list of available tracks... instead of use the <input type="file"> tags. How can I read the server side files with a FileReader?Ajax perhaps? Thanks in advance.

这是文件阅读器的代码：

This is the code for the file reader:

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;

推荐答案

感谢micn的建议，我成功了绕过没有触摸原始代码。代码如下：

Thanks for the suggestion micronn, I managed to make a bypass without touch the original code. The code as follows is the following:

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函数中，曲目将添加到编辑器中。

After this, in the fileLoaded function, the track is added to the editor.

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

而且......就是这样！

And... thats it!

这篇关于从服务器端文件中提取FileReader的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！