convert audio file to base64 in ionic 3

Question

I am trying to save an audio and send it to the server in ionic 3.

record(){
  if (this.platform.is('ios')) {
    this.fileName = 'record'+new Date().getDate()+new Date().getMonth()+new 
    Date().getFullYear()+new Date().getHours()+new Date().getMinutes()+new 
    Date().getSeconds()+'.3gp';
    this.filePath = this.file.documentsDirectory.replace(/file:\/\//g, '') + 
    this.fileName;
    this.audio = this.media.create(this.filePath);
  } else if (this.platform.is('android')) {
    this.fileName = 'record'+new Date().getDate()+new Date().getMonth()+new 
    Date().getFullYear()+new Date().getHours()+new Date().getMinutes()+new 
    Date().getSeconds()+'.3gp';
    this.filePath = this.file.externalDataDirectory.replace(/file:\/\//g, '') 
    + this.fileName;
    this.audio = this.media.create(this.filePath);
  }
    this.audio.startRecord();
    this.recording = true;
}

After stopping the record i want to send the audio file in base64 to the server. so I am using the base64 plugin to convert the audio file to base64.

this.base64.encodeFile(this.filePath).then((base64File: string) => {
            // let audiooo = encodeURIComponent(base64File);
            this.sendVoice(encodeURIComponent(base64File));
        }, (err) => {
          console.log(err);
        });

However, using this plugin i get base64File with the below value:

data%3Aimage%2F%3Bcharset%3Dutf-8%3Bbase64%2C%2f%2FFsQBIF%2FAFAC....

I cannot play this encoded audio after sending it to the server, i believe it is because the file starts data%3Aimage... not with data%3Aaudio...

So any idea what am i doing wrong?

your work is nice! check the answer I tried the algorithm there by native lib it did not work for me but I changed the track and used this plugin that I showed down below! — Rizwan Atta, Jul 01 '18 at 00:48

Gonzalo Carmenado · Answer 1 · 2019-03-01T13:07:27.203

Use my answer in this post. It is an official library. Ionic 3 get base64 audio string from recorded file

To add the plugin in your project:

Use:ionic cordova plugin add com-badrit-base64 to add the pluggin.
Use:npm install @ionic-native/base64 to add the module in your proyect and your package.json
Import in your module.ts importing the libary like:import { Base64 } from "@ionic-native/base64";

Add it in the providers JSON.

providers:[
      Camera,
      Media,
      File,
      SpeechRecognition,
      Base64,
],

Declare this new library in constructor of your component:private base64:Base64,

Use the method.

this.base64.encodeFile(this.filePath + this.fileName).then(
(base64:any) =>{
  console.log('file base64 encoding: ' + base64);
  var x = base64.substr(13,base64.length);
  x = "data:audio/mpeg;base64" + x;
});

Just change the import to import { Base64 } from "@ionic-native/base64/ngx" — Carlos Montiel, Oct 23 '19 at 17:19
@CarlosMontiel ngx is for ionic 4 and answer is correct for ionic 3 :) — Sayed Mohd Ali, Jan 14 '20 at 08:42

score 0 · Answer 2 · answered Jul 01 '18 at 00:45

I have different solution for this! as the basic native bas64 was not working properly

Solution

I have this amazing library that I used before to do audio conversion to base 64
//Encode Audio MP3 to Base64 var pathToFile = "/pathToFile/audio.mp3";

Base64ToAudio.readAudio(pathToFile, 
    function(sourceAudio)
    {
        console.log(sourceAudio) //Return Base64 String
    },
    function(error)
    {
        console.log(error);
    }
);

//Decode Audio MP3 from Base64 and save file on storage.
var conf = { "b64string": sourceAudio, "filename": "new-voice.mp3", "folder": "/pathToDirectory/", "overwrite": true };

Base64ToAudio.saveAudio(conf,
    function(success){
        console.log(success); //Return OK when the file is generated.
    },
    function(error){
        console.log(error);
    }
);

thank you for your post. But can you explain how to integrate this lib in with my ionic project?? — Abbass Wehbe, Jul 01 '18 at 10:24

score 0 · Answer 3 · answered Jul 01 '18 at 11:40

0

You could achieve this using FileReader.readAsDataURL():

let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
  let base64 = reader.result // Here is your base64.
}

answered Jul 01 '18 at 11:40

Simon L. Brazell

1,132
8
14

thanks. But do you have any idea how to convert mediaObject to a blob or file type?? – Abbass Wehbe Jul 01 '18 at 13:36
Sorry I assumed you had a file object, so the audio and file objects in your code are just file paths? – Simon L. Brazell Jul 02 '18 at 00:21
the audio is of type mediaObject and i have its path(filepath) – Abbass Wehbe Jul 02 '18 at 09:49
Did you try creating a `File` object first using the path in the constructor and then using this object in the `reader.readAsDataURL()` call above? E.g. `new File("/path/to/file");` – Simon L. Brazell Jul 03 '18 at 10:55

convert audio file to base64 in ionic 3

3 Answers3

Linked