[Audio Record Plugin] Not able to use recorded audio

Hi, hope someone can help, I'm sure im being an idiot!

This plugin essentially returns a filename and path. I can't seem to get anything out of that path. An audio object cannot read it, a FileReader cannot load it, I cant work out how to get it into a binary entitiy to insert into a database...

Any hints would be welcome.

On mobile the path it returns looks like /data/user/0/com.outsystemscloud.username.appname.files/AudioRecords/temp_X.mp4

That X keeps ticking up so there ARE some files there presumably. The mp4 bit confuses me a tad, but presumably okay.

I'm having a look at this, but ran into issues with the plugin.  I was getting an error than a Javascript string value cannot be assigned to an integer.  The plugin has this code...

$parameters.error_code = output.error_code || "";

and I needed to change it to...

$parameters.error_code = output.error_code || 0;

Does this make any sense?

I've been able to record audio... but I also can't figure out how to play it.  I've tried the Video Widget and the FileViewer Plugin.

For the Video Widget I'm setting the SourceFile to the file path returned from the Audio Recorder... via a local variable.  The file path is...

/data/user/0/com.outsystemscloud.username.appname.files/AudioRecords/temp_n.mp4 where n is the number of the latest created file.

FileViewer wants a filePath (set to the same above) and it wants a mimeType which I've set to "audio/mp4".

Nothing seems to work.  Can't be this tough... can it?

Hi, 

Regarding of play the audio you can use for example another native plugin for that task such as Media Capture

https://github.com/apache/cordova-plugin-media

On this plugin, there is a method to play audio. 

Regarding of upload audio to a database, you can use File Transfer Plugin to upload the audio to your server.
If you only want to keep the reference on local storage, you should keep the audio record on file system and only save the file path on local storage.

Thanks.

Hi Vitor... your response is very much appreciated... but I'm struggling with some basic concepts of OutSystems.

To use cordova-plugin-media I must write an OutSystems wrapper for it.  Therefore I need to do... and understand the following:

All the input and output parameters the plugin expects

How to use the device filesystem... where to save my recording... for both iOS and Android

Optionally build a filename function to automatically assign a unique recording name.

All this is ok... I can work through it.  But here's my problem.  I just want to record, save, and playback audio.  OutSystems is supposed to let me work quickly to build a mobile app.  Any time I may save using the IDE will be spent many times over trying to do something which is somewhat basic to mobile apps.  I've already spent many, many hours trying to get current existing solutions to work... which they don't.

And all this is after spending a day trying to figure out how to get the BarcodeScanner plugin to beep when it scans.  The OutSystems Plugin doesn't support that parameter... so I had to spend many hours trying to understand what was going on and how to fix it.  There are about 7 parameters for the BarcodeScanner but only 3 are supported which I don't really understand.  Easy enough to try and fix once it's all understood... but there's no doc on any of this stuff.  I want to embrace OutSystems... but I'm finding it tough.

Victor,

Sorry but you write about using some further plugins to play the file or write it somewhere, I actually have tried already. I have also tried html5 filesystem apis to pull the binary info from the filepath returned from the plugin, I have tried playing from the path using native javascript audio entities. I have now edited the audio plugin to rule out a scoping (espace?) issue. Everything I try to do with the 'filepath' returned by the audio plugin errors, everything tells me 'thats not a blob' or 'there is no data' etc. Really, I originally created this thread because I cannot get anything out of the plugin, it records and plays itself, but when the little tick is pressed and the UI for the plugin closes, the filepath variable it then returns points to a file on the local system of mobile device, and that fileh is either empty or it is not accessible or something. The audioplugin is worthless if I can't do anything with the path.

I'm sure if someone who really knew outsystems were to spend 10mins, they could create a demo app which uses the audioplugin, takes the filepath returned by it and does SOMETHING, anything, to show how it can be used. I would love to save it to database entity, but I can figure that out if only I could actually get at the data at all. I mean if you were to make a demo oml with just hte plugin attached to a button and then the binary of the file ending up in a variable, or something playing the file I could at least rule out that my devices I am testing on aren't to blame somehow.

In the meanwhile I've started writing my own plugin to use the mediarecorder api and will share that if I can create something which will sit inside an outsystems app and allow audo capture (and subsequent access to the captured audio!!). 

Have to agree Danny... it's frustrating.  I've looked at writing the OutSystems wrapper, as well, for the Media Plugin.  I was thinking of using bits and pieces from the OutSystems Camera Plugin wrapper to ensure the basics are covered... and then work through what Media needs... at least for audio recording.

I've been trying to create the OutSystems wrapper for cordova-plugin-media but I'm getting a "Media is not defined" error.

I'm checking for Cordova... but I'm not sure how to check for the Plugin.  E.g. the CheckCameraPlugin does this...

