AudioRecorder Introduction

AudioRecorder is the object that provides the required functions to record the sound signal input through the microphone as the audio data. Audio data can be saved as wav, ogg, mp3, AMR_NB, and AMR_WB file formats, and it is automatically set to mp3 in the Android environment, and wav in iOS, unless the user sets the format separately.

Recording Audio

Implement the simple recorder using the AudioRecorder object function. The basic audio recording process can be largely divided into two steps, which are setting the audio format and recording.

For setting the audio format, the audioformat, samplerate, and channelconfig properties are used. Enter the desired property value as necessary. If the property is not set, then it is set to mp3, 8000 Hz, and mono for Android, and wav, 8000 Hz, and mono for iOS.

For setting, the audioformat, channelconfig, and samplerate properties are used, and for recording, the recordingStart, recordingStop, pause, and resume methods are used. You can use the appropriate combination of properties and methods according to the needs when implementing the function.

${sample}

The following is an example of the recorder that implements the record, pause, and stop functions.

If you touch the Record button, the recording starts, and if you touch the Stop button, then the recording ends. When you finish recording, the audio file is created and a list of files is displayed at the bottom. If you touch the Pause button during recording, the recording is paused, and if you touch the Resume button, then recording resumes.

Double-touch the audio file name to delete the file. When you close Form, all saved audio files are deleted.

${sample_element}

AudioRecorder > audiofile

This is the property that sets the file name to save the audio data. Enter the path and file name as the argument.

AudioRecorder > recordingStart

This is the method that starts recording audio data.

AudioRecorder > recordingStop

This is the method that stops recording audio data.

AudioRecorder > pause

This is the method that pauses recording audio data. This function is only supported in the iOS Nexacro browser environment.

AudioRecorder > resume

This is the method that resumes recording audio data. This function is only supported in the iOS Nexacro browser environment.

AudioRecorder > onrecording

This is the event that occurs when the audio data is being recorded.

AudioRecorder > onstop

This is the event that occurs when the recording of audio data has ended.

AudioRecorder > onerror

This is the event that occurs when the recording of audio data fails.

${sample_step}

Add the AudioRecorder object. The added object can be checked in the Invisible Object window.

Place the Static component to display the file currently recording and the recording progress time, the Button component to perform record/pause/stop functions, the Grid component to manage saved record files and lists, and the Dataset and VirtualFile objects appropriately as shown in the example figure.

Components and objects used to configure the screen are as follows.

Declare enum type variable, variable to manage timer information, and variable to manage the file path and name as global variables to manage the status information of the recorder.

eStatus = {
	RECORD: 0,
	STOP: 1,
	PAUSE: 2,
};
var eRecordStatus = eStatus;

var tMin=0, tSec=0, tMSec=0;
var keepgoing=false; 

var DIRECTORY = "%USERAPP%File/";
var FILE_NAME = "Rec";
var FILE_COUNT = 0;

var strOS = nexacro.System.osversion;
if(!strOS.toLowerCase().search(/android/))
{
	strOS = "ANDROID";
}
else if(!strOS.toLowerCase().search(/ios/))
{
	strOS = "IOS";
}

Write the timer method that converts the recording time into minutes, seconds, and milliseconds to make it easier for the user to view and display them on the Static component as follows. The timer method is called periodically through the ontimer event.

this.timer = function(keepgoing)
{ 
	if(keepgoing)
	{ 
		tMSec += 1;
		
		if (tMSec == 100)
		{
			tMSec = 0;
			tSec += 1;
		}
		
		if (tSec == 60)
		{
			tSec = 0;
			tMin += 1;
		} 
	   
		strSec = ""+ tSec;         
		strMin = ""+ tMin;         
		strMSec = ""+ tMSec; 
	  
		if (strSec.length != 2)
		{ 
			strSec = "0"+ tSec; 
		} 
		if (strMin.length != 2)
		{ 
			strMin = "0"+ tMin; 
		} 
		if (strMSec.length != 2)
		{ 
			strMSec = "0"+ tMSec; 
		} 	
		
		this.stt_time.set_text(strMin +":"+ strSec +":"+ strMSec);
	}
}

Write the initVar method that initializes time-related variables and the timer as follows.

this.initVar = function()
{
	tMin=0;
	tSec=0;
	tMSec=0;
	keepgoing=false;
	
	this.stt_time.set_text("00:00:00");
	
	this.killTimer(0);
}

Write the changeStatus method that changes the status of the Button component according to the status of the recorder as follows.

this.changeStatus = function(status)
{
	switch(status)
	{
		case eStatus.RECORD:
			eRecordStatus = eStatus.RECORD;
			
			if (strOS == "IOS")
			{
				this.btn_record.set_visible(false);
				this.btn_pause.set_visible(true);				
			}
			else
			{
				this.btn_record.set_enable(false);			
			}
			this.btn_stop.set_enable(true);			
			break;
			
		case eStatus.PAUSE:
			eRecordStatus = eStatus.PAUSE;
			this.btn_record.set_visible(false);
			this.btn_pause.set_visible(true);
			this.btn_stop.set_enable(true);
			break;
			
		case eStatus.STOP:
			eRecordStatus = eStatus.STOP;

			if (strOS == "IOS")
			{
				this.btn_record.set_visible(true);
				this.btn_pause.set_visible(false);			
			}
			else
			{
				this.btn_record.set_enable(true);			
			}
			this.btn_stop.set_enable(false);			
			break;
	}
}

Write the onload event function of Form as follows. If there are previously recorded audio files, then the list is output to Grid.

