Audio and Video in Cross-Platform Mobile Apps


Altova MobileTogether combines UI design by visual drag and drop with functional programming using Actions and Action Trees to let developers quickly build mobile apps for iOS, Android, and Windows devices. MobileTogether 2.2 recently added support for multimedia features that will delight end users with sound effects, video, and audio recording functionality.

Add audio and video to delight mobile app users

Add Sound Effects to Cross-Platform Mobile Apps

Sound effects are common in mobile apps and serve as auditory confirmation that an action has been performed. For instance, in a sales dashboard app with alternate reports by region or product, we might want to add a sound effect when switching between views.

A cross-platform app to report daily sales created using MobileTogether

The two main views of a sales by day dashboard are shown above. The user toggles between views by tapping the navigation button at the top left. To add a sound effect to the button, we create an Action Group in the MobileTogether Designer:

Action to play sound for cross-platform mobile apps

The original sound comes from an audio file that can be specified as a file name or URL. We also specified that the sound will play from the start of the file, and its duration will be 1 second.

We optionally provided the name of a cache file of the end user device. When the action group is executed, the mobile device first looks for the local cache file. The file is only downloaded from the MobileTogether Server if the cache file does not exist.

Developers have complete control over the cache file location for each mobile device OS. Clicking the button next to the cache file name opens the cache file dialog:

Defining an audio cache file for mobile apps

By the way, the audio action can do more than just play a sound file:

Audio action functionality

You could even combine a collection of sounds in a single file and use the Audio Seek to action to select any individual effect.

Now we can assign the action group to the main navigation button of our dashboard app:

Assigning an action group to a button in MobileTogether

We can add the same action group to the control actions for the buttons at the top right of our app that switch the reports between units and dollars.

Add Video to Cross-Platform Mobile Apps

The video action works similarly to the audio action. The About app on the MobileTogether Demo server and installed with the MobileTogether Designer contains a video example with video actions assigned to buttons:

Programming a video play button in MobileTogether

You can apply various forms of the video action to create all the play, pause, rewind and other video buttons users expect. But programming the buttons yourself is optional – you can choose default controls that overlay the video frame:

Video control properties in MobileTogether

Audio Recording in Cross-Platform Mobile Apps

MobileTogether also includes an audio action to let developers embed sound recording into a larger app. For instance, an app for insurance claims adjusters can display information about a claim, then allow the adjuster to take a picture and dictate a commentary to be associated with the case.

Audio recording featrues for cross-platform mobile apps

The MobileTogether sound recording action lets the developer specify the audio file format (encoding) and sampling rate, which determine the quality of the recording, or to limit the duration or recorded file size.

Download the free MobileTogether Designer to add audio and video to your own cross-platform mobile apps in record time!

Tags: , , , , ,