$parameters.IsAvailable = !!window.cordova && !!navigator.camera;

But I'm not sure what the equivalent would be for the Media plugin.

My Media Plugin Extensibility Configuration is: 

{
"plugin":
{
"url": "https://github.com/apache/cordova-plugin-media",
        "variables": [{
            "name": "MICROPHONE_USAGE_DESCRIPTION",
            "value": "This app will access your Microphone to record audio."
        }]
}
}

And my RecordAudio code is:

function onSuccessMedia(mediaFile) {
    $parameters.AudioRecorded = "myrecording.aac";
    $resolve();
}

function onErrorMedia(err) {
    $parameters.error_code = err.code;
    $resolve();
}

// Record audio
var mediaRec = new Media('myrecording.aac', onSuccessMedia, onErrorMedia);
mediaRec.startRecord();

Can anyone see what is wrong?  Thanks.  David

I changed the Extensibility Configuration to:

"url": "https://github.com/apache/cordova-plugin-media#3.0.1"

And my Media undefined error is now fixed.

I can record and play back.  Still getting errors but I'll have to work through those.

And then look at saving.

Danny O'Neill wrote:

I'm sure if someone who really knew outsystems were to spend 10mins, they could create a demo app which uses the audioplugin, takes the filepath returned by it and does SOMETHING, anything, to show how it can be used.

=========================================

This plugin is straightforward to use and it allows you to, out of the box, record an audio file, save it on the filesystem and even playback that audio file. This plugin does one thing and if you need further features you can leverage those features using other plugins or even build your own (See official documentation).

If you allow me the analogy, the good old tape recorders were awesome recording audio to tapes but they weren't able to distribute those tapes... it wasn't their responsibility to do so! In the same way, this plugin allows you to record audio and save the file on the filesystem and it is up to you, the developer, to do whatever you need to do with the resulting file. OutSystems mobile apps bring another dimension of requirements into play: mobile knowledge and specifically cordova. If for some reason the platform doesn't provide some functionality out of the box there's many ways to extend them: you could build custom plugins for mobile apps or even server side extensions but, of course, you do need to know how to...

This plugin returns a full path for the file but if you want to use that file in, lets say for example an audio tag, you need to prefix the scheme "file://". So, for a path:

"\/var\/mobile\/Containers\/Data\/Application\/916BB676-E259-43E7-A65A-E52088C7020F\/tmp\/OSAudioRecordings\/temp_002.mp4"

make sure that you prepend it with file scheme, like so:

file://\/var\/mobile\/Containers\/Data\/Application\/916BB676-E259-43E7-A65A-E52088C7020F\/tmp\/OSAudioRecordings\/temp_002.mp4"

Now you might encounter another problem if you try to use that path on an audio html element that is completely non-related to this plugin or any plugin whatsoever: you might break the Content-Security-Policies (CSP) when trying to load a local file directly into an element. Here's some documentation that might help.

If what you want is to save the audio file on the database instead of simply playing it on a audio element, you'll have to use the file plugin in order to read the bytes from the file and store on the database. I'm not entirely sure on the provided client actions of the File Plugin but the wrapped cordova plugin offers the necessary APIs to do so.

For example, the following would allow you to obtain a FileEntry instance for the audio file which you can use to read the content of the file as an ArrayBuffer:

window.resolveLocalFileSystemURL("file://\/data\/user\/0\/com.chuckytuh.audiorecorder.sampleapp\/files\/AudioRecords\/temp_3.mp4", function (fileEntry) {
    fileEntry.file(function (file) {
        var reader = new FileReader();
        reader.onloadend = function () {
            // this.result is the loaded ArrayBuffer in this case
            console.log("Successful file read: " + this.result);
            // do whatever you need with the result, for example, save on the database!
        };

        reader.onloadstart = function () {
            console.log("On load started");
        };

        reader.onerror = function (err) {
            console.error(err);
        };

        reader.onprogress = function (e) {
            console.log(e);
        };

        // there are other utility methods to read data, namely:
        // reader.readAsBinaryString(file)
        // reader.readAsDataURL(file)
        reader.readAsArrayBuffer(file);
    }, function (err) {
        console.error(err);
    });
}, function (err) {
    console.error(err);
});

If you want to playback the file using the media plugin I am pretty sure that all you need is to prefix the path with the file:// scheme and you're all set..

Hope this sheds some light into a possible solution.

Cheers, 

João Gonçalves

Hello, 
I'm new to outsystems mobile and I'm trying to record audio, but whenever I call the CheckAudioRecordPlugin, PluginIsLoaded or RecordAudio action i get an error "Can not read property 'audiorecorder' of undefined" , has anyone had a similar error? I already added the url plugin but the error continues, 
"https://github.com/apache/cordova-plugin-media#3.0.1",
                "variables": [{
                    "name": "MICROPHONE_USAGE_DESCRIPTION",
                    "value": "This app will access your Microphone to record audio."
                }] 

