Javascript

<script type="text/javascript" charset="utf-8">
	//*********************************************************    
    // Media Capabilities
    //*********************************************************
    var my_media;
    var my_media_status;
    var myMediaRec;
    var mediaTimer = null;
    var recordTimer = null;
    
    function updatePlayMediaStatus(status) {
    	$("#mediaPlayStatus").empty();
    	$("#mediaPlayStatus").append(status).trigger("create");
    }
    
    function updateRecordMediaStatus(status) {
    	$("#mediaRecordStatus").empty();
    	$("#mediaRecordStatus").append(status).trigger("create");
    }

    
    function listDirForMedia() {
    	function listFileFail(error) {
    	    $("#playMediaProperties").empty();
    		$("#playMediaProperties").append("Media file not found. <br/><br/>Please record a new sound file.");
     		updatePlayMediaStatus("ERROR: Sound file not found. Code: " + error.code);
    	}
    	
    	function listFileSuccess(entry) {
    		$("#playMediaProperties").empty();
    		$("#playMediaProperties").append(entry.name + " is ready. <br/><br/>Press \"Play\" to start.");
		}
		
		window.resolveLocalFileSystemURI(rootDir + "/" + demoMediaFile, listFileSuccess, listFileFail);
		$("#playMediaProperties").empty();
		updatePlayMediaStatus("");
		
    	if (my_media) {  
    		my_media.stop();
    		my_media.release();
        	my_media = null;    		
    	}
    	
		$("#mediaFreq").val(0).slider("refresh");
    }    
    
    function mediaOnSuccess() { 	
    	$("#playMediaProperties").empty();
    	$("#playMediaProperties").append("Finished playing").trigger("create");  
    }
    
    function mediaOnError(error) {
    	$("#playMediaProperties").empty();
    	$("#playMediaProperties").append("ERROR: Cannot play audio. Code: " + error.code + " Message: " + error.message + "<br/>");

    	clearInterval(mediaTimer);
    	mediaTimer = null;        
    	
    	my_media.release();
    	my_media = null;
    }
    
    function setAudioPosition(position) {
    	var pc = parseFloat(position); 
    	var pw = parseFloat(my_media.getDuration());
    	var percentPlay = Math.ceil( (pc/pw) * 100);
    	
    	$("#mediaFreq").val(percentPlay).slider("refresh");

    	if ( pc <= -0.001 ) {
        	$("#playMediaProperties").empty();
        	$("#playMediaProperties").append("Finished playing.").trigger("create");
        	
        	clearInterval(mediaTimer);
        	mediaTimer = null;        	
    	}
    }   

    function stopMedia() {
    	if (my_media) {
    		my_media.stop();
    		my_media.release();
    		my_media = null;
    	}
    	clearInterval(mediaTimer);
    	mediaTimer = null;
    	
        $("#playMediaProperties").empty();
    	$("#playMediaProperties").append("Finished playing.");
    	$("#mediaFreq").val(0).slider("refresh");
    } 
    
    function playMedia() {
    	$("#playMediaProperties").empty();
    	$("#playMediaProperties").append("Playing...").trigger("create");
    	
    	if (! my_media) {
	    	my_media = new Media(demoMediaFile, null, mediaOnError);
    	}

		my_media.play();
			
    	if (mediaTimer == null) {
    		mediaTimer = setInterval(function() {
    				my_media.getCurrentPosition(
    					function(position) {
    						if (position > -1) {
    							setAudioPosition((position) + " sec");
    						}
    					},
    					function(e) {
    						setAudioPosition("Error: " + e.message);
    					}
    				);
    		}, 1000);	
    	}
    }
    
    function pauseMedia() {
    	$("#playMediaProperties").empty();
    	
    	if (my_media) {
    		my_media.pause();
    		$("#playMediaProperties").append("Pausing the audio....");
    	} else {
    		$("#playMediaProperties").append("No song is playing");
    	}
    	
    	clearInterval(mediaTimer);
    	mediaTimer = null;
    }
            
    function prepareRecordMedia() {
    	$("#recordMediaProperties").empty();
    	$("#recordMediaProperties").append("Ready.  Press \"Record\" to start").trigger("create");   	
    	updateRecordMediaStatus("");
    	
    	if (myMediaRec) {
    		myMediaRec.release();
    		myMediaRec = null;
    	}
    	
    	if (my_media) {
    		my_media.release();
    		my_media = null;
    	}
    }
    
    function recordMedia() {
    	if (! myMediaRec) {

        	if (my_media) {
        		my_media.release();
        		my_media = null;
        	}    		
    		
        	$("#recordMediaProperties").empty();        	

        	myMediaRec = new Media(demoMediaFile
            		, null
            		, function(error) {
            			updateRecordMediaStatus("Recording Failed");
            			$("#recordMediaProperties").append("Recording fail. Code: " + error.code).trigger("create");
            		}	
            	);

           	myMediaRec.startRecord();
       		updateRecordMediaStatus("Recording...");
       		$("#recordMediaProperties").html("On Air... ");
       		
           	if (recordTimer == null) {
           		var recTime = 0;
           		recordTimer = setInterval(function() {
           			recTime = recTime + 1;
           			$("#recordMediaProperties").html("On Air... " + recTime + " sec");
           		}, 1000);
           	}    		
    	}
    }
    
    function stopRecordMedia() {
    	$("#recordMediaProperties").empty();

    	if (myMediaRec) {
    		myMediaRec.stopRecord();
    		myMediaRec.release();
    		myMediaRec = null;
    		
        	$("#recordMediaProperties").append("Off Air.  </br></br>Please go to \"Play Media\" for playback.").trigger("create");
    		updateRecordMediaStatus("Recording finished");
    		
    	} else {
			$("#recordMediaProperties").append("Recording Failed.").trigger("create");
			updateRecordMediaStatus("ERROR: Not recording");
    	}
    	
    	clearInterval(recordTimer);
    	recordTimer = null;
    }
