2016-04-24 6 views
1

古いオーディオエディタプロジェクトをカスタマイズ/改善し始めています。私のキャンバスにオーディオトラックをインポートすることができますVIAドラッグ&私のコンピュータからドロップします。これは、サーバーに既に保存されているオーディオトラックを、利用可能なトラックのリストをクリックするだけで使用したいということです。<input type="file">タグを使用するのではなく、 FileReaderを使用してサーバー側のファイルを読み取るにはどうすればよいですか?おそらくAjaxですか?前もって感謝します。サーバーサイドファイルからFileReaderをフィード

これは、ファイルリーダーのためのコードです:

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; 

答えて

0

おかげで、私はタッチせずに元のコードをバイパスを作ることに成功しました。次のコードは、次のとおりです。

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関数で、トラックがエディタに追加されます。

そして...それです!

1

たぶん、あなたは、FileReaderをの観点からだけだと思う​​が、所望の機能を提供する抽象化を作成し、の種類に基づいて異なる実装を選択する必要はありませんあなたがアクセスする必要があるリソースサーバーにあるリソース(http取得要求)にはXMLHttpRequestを、ローカルファイルにはFileReaderを使用できます。あなたはwinamp2-jsのプロジェクトで実装同様のソリューションを参照することができます

:提案micronnためhttps://github.com/captbaritone/winamp2-js/blob/master/js/my-file.js

関連する問題