{"id":1182,"date":"2014-03-18T12:24:28","date_gmt":"2014-03-18T06:54:28","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=1182"},"modified":"2014-03-18T12:24:28","modified_gmt":"2014-03-18T06:54:28","slug":"cfmobile-example-record-and-playback-audio-using-coldfusion-splendor","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/cfmobile-example-record-and-playback-audio-using-coldfusion-splendor\/","title":{"rendered":"CFMobile Example – Record and playback audio using ColdFusion Splendor"},"content":{"rendered":"

In this post I am going to show how easy it is to record audio and play it back in a mobile application using ColdFusion Splendor. If you haven’t already, you can download it from\u00a0Adobe\u00a0Labs<\/a>.<\/p>\n

I have tried to keep the application simple. There are two buttons, Record and Play. When you click Record button, the recording starts and the Stop button is displayed. Speak into the phone\u00a0microphone\u00a0to record your voice. When done, click Stop button. You can play back the audio by clicking Play button. You can also stop playback any time by clicking Stop button.<\/p>\n

Here are the screen shots –<\/p>\n

\"2013_03_18_screen1\"<\/a> \"2014_03_18_screen2\"<\/a><\/p>\n

To keep the code simple in this post, I am going to focus mainly on recording and playback of audio. The actual application also checks if the recorded file is in temporary or persistent file system. If it is in the temporary file systems, then it copies it to the persistent file system. I have already explained how to move files from temporary to persistent file system using CFClient file APIs in my post –\u00a0CFMobile Example – Taking picture and uploading to ColdFusion server<\/a>.<\/p>\n

When recording audio, cfclient framework first tries to find current file system (default set to persistent) and saves recorded audio file in that file system. However iOS seems to always record audio in temporary file system, irrespective of current file system set. So depending on where you run this demo application, you will see different messages.<\/p>\n

Let’s start with HTML and JS scripts –<\/p>\n

\n
<!DOCTYPE html><\/span>\n<meta<\/span> HTTP-EQUIV=<\/span>\"PRAGMA\"<\/span> CONTENT=<\/span>\"NO-CACHE\"<\/span>><\/span>\n<meta<\/span> name=<\/span>\"viewport\"<\/span> content=<\/span>\"initial-scale=1.0, user-scalable=no\"<\/span> \/><\/span>\n\n<script <\/span>src=<\/span>\"jquery-2.0.3.min.js\"<\/span> ><\/script><\/span>\n\n<script><\/span>\n\t$(document<\/span>).ready(function<\/span>(){\n\t\t$(\"#recordBtn\"<\/span>).prop(\"disabled\"<\/span>,true<\/span>);\n\t\t$(\"#playBtn\"<\/span>).prop(\"disabled\"<\/span>,true<\/span>);\n\t\t$(document<\/span>).on(\"click\"<\/span>,\"#recordBtn\"<\/span>, onRecordBtnClicked);\n\t\t$(document<\/span>).on(\"click\"<\/span>,\"#playBtn\"<\/span>, onPlayBtnClicked);\n\t});\n\n\tfunction<\/span> onRecordBtnClicked()\n\t{\n\t\tvar<\/span> btnTxt =<\/span> $(\"#recordBtn\"<\/span>).prop(\"value\"<\/span>);\n\t\tif<\/span> (btnTxt ==<\/span> \"Record\"<\/span>)\n\t\t\tstartRecording();\n\t\telse<\/span>\n\t\t\tstopRecording();\n\t}\n\n\tfunction<\/span> onPlayBtnClicked()\n\t{\n\t\tvar<\/span> btnTxt =<\/span> $(\"#playBtn\"<\/span>).prop(\"value\"<\/span>);\n\t\tif<\/span> (btnTxt ==<\/span> \"Play\"<\/span>)\n\t\t\tplayAudio();\n\t\telse<\/span>\n\t\t\tstopAudio();\n\t}\n<\/script><\/span>\n\n<h1><\/span>CFMobile Audio Demo<\/h1><\/span>\nClick on the Record buton and speak. When done, click the Stop button.<p><\/span>\nYou can playback recorded audio by clicking the Play button<p><\/span>\n\n<input<\/span> type=<\/span>\"button\"<\/span> value=<\/span>\"Record\"<\/span> id=<\/span>\"recordBtn\"<\/span> style=<\/span>\"margin-right:20px\"<\/span>><\/span>\n<input<\/span> type=<\/span>\"button\"<\/span> value=<\/span>\"Play\"<\/span> id=<\/span>\"playBtn\"<\/span>><\/span><\/pre>\n<\/div>\n
In document ready event, I disable record and play buttons (I enable them when cfclient is ready) and register event handlers.<\/p>\n
When record button is clicked (onRecordBtnClicked), I call startRecording or stopRecording functions depending on the label of the button. Similarly when play buton is clicked, I call playAudio or stopAudio. You will see all the four functions declared in cfclient block later.
\nAfter the script block I have HTML tags to display buttons.<\/p>\n
cfclient block starts\u00a0immediately after HTML code –<\/p>\n
\n
<cfclientsettings<\/span> enabledeviceapi=<\/span>\"true\"<\/span> ><\/span>\n<cfclient><\/span>\n\t<cfscript><\/span>\n                \/\/We will add cfclient code here<\/span>\n        <\/cfscript><\/span>\n<\/cfclient><\/span><\/pre>\n<\/div>\n
We need to enable device APIs because this demo uses audio APIs. Any code below below cfclientsettings tag will be executed only after all device APIs are initialized. All code in this post will now go inside cfscript block.<\/p>\n
\n
$(\"##recordBtn\"<\/span>).prop(\"disabled\"<\/span>,false<\/span>);\n$(\"##playBtn\"<\/span>).prop(\"disabled\"<\/span>,false<\/span>);\n\nRECORDING_STARTED =<\/span> 10<\/span>;\nMEDIA_STOPPED =<\/span> 4<\/span>;\nMEDIA_PAUSED =<\/span> 3<\/span>;\nMEDIA_RUNNING =<\/span> 2<\/span>;\nPLAYBACK_STARTED =<\/span> 11<\/span>;\nMEDIA_NONE =<\/span> 0<\/span>;\n\nmediaFile =<\/span> null<\/span>;\nmediaObj =<\/span> null<\/span>;\naudioStatus =<\/span> MEDIA_NONE;<\/pre>\n<\/div>\n
First, I enable Record and Play buttons, because at this point all device APIs are initialized and we can call audio APIs.<\/p>\n
Then I initialize a few constants for media status. Constants (values) MEDIA_STOPPED,\u00a0MEDIA_PAUSED and\u00a0MEDIA_RUNNING are defined by PhoneGap. Remaining constants are created by me for this demo.
\nI declare mediaFile variable to hold path of the recorded media file and mediaObj variable that points to PhoneGap media object. I initialize audio status to MEDIA_NONE.<\/p>\n
\n
function<\/span> mediaStatusChanged (statusArg)\n{\n\tswitch<\/span> (statusArg)\n\t{\n\t\tcase<\/span> 4:<\/span> \/\/MEDIA_STOPPED:<\/span>\n\t\t\t$(\"##recordBtn\"<\/span>).prop(\"disabled\"<\/span>,false<\/span>);\n\t\t\t$(\"##recordBtn\"<\/span>).prop(\"value\"<\/span>, \"Record\"<\/span>);\n\t\t\t$(\"##playBtn\"<\/span>).prop(\"disabled\"<\/span>,false<\/span>);\n\t\t\t$(\"##playBtn\"<\/span>).prop(\"value\"<\/span>, \"Play\"<\/span>);\n\t\t\taudioStatus =<\/span> MEDIA_NONE;\n\t\t\tbreak<\/span>;\n\t\t\/\/TODO: Handle pause media status<\/span>\n\t\tcase<\/span> 11:<\/span> \/\/PLAYBACK_STARTED:<\/span>\n\t\t\t$(\"##recordBtn\"<\/span>).prop(\"disabled\"<\/span>,true<\/span>);\n\t\t\t$(\"##playBtn\"<\/span>).prop(\"disabled\"<\/span>,false<\/span>);\n\t\t\t$(\"##playBtn\"<\/span>).prop(\"value\"<\/span>, \"Stop\"<\/span>);\n\t\t\taudioStatus =<\/span> PLAYBACK_STARTED;\n\t\t\tbreak<\/span>;\n\t\tcase<\/span> 10:<\/span>\/\/RECORDING_STARTED:<\/span>\n\t\t\t$(\"##recordBtn\"<\/span>).prop(\"disabled\"<\/span>,false<\/span>);\n\t\t\t$(\"##recordBtn\"<\/span>).prop(\"value\"<\/span>, \"Stop\"<\/span>);\n\t\t\t$(\"##playBtn\"<\/span>).prop(\"disabled\"<\/span>,true<\/span>);\n\t\t\taudioStatus =<\/span> RECORDING_STARTED;\n\t\t\tbreak<\/span>;\n\t}\n}<\/pre>\n<\/div>\n
mediaStatusChanged function is a hander function called when status of the media changes. This function just updates buttons status and sets new media status value.<\/p>\n
\n
function<\/span> startRecording()\n{\n\ttry<\/span>\n\t{\n\t\tvar<\/span> mediaFileName =<\/span> \"tempMedia.wav\"<\/span>;\n\n\t\tmediaObj =<\/span> cfclient.audio.createMedia(mediaFileName, function<\/span>(statusArg){\n\t\t\tmediaStatusChanged(statusArg);\n\t\t});\n\n\t\t\/\/For iOS, the media file would be created in the temporary file system<\/span>\n\t\t\/\/For Android, it will be created in the persistent file system<\/span>\n\n\t\t\/\/start recording<\/span>\n\t\tcfclient.audio.record(mediaObj);\n\t\taudioStatus =<\/span> RECORDING_STARTED;\n\n\t\t\/\/update buttons<\/span>\n\t\tmediaStatusChanged(RECORDING_STARTED);\n\t}\n\tcatch<\/span> (any e)\n\t{\n\t\talert(\"Error recording - \"<\/span> +<\/span> JSON.stringify(e));\n\t}\n}<\/pre>\n<\/div>\n
Recording is stored in a file with name “tempMedia.wav”. If file with the same name already exists, then it is overwritten. I create media object with this file name using cfclient API createMedia. The second argument is a handler function that is called when media status changes. In this function I call the handler function I created earlier –\u00a0mediaStatusChanged.
\nOnce the media object is created successfully, I call the record function of cfclient.<\/p>\n
\n
function<\/span> stopRecording()\n{\n\tif<\/span> (isDefined(\"mediaObj\"<\/span>))\n\t{\n\t\tcfclient.audio.stopRecording(mediaObj);\n\t}\n}<\/pre>\n<\/div>\n
stopRecording function calls corresponding function of cfclient, if mediaObj is defined.<\/p>\n
\n
function<\/span> playAudio ()\n{\n\tif<\/span> (isDefined(\"mediaObj\"<\/span>))\n\t{\n\t\t\/\/workaround for Android crash issue. Create media object again<\/span>\n\t\tmediaObj =<\/span> cfclient.audio.createMedia(mediaObj.src, function<\/span>(statusArg){\n\t\t\tmediaStatusChanged(statusArg);\n\t\t});\n\n\t\tcfclient.audio.play(mediaObj);\n\t\tmediaStatusChanged(PLAYBACK_STARTED);\n\t}\n\telse<\/span>\n\t\talert(\"No recording avilable to play\"<\/span>);\n}<\/pre>\n<\/div>\n
playAudio function creates media object again from the file name. This is done to work around a bug in Android. You don’t need to do this in iOS (you can reuse the media object created for recording).
\nI call play method of cfclient to playback the audio and change the media and buttons status by calling\u00a0mediaStatusChanged. When audio file is played till the end, MEDIA_STOPPED event is fired, which is handled by\u00a0mediaStatusChanged function, which updates buttons status.<\/p>\n
\n
function<\/span> stopAudio()\n{\n\tcfclient.audio.stop(mediaObj);\n}<\/pre>\n<\/div>\n
When Stop button is clicked while media is playing, stopAudio function is called. This function calls stop method of cfclient. When media stops playing, MEDIA_STOPPED event is fired, which again is handled by\u00a0mediaStatusChanged function.<\/p>\n
Download project files<\/a> and Android APK<\/a> for this application. Note that index.cfm in this project (and application) has additional code to check if the audio file is in temporary file system and to move it to the persistent file system. Screen shots above are of application using this code. There is index2.cfm file this is not used in the packaged application, but it contains code described in this post (it does not contain file transfer code).<\/p>\n
-Ram Kulkarni<\/p>\n","protected":false},"excerpt":{"rendered":"
In this post I am going to show how easy it is to record audio and play it back in a mobile application using ColdFusion Splendor. If you haven’t already, you can download it from\u00a0Adobe\u00a0Labs. I have tried to keep the application simple. There are two buttons, Record and Play. When you click Record button, … <\/p>\n
Continue reading “CFMobile Example – Record and playback audio using ColdFusion Splendor”<\/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":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[32,23,78,17,1],"tags":[99,94,22,24,13],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-j4","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1182"}],"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=1182"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1182\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=1182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=1182"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=1182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}