</script>

HTML 5/JQuery Mobile

	<!---------------------------------- Main Page --------------------------------------->
	<div data-role="page" id="main">
		<div data-role="header" data-position="fixed">
			<h1 id="appTitle"></h1>
		</div>
		<div data-role="content">	
		<ul data-role="listview" data-inset="true" data-filter="true">
			<li><a href="#mediaCap" data-transition="slide">Media</a></li>			
		</ul>
		</div>
	</div>
	
	<!---------------------------------- Media ------------------------------------------->
	<div data-role="page" data-add-back-btn="true" back-btn-text="back" id="mediaCap">
		<div data-role="header">
			<h1>Media</h1>
		</div>
		<div data-role="content">
			<ul data-role="listview" data-inset="true">
				<li><a href="#mediaRecord" onclick="prepareRecordMedia();">Record Media</a></li>
				<li><a href="#mediaPlay" onclick="listDirForMedia();">Play Media</a></li>
			</ul>
		</div>		
	</div>
	
	<!---------------------------------- Media: Record ----------------------------------->
	<div data-role="page" data-add-back-btn="true" back-btn-text="back" id="mediaRecord">
		<div data-role="header">
			<h1>Media - Record</h1>
		</div>
		<div data-role="content">
			<div data-role="fieldcontain">		
				<div id="recordMediaProperties" class="mesgBox"></div>
				<div data-role="controlgroup" data-type="horizontal" align="center" class="mediaControl">
		  			<a href="#" data-role="button" data-inline="true" onclick="recordMedia();">Record</a>
					<a href="#" data-role="button" data-inline="true" onclick="stopRecordMedia();">Stop</a>
				</div>
			</div>
			<div class="mesgBox">
  				<h5 class="hlabel">Recorded media info:</h5>
	  			<ul class="smFont">
	  				<li>File named: phonegap-demo.mp3</li>
	  				<li>Path: //mnt/sdcard/Android/data/com.ventusmoso.pg2_jqm</li>
	  			</ul> 			
  			</div>
		</div>
		<div data-role="footer">
			<div id="mediaRecordStatus"></div>
		</div>			
	</div>
	
	<!---------------------------------- Media: Play ------------------------------------->
	<div data-role="page" data-add-back-btn="true" back-btn-text="back" id="mediaPlay">
		<div data-role="header">
			<h1>Media - Play</h1>
		</div>
		<div data-role="content">
			<div data-role="fieldcontain">
				<div id="playMediaProperties" class="mesgBox">Ready.  Press "Play" to start.</div>
				<form>
					<label for="mediaFreq" id="mediaFreqLabel">Percent:</label>
					<input type="range" name="mediaFreq" id="mediaFreq" value="0" min="0" max="100" data-highlight="true" data-mini="true"/>
				</form>
				<div data-role="controlgroup" data-type="horizontal" align="center" class="mediaControl">
		  			<a href="#" data-role="button" data-inline="true" onclick="playMedia();">Play</a>
					<a href="#" data-role="button" data-inline="true" onclick="pauseMedia();">Pause</a>
					<a href="#" data-role="button" data-inline="true" onclick="stopMedia();">Stop</a>
				</div>
			</div>
		</div>
		<div data-role="footer">
			<div id="mediaPlayStatus"></div>
		</div>			
	</div>