This post is a part 36 of Intel XDK Complete Tutorial post series.
In this tutorial I will show you how to record audio using microphone in Intel XDK.
Including Cordova Capture Plugin
Intel XDK doesn’t provide any API to record audio using Intel XDK. Therefore we have to use cordova Capture plugin to record audio.
Check Capture under Plugins and Permissions section in your APP project.
Recording Audio
Here is sample code to record audio. With just few lines of JavaScript code we launched device’s default microphone application and recorded an audio.
function captureSuccess(mediaFiles)
{
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1)
{
//filesystem absolute path of the audio file
var filyeSystem_path = mediaFiles[i].fullPath;
//name of the file
var fileName = mediaFiles[i].name;
}
}
function captureError(error)
{
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
function captureAudio()
{
// Launch device audio recording application,
//Limit property is optional. It indicates how many audio clips you want to capture in one launch of microphone app. Default is 1
//Duration property is optional. It indication maximum duration in seconds for each clip. Default is infinite.
navigator.device.capture.captureAudio(captureSuccess, captureError, {limit: 1, duration: 10});
}
{
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1)
{
//filesystem absolute path of the audio file
var filyeSystem_path = mediaFiles[i].fullPath;
//name of the file
var fileName = mediaFiles[i].name;
}
}
function captureError(error)
{
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
function captureAudio()
{
// Launch device audio recording application,
//Limit property is optional. It indicates how many audio clips you want to capture in one launch of microphone app. Default is 1
//Duration property is optional. It indication maximum duration in seconds for each clip. Default is infinite.
navigator.device.capture.captureAudio(captureSuccess, captureError, {limit: 1, duration: 10});
}
Once you have finished recording audio the plugin returns list of audio files path and name in which the captured audio is stored.
On iOS the audio file format is WMV and on Android its AVC.
You can now move the file to www directory using Filesystem API and then play then play the audio using Audio Player API. You can also upload the files using File Upload API.
Complete Source Code
Here is the complete source of a sample app which records a audio and then displays its path and name.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="lib/ft/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<button onclick="captureAudio();">Capture Audio</button>
<p id="url"></p>
<p id="name"></p>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script>
function captureSuccess(mediaFiles)
{
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1)
{
var filyeSystem_path = mediaFiles[i].fullPath;
document.getElementById("url").innerHTML = filyeSystem_path;
var fileName = mediaFiles[i].name;
document.getElementById("name").innerHTML = fileName;
}
}
function captureError(error)
{
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
function captureAudio()
{
navigator.device.capture.captureAudio(captureSuccess, captureError, {limit: 1, duration: 10});
}
</script>
</body>
</html>
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="lib/ft/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<button onclick="captureAudio();">Capture Audio</button>
<p id="url"></p>
<p id="name"></p>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script>
function captureSuccess(mediaFiles)
{
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1)
{
var filyeSystem_path = mediaFiles[i].fullPath;
document.getElementById("url").innerHTML = filyeSystem_path;
var fileName = mediaFiles[i].name;
document.getElementById("name").innerHTML = fileName;
}
}
function captureError(error)
{
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
function captureAudio()
{
navigator.device.capture.captureAudio(captureSuccess, captureError, {limit: 1, duration: 10});
}
</script>
</body>
</html>
Building APP Binary
While building app binary for Android make sure you set permission to access microphone
