Record Voice in SAP Mobile Development Kit (MDK) Using NativeScript Plugin (Android)

[sithara]

Prerequisites

• SAP Mobile Services account

• MDK project opened in Visual Studio Code

• NativeScript CLI installed

• Custom MDK client (mandatory for NativeScript plugins)

  ---

  Step 1: Install the NativeScript Audio Plugin

  Run the following command inside your .mdkproject folder:

  npm install @nativescript-community/audio

  Step 2: Update MDKProject.json

  Add the plugin under Externals, NSPlugins, and NPMPlugins

  { "AppDisplayName": "Audio Recorder MDK",
    "AppName": "AudioRecorderMDK",
    "AppVersion": "1.0.0",
    "BundleID": "com.sap.mdk.audiorecorder",
    "Externals": ["@nativescript-community/audio", "@nativescript-community/perms"],
    "NSPlugins": ["@nativescript-community/audio", "@nativescript-community/perms"],
    "NPMPlugins": ["@nativescript-community/audio", "@nativescript-community/perms"],
    "UrlScheme": "mdkclient"
  }

  Step 3: Update  settings.json

  Add the plugin to mdk.bundlerExternals in the settings.json file in Visual Studio Code. 

  "mdk.bundlerExternals": [
    "@nativescript-community/audio"
  ]

  Step 4: Create the Android Voice Recording Rule

  Create the rule file:

  /Rules/RecordAudioAndroid.js

  Behavior

  • First tap → start recording

  • Second tap → stop recording

  • Audio saved as .3gp

  • UI status updated using ClientData

    ---

    RecordAudioAndroid.js 

     

    import  { TNSRecorder } from "@nativescript-community/audio";
    import { knownFolders } from "@nativescript/core";
    
    let recorder;
    let isRecording = false;
    
    export default async function RecordAudioAndroid(context) {
        const pageProxy = context.getPageProxy();
    
        try {
            /* ---------- STOP RECORDING ---------- */
            if (isRecording && recorder) {
                await recorder.stop();
                recorder = null;
                isRecording = false;
    
                pageProxy.getClientData().AudioRecordStatus =
                    "Recording completed";
                await pageProxy.redraw();
                return;
            }
    
            /* ---------- START RECORDING ---------- */
            if (!TNSRecorder.CAN_RECORD()) {
                throw new Error("Microphone not available");
            }
    
            recorder = new TNSRecorder();
            recorder.debug = true;
    
            const folder = knownFolders.documents();
            const filePath = `${folder.path}/audio_${Date.now()}.3gp`;
    
            pageProxy.getClientData().AudioRecordStatus =
                "Recording in progress... Tap again to stop";
            pageProxy.redraw();
    
            await recorder.start({
                filename: filePath,
                channels: 1,
                sampleRate: 16000,
                android: {
                    source: 0,       // MIC
                    audioEncoder: 3, // AAC
                    outputFormat: 2
                }
            });
    
            isRecording = true;
    
        } catch (error) {
            recorder = null;
            isRecording = false;
    
            pageProxy.getClientData().AudioRecordStatus =
                "Recording failed";
            await pageProxy.redraw();
        }
    }.  

    Note : If you want an uncompressed format, you can get a .wav file by following the below configuration:

    await recorder.start({
    filename: recordedFilePath,
    channels: 1,
    sampleRate: 16000,
    android: {
    source: 0, // MIC
    wavAudioFormat: 2 // PCM_16BIT
    }
    });

    ---

    Step 5: MDK Page Configuration

    The recording is triggered by tapping a microphone image.

    AudioPage.page

     

    {
      "_Type": "Page",
      "_Name": "AudioPage",
      "Controls": [
        {
          "_Type": "Control.Type.SectionedTable",
          "Sections": [
            {
              "_Type": "Section.Type.Image",
              "Image": "/AudioRecorderMDK/Images/Mic.png",
              "Width": 200,
              "Height": 200,
              "Alignment": "Center",
              "OnPress": "/AudioRecorderMDK/Rules/RecordAudioAndroid.js"
            },
            {
              "_Type": "Section.Type.KeyValue",
              "KeyAndValues": [
                {
                  "_Type": "KeyValue.Type.Item",
                  "Value": "{#Application/#ClientData/AudioRecordStatus}"
                }
              ]
            }
          ]
        }
      ]
    }

    Step 6: Android Permission

    Ensure the microphone permission exists in the custom MDK client. Add this in the AndroidManifest.xml found in the below path

    App_Resources_Merge/Android/src/main/AndroidManifest.xml 

     Add the below line in AndoidManifest.xml

    <uses-permission android:name="android.permission.RECORD_AUDIO" />

    The permission prompt is automatically shown when recording starts.

    ---

    Step 7: Run and Test

    Deploy your MDK app to your desired environment. 

    tns run android

    Step 8: Distribution

    A customized mobile development client is required for distributing this application on Android and iOS platforms. For more details on how to generate the customized MDK client refer to step 4 in the tutorial: Build Your Mobile Development Kit Client Using Cloud Build Service

    Conclusion

    Using the @nativescript-community/audio plugin, voice recording can be seamlessly integrated into SAP MDK applications on Android. The .3gp format ensures maximum compatibility and efficiency, making it ideal for enterprise mobile use cases such as inspections, voice notes, and field reporting.