this.example_audiorecorder_01_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	this.VirtualFile00.getFileList(DIRECTORY, ".mp3", VirtualFile.findFileOnly);
};

Write the ontimer event function of the Form as follows. The timer method is called whenever the event occurs to update the progress time.

this.example_audiorecorder_01_ontimer = function(obj:nexacro.Form,e:nexacro.TimerEventInfo)
{
	if(e.timerid == 0)
	{
		this.timer(true);
	}
};

Write the onbeforeclose event function of the Form as follows. Delete the audio file created when the Form is closed.

this.example_audiorecorder_01_onbeforeclose = function(obj:nexacro.Form,e:nexacro.CloseEventInfo)
{
	for(var i=0; i<FILE_COUNT; i++)
	{
		this.VirtualFile00.remove(DIRECTORY + FILE_NAME + i +".mp3");
	}
	
	this.VirtualFile00.getFileList(DIRECTORY, ".mp3", VirtualFile.findFileOnly);
};

Write the onstop event function that occurs when the recording of audio data is finished as follows.

this.AudioRecorder00_onstop = function(obj:nexacro.AudioRecorder,e:nexacro.AudioEventInfo)
{
	this.initVar();

	switch(e.reason)
	{
		case 4: //End of record
		case 5: //STOP
			var strFileName = FILE_NAME + FILE_COUNT + ".mp3";
			var row = this.ds_filelist.addRow();	
			var ret = this.ds_filelist.setColumn(row, "FileName", strFileName);
			
			trace("ret = "+ ret);
			trace(FILE_NAME + FILE_COUNT + ".mp3");
			trace("FILE_COUNT = "+ FILE_COUNT);

			FILE_COUNT++;

			break;
		case 6:	//PAUSE
			break;
	}
};

Write the onerror event function that occurs when the recording of audio data fails as follows.

this.AudioRecorder00_onerror = function(obj:nexacro.AudioRecorder,e:nexacro.AudioErrorEventInfo)
{
	var strResult = "\n- AudioRecorder00_onerror"
	+"\n["+ e.errortype +"] "+ e.statuscode +" "+ e.errormsg;

	alert(strResult);
	
	switch(e.statuscode)
	{
		case "1301":	//already recording
			break;
		case "1006":	//play selection error (startpos >= stoppos)
		case "1007":	//not loaded
		case "1009":	//can't resume
		case "1302":	//not recording
			this.initVar();		
			break;
		case "1306":	//exist file
			FILE_COUNT++;
			this.btn_record_onclick();
			break;
		default:
			break;	
	}
};

Write the onsuccess event function that occurs when the VirtualFile object is successful as follows.

this.VirtualFile00_onsuccess = function(obj:nexacro.VirtualFile,e:nexacro.VirtualFileEventInfo)
{
	switch(e.reason)
	{
		case 8:		//getFileList		
			this.ds_filelist.clearData();
			
			for(var i=0; i<e.fileattributelist.length; i++)
			{		
				if(e.fileattributelist[i].filename.indexOf(FILE_NAME) > -1)
				{
					trace("e.fileattributelist["+ i +"] = "+ e.fileattributelist[i].filename);
					
					row = this.ds_filelist.addRow();	
					this.ds_filelist.setColumn(row, "FileName", e.fileattributelist[i].filename);
					
					FILE_COUNT++;
				}
			}
			break;
	}
};

Write the onerror event function that occurs when the VirtualFile object is successful as follows.

this.VirtualFile00_onerror = function(obj:nexacro.VirtualFile,e:nexacro.VirtualFileErrorEventInfo)
{
	var strResult = "\n- VirtualFile00_onerror"
	+"\n["+ e.errortype +"] "+ e.statuscode +" "+ e.errormsg;
	
	alert(strResult);	
};

Write the oncelldblclick event function that occurs when the Cell of the Grid component is continuously touched as follows.

this.grd_filelist_oncelldblclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	var rowPos = this.ds_filelist.rowposition;
	
	alert("grd_filelist_oncelldblclick: "+ DIRECTORY + this.ds_filelist.getColumn(rowPos, "FileName"));
	
	this.VirtualFile00.remove(DIRECTORY + this.ds_filelist.getColumn(rowPos, "FileName"));
	this.ds_filelist.deleteRow(rowPos);
};

this.grd_filelist_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	//play? stop?
};

Write the onclick event function that occurs when the Record button is touched as follows.

this.btn_record_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.stt_filepath.set_text(DIRECTORY + FILE_NAME + FILE_COUNT);
	
	this.AudioRecorder00.set_audiofile(this.stt_filepath.text);

	if(this.AudioRecorder00.recordingStart(1000))
	{
		this.setTimer(0, 10);
		this.changeStatus(eStatus.RECORD);
	}
};

Write the onclick event function that occurs when the Pause button is touched as follows.

this.btn_pause_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.AudioRecorder00.pause();	
	this.changeStatus(eStatus.PAUSE);
};

Write the onclick event function that occurs when the Stop button is touched as follows.

this.btn_stop_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.AudioRecorder00.recordingStop();	
	this.changeStatus(eStatus.STOP);
	
	this.killTimer(0);
};

When Form is loaded, the recorder is output, and if there is an existing recorded file, then it is output at the bottom.

If you touch the Record button, then the recording starts, and if you touch the Stop button, then the recording ends. When you finish recording, the audio file is created and displayed at the bottom. If you touch the Pause button during recording, then the recording is paused, and if you touch the Resume button, then recording resumes.

Double-touch the audio file name to delete the file. When you close Form, all saved audio files are deleted.