QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Record Microphone Audio using Intel XDK

Record Microphone Audio using Intel XDK

microphone-intelxdk

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.

Screen Shot 2014-12-19 at 8.18.05 pm

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});
        }

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>

IMG_0561

IMG_0562

IMG_0563

Building APP Binary

While building app binary for Android make sure you set permission to access microphone

Screen Shot 2015-01-01 at 2.58.06 pm

Dec 19, 2014Narayan Prusty
Turn On Flashlight using Intel XDKRecord Video using Intel XDK
Comments: 2
  1. Tom
    7 years ago

    I forgot to mention the version of my XDK. It’s 1816.

    ReplyCancel
  2. Tom
    7 years ago

    Thanks for the guide. I’m using version of Intel XDK. When I try to debug your app on my iPhone 4, I get the following console logs:
    deviceready has not fired after 5 seconds. cordova.js:1143
    Channel not fired: onCordovaReady cordova.js:1136
    Channel not fired: IntelXDKPreview cordova.js:1136
    Channel not fired: onCordovaInfoReady cordova.js:1136
    app.initEvents(): entry init-app.js:23
    app.initDebug(): entry init-app.js:23
    cordova.version: 3.5.0 init-app.js:23
    {} init-app.js:23
    app.initDebug(): exit init-app.js:23
    app.hideSplashScreen(): entry init-app.js:23
    app.hideSplashScreen(): exit init-app.js:23
    app.initEvents(): exit init-app.js:23
    app.initDebug(): entry init-app.js:23
    cordova.version: 3.5.0 init-app.js:23
    {} init-app.js:23
    app.initDebug(): exit init-app.js:23

    When the function captureAudio() is called, navigator.device is undefined leading to an error.
    Do you have any suggestions how to solve this?

    ReplyCancel

Leave a Reply to Tom Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image7 years ago 3 Comments Cordova
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Including Cordova Capture Plugin
  • Recording Audio
  • Complete Source Code
  • Building APP Binary
Related Articles
  • Record Video using Intel XDK
  • Create a Music Player App using Intel XDK
  • Share Button for Intel XDK APP
  • Intel XDK Geolocation Tutorial
  • Find Recorded Audio File Location in Cordova
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license