AudioRecorderAndPlayer Control

Description

The AudioRecorderAndPlayer control allows you to add a control to the UX component to play audio files and to record audio files in Cordova applications. Rich Data Capture.

In order for the UX Audio Player and Audio Player/Recorder controls to work with iOS 12.2, the iOS Media Playback Requires User Action property must be disabled in the Cordova configuration. This is the default value for new Cordova projects using Alpha Anywhere build 5771 and newer.

To change this setting in existing projects, check the Show Advanced Options property in the Cordova App Builder Genie and uncheck the Media Playback Requires User Action option.

A separate AudioPlayer control is also available. The AudioPlayer control and can be used in web and mobile applications.

To add a new AudioRecorderAndPlayer control to the UX, select the [More...] entry in the controls toolbox (in the 'Data Controls' section) and then select the 'AudioRecorderAndPlayer' control.

images/selectaudioplayerfrommore.png

The AudioRecorderAndPlayer controls is a dual purpose control. It can be used to play audio files (or streams) and it can also be used to record audio files.

You can only record audio files if you are using Cordova.

When you build your Cordova application you must must ensure that the Media plugin has not been selected:

images/pgMedia.gif

and that the Media With Compression plugin has been selected.

images/pgMediawithCompression.jpg

In addition, you are likely to need to upload the captured audio files to a server so the following Cordova plugins should also be loaded: Device, File, File transfer.

When you add an AudioRecorderAndPlayer control to your UX you customize the control properties by clickin the smart field for the Control properties.

The customization genie allows you to set customize text and also set the maximum recording duration (in seconds).

When the component is run, the AudioRecorderAndPlayer control will look like this (if not audio file has been loaded for playback):

images/audiorecorderplayer1.gif

The red circle button will put the control into record mode. When the control is in record mode, it will appear as follows:

images/audiorecorderplayer2.gif

The Done button (text on this button is customizable -- you can use language, or text dictionary tags for International applications- <a5:r> or <a5:t>) becomes enabled. This button indicates that you want to end the recording. The record button changes to a Pause button. You can use this button to pause the recording.

The horizontal line at the top of the control indicates the recording level. The color of the line will be orange, green or red to indicate if the recording level is too low, ok or too high.

The number on the right indicates the duration of the recording.

If you set the value of the control to an audio stream or an audio file ( using the {dialog.object}.setValue() method ), the control's appearance will change as shown below.

The control is now in 'Player' mode. The play button in the center of the control will start playback. The small record button at the left of the control will allow you to switch the control from 'Player' mode to 'Record' mode.

images/audiorecordplayerinplaymode.gif

JavaScript Methods 

JavaScript methods are available for the AudioRecorderAndPlayer control. Methods can be used for recording and playback. To call the methods, you must first get a reference to the JavaScript object for the AudioRecorderAndPlayer control using the {dialog.object}.getControl() method:

//Get a pointer to the AudioRecorderAndPlayer control with the ID 'AUDIO_CONTROL':
var audioObj = {dialog.object}.getControl('AUDIO_CONTROL');

if (audioObj) {
    // Pause the recording
    audioObj.pause();
}

The AudioRecorderAndPlayer has methods for both playback and recording. See the A5.audio Namespace for more information on the methods and properties available for the AudioRecorderAndPlayer JavaScript object.

Inserting an Add-in Control 

Add-in Controls are inserted using the More... option in the Data Controls section of the UX Builder.

/documentation/pages/Guides/Mobile and Web Components/UX/Controls/Data Controls/images/more.png

Select the control you would like to add and click OK.

/documentation/pages/Guides/Mobile and Web Components/UX/Controls/Data Controls/images/moreCtrlDlg.png

In addition to the controls that ship with Alpha Anywhere, you can also create your own add-in controls. See How to Create Add-in Controls to learn more.

Limitations

Cordova Applications Only

See Also