Feed FileReader from server side files

问题

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;

回答1:

Maybe you need not to think only in terms of FileReader, but create an abstraction that provides the desired functionality and select different implementations based on the kind of resource you need to access. You may use XMLHttpRequest for resources located at the server (an http get request), and FileReader for local files.

You can see a similar solution implemented in the winamp2-js project: https://github.com/captbaritone/winamp2-js/blob/master/js/my-file.js

回答2:

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

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!

来源：https://stackoverflow.com/questions/36830281/feed-filereader-from-server-side-files

标签

javascript

audio

import

filereader