Thanks, 
Pedro Afonso

Pedro, I'm not sure you use the plugin that way.  The plugin already references the github URL.  You need to add the plugin as a dependency to your app.

When I tried using this plugin I could record successfully, and play back the recording using the plugin's play button, but I could never play the recording from my own button or get access to the audio file.

Davidk, you're right, the first time i tried it, i probably did not give permission for voice recording, it's working fine now. 

Thanks

Hi guys,

Did you manage to get it working?

Cheers

Hi Henrique Batista,

Yes, it's working fine.

Good to hear :)

Just asking because I hit on this issues and was able to build an app with the sound recorder and save it to the DB. I was wondering if I should make a sample component with it.

Cheers

Hi i believe this plugin is no longer working. I have tested it and when i call the action "CheckAudioRecordPlugin" or any other action of this plugin the follow error pops up:

Im testing direcly by using an android phone, can you guys check if your previous implementations still work?  Did anyone test this plugin on P10 for android?

Thank you in advance

Just tested an app I created under P10, Android, using this plugin... and I'm not getting an error.  Recording does work.

I also just added a button which calls "CheckAudioRecordPlugin" and it returns True.

Make sure the Common Plugin is added to your app as a dependency... and maybe refresh your dependencies.

Everything is refreshed even the plugin.  I just created a simple action calling this "CheckAudioRecordPlugin" and i am getting the same error when testing on the phone. Do i need to install anything on the phone to be able to use this? Currently im testing via Outsystems Now in an android device.

I did an action just to call this method and i'm still getting the same error. Im attaching the OML so you can check if i missed anything. All i want is to get a "true" from that method when testing on the phone

Thank you in advance

The issue, I believe, is that OutSystems Now does not include the Audio Record Plugin.  OutSystems Now must include any plugin you want to access... and it supports only a handful of plugins...

https://success.outsystems.com/Documentation/10/Extensibility_and_Integration/Mobile_Plugins

Since you're using Android it's really easy to build and install your own app.  Open your app, then go back to the Development tab and click on the Native Platforms tab.  Generate an Android app and install.

hey guys im having the same problem i can record the audio but i just cant save it and this is really freaking me i've been trying for hours ...can someone help here i wanna be able to save the audio and play it on the app...

Hey MUSA,

Did you take a look on this sample?

Hope it helps

Cheers

Henrique Batista wrote:

Henrique... that is an excellent example... thank you.

You're welcome! 

I also spent some hours suffering on it :D

thanks guys i think this sample will be helpful a lot thank you i'll check it out tonight

hey man its me again i dont mean to bother but im kind of a slow leaner can you guide me step by step on this

Hey,

You didn't wrote any doubt, so I can't help you..

I gave you an example on that sample, what road block are you hitting?

Cheers

hey guys i managed to do the plugin,it does record now but problem is that it doesnt want to save can anyone help here?...after recording i try to save but it gives me this message..."cannot assign a javascript string with value to an output parameter of type integer check the javascript node 'OpenAudioRecorder" of the action 'RecordAudio'. please help me solve this problem please...

MUSGADO wrote:

Hi MUSGADO,

Your problem is related with the javascript on the RecordAudio action on the plugin (AudioRecordPlugin).

The output "error_code" has the wrong data type, just change it to text, and it should work.

João Araújo wrote:

thank you so much i needed to Fix that for a very long time thank you

Hello,

I downloaded the sample app and changed the javascript error_code to 0 so that it worked.
I can record and it saves it to the database but when I click the play button it loads the action, it goes to the GetMediaBinary but after that, it stops. Without an error or anything. I checked the database and it has binary data in there. It just never runs the javascript and it likewise also does not play the file.

Can anybody help me with this?

I provided the .oml

Thanks in advance,

Lars

Hi Lars,

Did you manage to solve it?

If not can you provide more details, in which device are you testing? Any console errors?

Cheers

Hi Henrique,

No I didn't solve it yet ;(

I tested it on my oneplus 6 android phone.

There were no errors that's the weird part about it.

Can you/somebody download the oml and try if it works?

Thanks

Lars

Hey Lars,

Have you tested in the browser? If not please do so, and check the browser console to see if there's any errors.

 I just tested the available sample on a Galaxy S10 and it's working.

The only difference from the sample to yours is the volume inside the play action missing on your code:

Cheers

Hey,

I still don't know what was wrong but I got it to work.

It doesn't work when I generate the app (android) from in my environment but it works when you generate from another environment.

Thanks guys!

Cheers!