{"id":187,"date":"2012-04-28T22:48:56","date_gmt":"2012-04-28T17:18:56","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=187"},"modified":"2012-04-28T22:48:56","modified_gmt":"2012-04-28T17:18:56","slug":"using-phonegap-media-apis","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/using-phonegap-media-apis\/","title":{"rendered":"Using PhoneGap Media APIs"},"content":{"rendered":"<p>Last week I blogged about a problem I was facing when recording audio on iOS, using PhoneGap Media APIs. I was seeing following error in the debug console &#8211;<\/p>\n<p>ERROR: Method &#8216;create:withDict:&#8217; not defined in Plugin &#8216;Media&#8217;<\/p>\n<p>and audio was not recorded.<\/p>\n<p>I logged a bug for this in the PhoneGap&#8217;s bug tracker, and it turned out that it was not really a bug in PhoneGap. The PhoneGap team responded quickly (thanks Filip and Shazron) and guided me to the solution.<br \/>\nThe solution is in fact documented on the <a href=\"http:\/\/docs.phonegap.com\/en\/1.6.1\/cordova_media_media.md.html#media.startRecord\">PhoneGap API Reference<\/a> site, but it is easy to miss.This is what I learnt &#8211;<\/p>\n<p><!--more--><\/p>\n<ul>\n<li>Apparently you can ignore the above error. The first question that the PhoneGap team asked me was, if recording worked even after above error. So I think this is a harmless error. I do hope that they fix it anyway.<\/li>\n<li>Extension of the file for saving the recorded data must be .wav. I was trying to create a file with .mp3 extension. This was the main reason why recording did not work in my application. Audio is recorded in uncompressed format.<br \/>\nHowever Android does not complain about<br \/>\nthe .mp3 extension.<\/li>\n<li>File must be created (using File APIs) before recording. I was already doing this. Again, you don&#8217;t need to do this in Android.<\/li>\n<\/ul>\n<p>Android quirks are &#8211;<\/p>\n<ul>\n<li>File path to Media is with respect to \/sdcard folder. Do not specify complete path of the file.<\/li>\n<li>You do not need to create the file before recording, but if you want to save it in a sub folder, under &#8216;sdcard&#8217;, then you need to create folder(s). Media API does not create folders for you.<\/li>\n<\/ul>\n<p>I think implementation of Media class should handle these quirks better, e.g. in the case of iOS, implementation could log console message if the file extension is not .wav and also log a message if file does not exist. In the case of Android, allow complete file path, starting with &#8216;file:\/\/&#8217; and if the file name does not start with it (file:\/\/) then assume it to be from &#8216;sdcard&#8217; folder.<\/p>\n<p>I have put together an example that works on iOS and Android. I am not sure if you can figure out which mobile OS your application is running using PhoneGap APIs, so I have used a boolean variable, isIOS. Set appropriate value to it if you want to run this code. The code expects cordova-1.7.0rc1.js and jquery-1.7.1.js files in the same folder.<\/p>\n<pre style=\"color: #000000; background: #f1f0f0;\"><span style=\"color: #806030;\">&lt;<\/span><span style=\"color: #806030;\">!<\/span>DOCTYPE html<span style=\"color: #806030;\">&gt;<\/span>\n<span style=\"color: #806030;\">&lt;<\/span>html<span style=\"color: #806030;\">&gt;<\/span>\n  <span style=\"color: #806030;\">&lt;<\/span>head<span style=\"color: #806030;\">&gt;<\/span>\n  <span style=\"color: #806030;\">&lt;<\/span>title<span style=\"color: #806030;\">&gt;<\/span><span style=\"color: #806030;\">&lt;<\/span><span style=\"color: #806030;\">\/<\/span>title<span style=\"color: #806030;\">&gt;<\/span>\n\n    <span style=\"color: #806030;\">&lt;<\/span>meta name<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">viewport<\/span><span style=\"color: #800000;\">\"<\/span> content<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;<\/span><span style=\"color: #800000;\">\"<\/span> <span style=\"color: #806030;\">\/<\/span><span style=\"color: #806030;\">&gt;<\/span>\n    <span style=\"color: #806030;\">&lt;<\/span>meta charset<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">utf-8<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">&gt;<\/span>\n\n    <span style=\"color: #806030;\">&lt;<\/span>script type<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">text\/javascript<\/span><span style=\"color: #800000;\">\"<\/span> charset<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">utf-8<\/span><span style=\"color: #800000;\">\"<\/span> src<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">cordova-1.7.0rc1.js<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">&gt;<\/span><span style=\"color: #806030;\">&lt;<\/span><span style=\"color: #806030;\">\/<\/span>script<span style=\"color: #806030;\">&gt;<\/span>\n    <span style=\"color: #806030;\">&lt;<\/span>script type<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">text\/javascript<\/span><span style=\"color: #800000;\">\"<\/span> src<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">jquery-1.7.1.js<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">&gt;<\/span><span style=\"color: #806030;\">&lt;<\/span><span style=\"color: #806030;\">\/<\/span>script<span style=\"color: #806030;\">&gt;<\/span>\n\n    <span style=\"color: #806030;\">&lt;<\/span>script type<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">text\/javascript<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">&gt;<\/span>\n\n        <span style=\"color: #400000; font-weight: bold;\">var<\/span> deviceready <span style=\"color: #806030;\">=<\/span> <span style=\"color: #0f4d75;\">false<\/span><span style=\"color: #806030;\">;<\/span>\n        <span style=\"color: #400000; font-weight: bold;\">var<\/span> mediaVar <span style=\"color: #806030;\">=<\/span> <span style=\"color: #0f4d75;\">null<\/span><span style=\"color: #806030;\">;<\/span>\n        <span style=\"color: #400000; font-weight: bold;\">var<\/span> recordFileName <span style=\"color: #806030;\">=<\/span> <span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">recording.wav<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">;<\/span>\n        <span style=\"color: #400000; font-weight: bold;\">var<\/span> status <span style=\"color: #806030;\">=<\/span> <span style=\"color: #0f4d75;\">null<\/span><span style=\"color: #806030;\">;<\/span>\n        <span style=\"color: #400000; font-weight: bold;\">var<\/span> isIOS <span style=\"color: #806030;\">=<\/span> <span style=\"color: #0f4d75;\">false<\/span><span style=\"color: #806030;\">;<\/span>\n\n        <span style=\"color: #400000; font-weight: bold;\">function<\/span> onBodyLoad<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span>\n        <span style=\"color: #806030;\">{<\/span>\n            document<span style=\"color: #806030;\">.<\/span>addEventListener<span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">deviceready<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">,<\/span> onDeviceReady<span style=\"color: #806030;\">,<\/span> <span style=\"color: #0f4d75;\">false<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n            deviceready <span style=\"color: #806030;\">=<\/span> <span style=\"color: #0f4d75;\">true<\/span><span style=\"color: #806030;\">;<\/span>\n        <span style=\"color: #806030;\">}<\/span>\n\n        $<span style=\"color: #806030;\">(<\/span>document<span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">.<\/span>ready<span style=\"color: #806030;\">(<\/span><span style=\"color: #400000; font-weight: bold;\">function<\/span><span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">{<\/span>\n            $<span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">#stopBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">.<\/span>hide<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n            $<span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">#playBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">.<\/span>hide<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n\n            <span style=\"color: #c34e00;\">\/\/validation to check if device is ready is skipped<\/span>\n\n            $<span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">#recordBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">.<\/span>click<span style=\"color: #806030;\">(<\/span><span style=\"color: #400000; font-weight: bold;\">function<\/span><span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">{<\/span>\n                record<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n            <span style=\"color: #806030;\">}<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n\n            $<span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">#playBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">.<\/span>click<span style=\"color: #806030;\">(<\/span><span style=\"color: #400000; font-weight: bold;\">function<\/span><span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">{<\/span>\n                play<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n            <span style=\"color: #806030;\">}<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n\n            $<span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">#stopBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">.<\/span>click<span style=\"color: #806030;\">(<\/span><span style=\"color: #400000; font-weight: bold;\">function<\/span><span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">{<\/span>\n                stop<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n            <span style=\"color: #806030;\">}<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n        <span style=\"color: #806030;\">}<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n\n        <span style=\"color: #400000; font-weight: bold;\">function<\/span> record<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span>\n        <span style=\"color: #806030;\">{<\/span>\n            createMedia<span style=\"color: #806030;\">(<\/span><span style=\"color: #400000; font-weight: bold;\">function<\/span><span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">{<\/span>\n                status <span style=\"color: #806030;\">=<\/span> <span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">recording<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">;<\/span>\n                mediaVar<span style=\"color: #806030;\">.<\/span>startRecord<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n                $<span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">#recordBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">.<\/span>hide<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n                $<span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">#stopBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">.<\/span>show<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n                $<span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">#playBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">.<\/span>hide<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n            <span style=\"color: #806030;\">}<\/span><span style=\"color: #806030;\">,<\/span>onStatusChange<span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n        <span style=\"color: #806030;\">}<\/span>\n\n        <span style=\"color: #400000; font-weight: bold;\">function<\/span> createMedia<span style=\"color: #806030;\">(<\/span>onMediaCreated<span style=\"color: #806030;\">,<\/span> mediaStatusCallback<span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">{<\/span>\n            <span style=\"color: #400000; font-weight: bold;\">if<\/span> <span style=\"color: #806030;\">(<\/span>mediaVar <span style=\"color: #806030;\">!=<\/span> <span style=\"color: #0f4d75;\">null<\/span><span style=\"color: #806030;\">)<\/span> <span style=\"color: #806030;\">{<\/span>\n                onMediaCreated<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n                <span style=\"color: #400000; font-weight: bold;\">return<\/span><span style=\"color: #806030;\">;<\/span>\n            <span style=\"color: #806030;\">}<\/span>\n\n            <span style=\"color: #400000; font-weight: bold;\">if<\/span> <span style=\"color: #806030;\">(<\/span><span style=\"color: #400000; font-weight: bold;\">typeof<\/span> mediaStatusCallback <span style=\"color: #806030;\">==<\/span> <span style=\"color: #e60000;\">'undefined'<\/span><span style=\"color: #806030;\">)<\/span>\n                mediaStatusCallback <span style=\"color: #806030;\">=<\/span> <span style=\"color: #0f4d75;\">null<\/span><span style=\"color: #806030;\">;<\/span>\n\n            <span style=\"color: #400000; font-weight: bold;\">if<\/span> <span style=\"color: #806030;\">(<\/span>isIOS<span style=\"color: #806030;\">)<\/span> <span style=\"color: #806030;\">{<\/span>\n                <span style=\"color: #c34e00;\">\/\/first create the file<\/span>\n                window<span style=\"color: #806030;\">.<\/span>requestFileSystem<span style=\"color: #806030;\">(<\/span>LocalFileSystem<span style=\"color: #806030;\">.<\/span>PERSISTENT<span style=\"color: #806030;\">,<\/span> <span style=\"color: #c00000;\">0<\/span><span style=\"color: #806030;\">,<\/span> <span style=\"color: #400000; font-weight: bold;\">function<\/span><span style=\"color: #806030;\">(<\/span>fileSystem<span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">{<\/span>\n                    fileSystem<span style=\"color: #806030;\">.<\/span>root<span style=\"color: #806030;\">.<\/span>getFile<span style=\"color: #806030;\">(<\/span>recordFileName<span style=\"color: #806030;\">,<\/span> <span style=\"color: #806030;\">{<\/span>\n                        create<span style=\"color: #806030;\">:<\/span> <span style=\"color: #0f4d75;\">true<\/span><span style=\"color: #806030;\">,<\/span>\n                        exclusive<span style=\"color: #806030;\">:<\/span> <span style=\"color: #0f4d75;\">false<\/span>\n                    <span style=\"color: #806030;\">}<\/span><span style=\"color: #806030;\">,<\/span> <span style=\"color: #400000; font-weight: bold;\">function<\/span><span style=\"color: #806030;\">(<\/span>fileEntry<span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">{<\/span>\n                        <span style=\"color: #400000; font-weight: bold;\">log<\/span><span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">File \" + recordFileName + \" created at <\/span><span style=\"color: #800000;\">\"<\/span> <span style=\"color: #806030;\">+<\/span> fileEntry<span style=\"color: #806030;\">.<\/span>fullPath<span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n                        mediaVar <span style=\"color: #806030;\">=<\/span> <span style=\"color: #400000; font-weight: bold;\">new<\/span> Media<span style=\"color: #806030;\">(<\/span>fileEntry<span style=\"color: #806030;\">.<\/span>fullPath<span style=\"color: #806030;\">,<\/span> <span style=\"color: #400000; font-weight: bold;\">function<\/span><span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">{<\/span>\n                            <span style=\"color: #400000; font-weight: bold;\">log<\/span><span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">Media created successfully<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n                        <span style=\"color: #806030;\">}<\/span><span style=\"color: #806030;\">,<\/span> onError<span style=\"color: #806030;\">,<\/span> mediaStatusCallback<span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span> <span style=\"color: #c34e00;\">\/\/of new Media<\/span>\n                        onMediaCreated<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n                    <span style=\"color: #806030;\">}<\/span><span style=\"color: #806030;\">,<\/span> onError<span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span> <span style=\"color: #c34e00;\">\/\/of getFile<\/span>\n                <span style=\"color: #806030;\">}<\/span><span style=\"color: #806030;\">,<\/span> onError<span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span> <span style=\"color: #c34e00;\">\/\/of requestFileSystem<\/span>\n            <span style=\"color: #806030;\">}<\/span> <span style=\"color: #400000; font-weight: bold;\">else<\/span> <span style=\"color: #c34e00;\">\/\/it's Android<\/span>\n            <span style=\"color: #806030;\">{<\/span>\n                mediaVar <span style=\"color: #806030;\">=<\/span> <span style=\"color: #400000; font-weight: bold;\">new<\/span> Media<span style=\"color: #806030;\">(<\/span>recordFileName<span style=\"color: #806030;\">,<\/span> <span style=\"color: #400000; font-weight: bold;\">function<\/span><span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">{<\/span>\n                    <span style=\"color: #400000; font-weight: bold;\">log<\/span><span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">Media created successfully<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n                <span style=\"color: #806030;\">}<\/span><span style=\"color: #806030;\">,<\/span> onError<span style=\"color: #806030;\">,<\/span> mediaStatusCallback<span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n                onMediaCreated<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n            <span style=\"color: #806030;\">}<\/span>\n        <span style=\"color: #806030;\">}<\/span>\n\n        <span style=\"color: #400000; font-weight: bold;\">function<\/span> stop<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span>\n        <span style=\"color: #806030;\">{<\/span>\n            <span style=\"color: #400000; font-weight: bold;\">if<\/span> <span style=\"color: #806030;\">(<\/span>mediaVar <span style=\"color: #806030;\">==<\/span> <span style=\"color: #0f4d75;\">null<\/span><span style=\"color: #806030;\">)<\/span>\n                <span style=\"color: #400000; font-weight: bold;\">return<\/span><span style=\"color: #806030;\">;<\/span>\n\n            <span style=\"color: #400000; font-weight: bold;\">if<\/span> <span style=\"color: #806030;\">(<\/span>status <span style=\"color: #806030;\">==<\/span> <span style=\"color: #e60000;\">'recording'<\/span><span style=\"color: #806030;\">)<\/span>\n            <span style=\"color: #806030;\">{<\/span>\n                mediaVar<span style=\"color: #806030;\">.<\/span>stopRecord<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n                <span style=\"color: #400000; font-weight: bold;\">log<\/span><span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">Recording stopped<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n            <span style=\"color: #806030;\">}<\/span>\n            <span style=\"color: #400000; font-weight: bold;\">else<\/span> <span style=\"color: #400000; font-weight: bold;\">if<\/span> <span style=\"color: #806030;\">(<\/span>status <span style=\"color: #806030;\">==<\/span> <span style=\"color: #e60000;\">'playing'<\/span><span style=\"color: #806030;\">)<\/span>\n            <span style=\"color: #806030;\">{<\/span>\n                mediaVar<span style=\"color: #806030;\">.<\/span>stop<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n                <span style=\"color: #400000; font-weight: bold;\">log<\/span><span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">Play stopped<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n            <span style=\"color: #806030;\">}<\/span>\n            <span style=\"color: #400000; font-weight: bold;\">else<\/span>\n            <span style=\"color: #806030;\">{<\/span>\n                <span style=\"color: #400000; font-weight: bold;\">log<\/span><span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">Nothing stopped<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n            <span style=\"color: #806030;\">}<\/span>\n            $<span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">#recordBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">.<\/span>show<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n            $<span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">#stopBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">.<\/span>hide<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n            $<span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">#playBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">.<\/span>show<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n            status <span style=\"color: #806030;\">=<\/span> <span style=\"color: #e60000;\">'stopped'<\/span><span style=\"color: #806030;\">;<\/span>\n        <span style=\"color: #806030;\">}<\/span>\n\n        <span style=\"color: #400000; font-weight: bold;\">function<\/span> play<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span>\n        <span style=\"color: #806030;\">{<\/span>\n            createMedia<span style=\"color: #806030;\">(<\/span><span style=\"color: #400000; font-weight: bold;\">function<\/span><span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">{<\/span>\n                status <span style=\"color: #806030;\">=<\/span> <span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">playing<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">;<\/span>\n                mediaVar<span style=\"color: #806030;\">.<\/span>play<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n                $<span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">#recordBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">.<\/span>hide<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n                $<span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">#stopBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">.<\/span>show<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n                $<span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">#playBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">.<\/span>hide<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n            <span style=\"color: #806030;\">}<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n        <span style=\"color: #806030;\">}<\/span>\n\n        <span style=\"color: #400000; font-weight: bold;\">function<\/span> onStatusChange<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span>\n        <span style=\"color: #806030;\">{<\/span>\n            <span style=\"color: #400000; font-weight: bold;\">if<\/span> <span style=\"color: #806030;\">(<\/span>arguments<span style=\"color: #806030;\">[<\/span><span style=\"color: #c00000;\">0<\/span><span style=\"color: #806030;\">]<\/span> <span style=\"color: #806030;\">==<\/span> <span style=\"color: #c00000;\">4<\/span><span style=\"color: #806030;\">)<\/span> <span style=\"color: #c34e00;\">\/\/play stopped<\/span>\n            <span style=\"color: #806030;\">{<\/span>\n                $<span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">#recordBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">.<\/span>show<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n                $<span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">#stopBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">.<\/span>hide<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n                $<span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">#playBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">.<\/span>show<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n            <span style=\"color: #806030;\">}<\/span>\n        <span style=\"color: #806030;\">}<\/span>\n\n        <span style=\"color: #400000; font-weight: bold;\">function<\/span> onSuccess<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span>\n        <span style=\"color: #806030;\">{<\/span>\n            <span style=\"color: #c34e00;\">\/\/do nothing<\/span>\n        <span style=\"color: #806030;\">}<\/span>\n\n        <span style=\"color: #400000; font-weight: bold;\">function<\/span> onError<span style=\"color: #806030;\">(<\/span>err<span style=\"color: #806030;\">)<\/span>\n        <span style=\"color: #806030;\">{<\/span>\n            <span style=\"color: #400000; font-weight: bold;\">if<\/span> <span style=\"color: #806030;\">(<\/span><span style=\"color: #400000; font-weight: bold;\">typeof<\/span> err<span style=\"color: #806030;\">.<\/span>message <span style=\"color: #806030;\">!=<\/span> <span style=\"color: #e60000;\">'undefined'<\/span><span style=\"color: #806030;\">)<\/span>\n                err <span style=\"color: #806030;\">=<\/span> err<span style=\"color: #806030;\">.<\/span>message<span style=\"color: #806030;\">;<\/span>\n            alert<span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">Error : <\/span><span style=\"color: #800000;\">\"<\/span> <span style=\"color: #806030;\">+<\/span> err<span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n        <span style=\"color: #806030;\">}<\/span>\n\n        <span style=\"color: #400000; font-weight: bold;\">function<\/span> <span style=\"color: #400000; font-weight: bold;\">log<\/span><span style=\"color: #806030;\">(<\/span>message<span style=\"color: #806030;\">)<\/span>\n        <span style=\"color: #806030;\">{<\/span>\n            <span style=\"color: #400000; font-weight: bold;\">if<\/span> <span style=\"color: #806030;\">(<\/span>isIOS<span style=\"color: #806030;\">)<\/span>\n                console<span style=\"color: #806030;\">.<\/span><span style=\"color: #400000; font-weight: bold;\">log<\/span><span style=\"color: #806030;\">(<\/span>message<span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n            <span style=\"color: #400000; font-weight: bold;\">else<\/span>\n                console<span style=\"color: #806030;\">.<\/span>info<span style=\"color: #806030;\">(<\/span>message<span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">;<\/span>\n        <span style=\"color: #806030;\">}<\/span>\n\n        <span style=\"color: #400000; font-weight: bold;\">function<\/span> onDeviceReady<span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span>\n        <span style=\"color: #806030;\">{<\/span>\n\n        <span style=\"color: #806030;\">}<\/span>\n\n    <span style=\"color: #806030;\">&lt;<\/span><span style=\"color: #806030;\">\/<\/span>script<span style=\"color: #806030;\">&gt;<\/span>\n  <span style=\"color: #806030;\">&lt;<\/span><span style=\"color: #806030;\">\/<\/span>head<span style=\"color: #806030;\">&gt;<\/span>\n  <span style=\"color: #806030;\">&lt;<\/span>body onload<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">onBodyLoad()<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">&gt;<\/span>\n      <span style=\"color: #806030;\">&lt;<\/span>input type<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">button<\/span><span style=\"color: #800000;\">\"<\/span> name<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">recordBtn<\/span><span style=\"color: #800000;\">\"<\/span> id<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">recordBtn<\/span><span style=\"color: #800000;\">\"<\/span> value<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">Record<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">&gt;<\/span>\n      <span style=\"color: #806030;\">&lt;<\/span>input type<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">button<\/span><span style=\"color: #800000;\">\"<\/span> name<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">stopBtn<\/span><span style=\"color: #800000;\">\"<\/span> id<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">stopBtn<\/span><span style=\"color: #800000;\">\"<\/span> value<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">Stop<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">&gt;<\/span>\n      <span style=\"color: #806030;\">&lt;<\/span>input type<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">button<\/span><span style=\"color: #800000;\">\"<\/span> name<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">playBtn<\/span><span style=\"color: #800000;\">\"<\/span> id<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">playBtn<\/span><span style=\"color: #800000;\">\"<\/span> value<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">Play<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">&gt;<\/span>\n  <span style=\"color: #806030;\">&lt;<\/span><span style=\"color: #806030;\">\/<\/span>body<span style=\"color: #806030;\">&gt;<\/span>\n<span style=\"color: #806030;\">&lt;<\/span><span style=\"color: #806030;\">\/<\/span>html<span style=\"color: #806030;\">&gt;<\/span><\/pre>\n<p>-Ram Kulkarni<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last week I blogged about a problem I was facing when recording audio on iOS, using PhoneGap Media APIs. I was seeing following error in the debug console &#8211; ERROR: Method &#8216;create:withDict:&#8217; not defined in Plugin &#8216;Media&#8217; and audio was not recorded. I logged a bug for this in the PhoneGap&#8217;s bug tracker, and it &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/ramkulkarni.com\/blog\/using-phonegap-media-apis\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Using PhoneGap Media APIs&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[17,1],"tags":[2,14,16,13],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-31","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/187"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=187"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/187\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=187"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}