Consume native script plugin for playing audio in ...

panushjain · ‎2024 Jul 12

The SAP Mobile Development Kit (MDK) empowers developers to create cross-platform mobile applications with ease. However, there are times when the standard features of MDK need to be extended to incorporate native functionalities such as audio playback. This is where NativeScript plugins come into play. In this blog post, we will explore how to consume a NativeScript plugin for playing audio/sound within an MDK application on both Android and iOS platforms.

Prerequisites

Before we dive into the implementation, ensure you have the following prerequisites:

SAP Mobile Services Account: Access to SAP Mobile Services and a configured MDK app.
NativeScript CLI: Installed on your development machine.
Base MDK Project: Set up the base MDK project in Visual Studio Code.

Step 1: Adding the NativeScript Audio Plugin

To add the NativeScript plugin for audio playback in an MDK project, follow these steps:

Install Plugin: Run this command in the terminal within your .mdkproject folder:

npm i nativescript-audio

Update MDKProject.json: Add the plugin to the Externals, NSPlugins, and NPMPlugins sections:

{
  "AppDisplayName": "Base MDK Project",
  "AppName": "BaseMDKProject",
  "AppVersion": "1.0.0",
  "BundleID": "com.sap.csd.mdk.basemdkproject",
  "Externals": ["nativescript-audio"],
  "NSPlugins": ["nativescript-audio"],
  "NPMPlugins": ["nativescript-audio"],
  "UrlScheme": "basemdkproject",
}

Update settings.json: Add the plugin to mdk.bundlerExternals in the settings.json file in Visual Studio Code. Here is the screenshot for reference:

Step 2: Integrating the Audio Functionality to MDK

To expose the audio playback functionality to your MDK app, you need to create an MDK rule that interacts with the NativeScript plugin code. Create a new rule file in your MDK project, e.g., OnPressPlaySound.js.

import { TNSPlayer } from 'nativescript-audio';
const fs = require('@nativescript/core/file-system');

/**
 * Play beep sound
 */
export default function OnPressPlaySound(clientAPI) {
  const player = new TNSPlayer();
  if (clientAPI.nativescript.platformModule.isIOS) { // For iOS
    const folder = fs.knownFolders.currentApp();
    const file = folder._path.slice(0, -3) + 'audio/beep.mp3';
    player.debug = true; // set true to enable TNSPlayer console logs for debugging.
    player.initFromFile({
        audioFile: file, // ~ = app directory
        loop: false,
      }).then(() => {
        player.getAudioTrackDuration().then((duration) => {
          console.log(`song duration:`, duration);
          player.play();
        });
      });
  } else if (clientAPI.nativescript.platformModule.isAndroid) { // For Android
    const logger = clientAPI.getLogger();
    console.log('Current Log Level: ' + logger.getLevel());
    player.playFromFile({
      audioFile: '~/audio/beep.mp3',
      loop: false,
    }).then(() => {
      console.log('[Audio Player] Done');
    }).catch((err) => {
      console.log('[Audio Player] Error: ' + err);
    });
  }
}

Step 3: Importing and using audio playback functionality

To utilize the audio playback functionality defined in OnPressPlaySound.js across different rules in your MDK application, follow these steps:

In the example below, consider the name of the rule as SoundCheck.js.

Importing OnPressPlaySound Function

In your SoundCheck.js rule file, import the OnPressPlaySound function from OnPressPlaySound.js.

import OnPressPlaySound from './OnPressPlaySound';

Calling the Audio Playback Function

Wherever audio playback is required within the SoundCheck.js rule, call the imported OnPressPlaySound function.

export default function SoundCheck(clientAPI) {
    // Example usage of OnPressPlaySound
    OnPressPlaySound(clientAPI);

    // Additional logic specific to SoundCheck rule
    // ...
}

The overall SoundCheck.js would look like this:

import OnPressPlaySound from './OnPressPlaySound';

/**
 * Method to check audio playback
 */
export default function SoundCheck(clientAPI) {
    // Example usage of OnPressPlaySound
    OnPressPlaySound(clientAPI);

    // Additional logic specific to SoundCheck rule
    // ...
}

To utilize the audio playback functionality defined in OnPressPlaySound.js directly from a page in your MDK application, follow these steps:

In the example below, consider a page which has a toolbar item.

Directly add the Rule in the OnPress action of a Toolbar item

"ToolBar": {
	"Items": [
		{
			"Position": "Right",
			"_Type": "Control.Type.ToolbarItem",
			"_Name": "ToolbarItem",
			"Caption": "Play audio",
			"Enabled": true,
			"Visible": true,
			"Clickable": true,
			"Style": "",
			"OnPress": "/BaseMDKProject/Rules/OnPressPlaySound.js"
		}
	]
}

Step 4: Add resource file to the project

To play sound in your MDK application, you need to include the audio file (e.g., beep.mp3) within your project. Follow these steps to ensure the audio file is correctly placed:

Important Considerations

Binary files such as .mp3 cannot be placed arbitrarily within the MDK project. For instance, placing them inside the metadata folder can lead to project build failures. To avoid such issues, the audio files must be located in a specific directory structure within your project.

Directory Structure

Create the App_Resources folder within your .mdkproject and organize the audio files as shown below:

Summary of Directory Structure

Platform	Path
Android	App_Resources/Android/src/main/assets/app/audio/beep.mp3
iOS	App_Resources/iOS/src/beep.mp3

Step 5: Deploying and Testing

Deploy your MDK app to your desired environment. Make sure to test the audio playback functionality on both Android and iOS devices to ensure compatibility and performance.

tns run android
tns run ios

Step 6: Distribution of the MDK application

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

Integrating NativeScript plugins into your SAP MDK application allows you to extend the functionality of your mobile apps with native capabilities. By following the steps outlined in this blog post, you can seamlessly integrate audio playback into your MDK app using the nativescript-audio plugin. This approach not only enhances the user experience but also leverages the power of NativeScript to bridge the gap between standard MDK features and native device functionalities.

MaximoSanchez · ‎2024 Aug 19

hello thanks for the information!
I wanted to know if you can send a voice audio in a mdk application, thanks!

panushjain · ‎2024 Aug 20

Hi @MaximoSanchez

To send voice audio in an MDK app, you’ll need to implement a custom solution, as MDK does not provide built-in functionality for this. You have two main approaches:

1. Use a NativeScript Plugin: This is a practical option if you’re working with a branded client. There might be an existing plugin that meets your needs, which would save you time and effort compared to developing a solution from scratch.

2. Create a Native Extension Control: If there isn't a suitable plugin or if your use case demands a custom approach, you can develop your own native extension control to handle voice audio within the MDK app.

Before choosing an approach, it’s advisable to explore available NativeScript plugins to determine if any fulfill your requirements. If not, you can proceed with creating your custom extension. The best path depends on your specific use case and resource availability.

Thank you.

MaximoSanchez · ‎2024 Aug 20

hi! thank you very much for your quick response.