I am trying to upload an audio and download it later. I am using firebase server for this process.

There are 2 queries i am stuck with. Solution to any one would solve the purpose:

1. How to upload the file as file instead of blob. I believe there should be a way to upload the file as it is, instead of first converting the file to blob and then uploading(which is i am doing right now).
2. I am able to download the file but not able to play it. Since the file was first converted to DataURL/ArrayBuffer and then uploaded, how can i convert it back to audio(mp3/wav)?

The code to upload:

  $scope.uploadFile = function(){ // uploading file
var storageRef= firebase.storage().ref();
var filename= $scope.audio.src.substring($scope.audio.src.lastIndexOf("/")+1,$scope.audio.src.length);
$scope.fname= filename;
// fetching file to upload
baseServ.dirEntry.getFile(filename, {}, function(entry){
  entry.file(function(gotfile){
    var reader= new FileReader();

    reader.onloadend= function(resultFile){
      console.log(resultFile);
      var blob= new Blob([resultFile], {type:"audio/mp3"});
      // uploading to firebase server
      var uploadTask = storageRef.child(filename).put(blob);
      uploadTask.on('state_changed', function(snapshot){
        console.log("state_changed:" + filename + "::::Current State:" +snapshot.state);
      }, function(error) {
        alert("upload error");
      }, function() {
        $scope.downloadURL = uploadTask.snapshot.downloadURL;
      });
    }
    //reading as dataUrl or ArrayBuffer
    reader.readAsDataURL(gotfile);
  })
});

}

And to download:

  $scope.downloadFile= function(){
var ft= new FileTransfer();
ft.download($scope.downloadURL, baseServ.dirDownloads.nativeURL + $scope.fname, function(entry) {
  // download is successful but unable to play when opening in my device
    console.log("download plete: " + entry.toURL());
},
function(error) {
    console.log("download error source " + error.source);
},
false,
{});

}

Thanks.

I am trying to upload an audio and download it later. I am using firebase server for this process.

There are 2 queries i am stuck with. Solution to any one would solve the purpose:

1. How to upload the file as file instead of blob. I believe there should be a way to upload the file as it is, instead of first converting the file to blob and then uploading(which is i am doing right now).
2. I am able to download the file but not able to play it. Since the file was first converted to DataURL/ArrayBuffer and then uploaded, how can i convert it back to audio(mp3/wav)?

The code to upload:

  $scope.uploadFile = function(){ // uploading file
var storageRef= firebase.storage().ref();
var filename= $scope.audio.src.substring($scope.audio.src.lastIndexOf("/")+1,$scope.audio.src.length);
$scope.fname= filename;
// fetching file to upload
baseServ.dirEntry.getFile(filename, {}, function(entry){
  entry.file(function(gotfile){
    var reader= new FileReader();

    reader.onloadend= function(resultFile){
      console.log(resultFile);
      var blob= new Blob([resultFile], {type:"audio/mp3"});
      // uploading to firebase server
      var uploadTask = storageRef.child(filename).put(blob);
      uploadTask.on('state_changed', function(snapshot){
        console.log("state_changed:" + filename + "::::Current State:" +snapshot.state);
      }, function(error) {
        alert("upload error");
      }, function() {
        $scope.downloadURL = uploadTask.snapshot.downloadURL;
      });
    }
    //reading as dataUrl or ArrayBuffer
    reader.readAsDataURL(gotfile);
  })
});

}

And to download:

  $scope.downloadFile= function(){
var ft= new FileTransfer();
ft.download($scope.downloadURL, baseServ.dirDownloads.nativeURL + $scope.fname, function(entry) {
  // download is successful but unable to play when opening in my device
    console.log("download plete: " + entry.toURL());
},
function(error) {
    console.log("download error source " + error.source);
},
false,
{});

}

Thanks.

• javascript
• angularjs
• cordova
• firebase
• firebase-storage

Share Improve this question Follow edited Aug 25, 2016 at 18:21 AS490 asked Aug 2, 2016 at 16:07 AS490AS490 30344 silver badges1313 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

The Realtime Database is the wrong tool for storing audio files. You should use Firebase Storage for that. See Firebase Features.

Store and retrieve user-generated content like images, audio and video directly from the Firebase client SDK.

Robust uploads and downloads in the background, regardless of network quality Secure client-side authorization, integrated with Authentication Petabyte scale data storage backed by Google Cloud Storage API access throughout Firebase or Google Cloud Storage APIs

It seems you cant upload the audio itself.

In examples i saw, data(for image files) is uploaded in the form of dataURL/Base64 string and the file is reconstructed after download.

Since my audio files are small, 60-70 kb, i am using the same and reconstructing the file again with HTMLAudio element.

To give you a simple way just use these two methods(from the link given below) in your program.

private void startRecording() {
        mRecorder = new MediaRecorder();//mRecoreder has been declared globally
        mRecorder.setAudioSource(MediaRecorder.AudioSource.MIC);
        mRecorder.setOutputFormat(MediaRecorder.OutputFormat.THREE_GPP);
        mRecorder.setOutputFile(mFileName);
        mRecorder.setAudioEncoder(MediaRecorder.AudioEncoder.AMR_NB);

        try {
            mRecorder.prepare();
        } catch (IOException e) {
            Log.e(LOG_TAG, "prepare() failed");//initiallize LOG_TAG as a string anything u like to get an indication
        }

        mRecorder.start();
    }

    private void stopRecording() {
        mRecorder.stop();
        mRecorder.release();
        mRecorder = null;

        uploadAudio();//it is'nt in the link. it has been added by me to upload ur audio to firebase storage cloud 

    }

And now to upload the code, add call the method uploadAudio() and its body is :-

private void uploadAudio() {

mProgressDialog.setMessage("Uploading Audio...");//declare it globally and initialize it with passing the current activity i.e this
mProgressDialog.show();

StorageReference mFilePath = mStorageRef.child("Audio").child("new_audio.3gp");

Uri u = Uri.fromFile(new File(mFileName));
mFilePath.putFile(u).addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
    @Override
    public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {

        mProgressDialog.dismiss();
        mTextView.setText("Audio has been Uploaded Successfully !!!");
    }
});

}

this should b enough for simple audio uploading. Check out the link for further customization. https://developer.android./guide/topics/media/mediarecorder.html