Anonymous Anonymous - 2 months ago 7
Android Question

How to play local media file using phonegap and javascript?

I've made two functions, one for recording a sound and one for playing that sound. First one is working fine. I can see the recorded file saved in my device, but I can't seem to be able to play after recording it even though I got the full path to the media file.

If I call the

playAudio()
method like this:

playAudio('http://filetoplay.com/some.mp3');


the sound plays, but when I try to use it like this:

playAudio(src_to_play);


it does not work.

My recorded audio path
src_to_play
looks like this:
file:///android_asset/www/test_record.amr




// Get absolute file path on the device.
function getPhoneGapPath() {
var path = window.location.pathname;
var sizefilename = path.length - (path.lastIndexOf("/") + 1);
path = path.substr(path, path.length - sizefilename);
return path;
};

// Record audio
function recordAudio() {
document.getElementById('media').style.display = 'block';
var src = "test_record.amr";
$('#src_to_play').val('file://' + getPhoneGapPath() + src);
var mediaRec = new Media(src, onSuccess, onError);
// Record audio
mediaRec.startRecord();

// Stop recording after 10 sec
var recTime = 0;
var recInterval = setInterval(function() {
recTime = recTime + 1;
console.log(recTime);
setAudioPosition(recTime + " sec");
if (recTime >= 10) {
clearInterval(recInterval);
mediaRec.stopRecord();
console.log('rec stopped');
}
}, 1000);
}


// onSuccess Callback
function onSuccess() {
console.log("recordAudio():Audio Success");
}

// onError Callback
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}

// Set audio position
function setAudioPosition(position) {
document.getElementById('audio_position').innerHTML = position;
}

// Audio player
var my_media = null;
var mediaTimer = null;

// Play audio
function playAudio(src) {
// Create Media object from src
my_media = new Media(src, onSuccessPlay, onErrorPlay);
console.log(my_media);
// Play audio
my_media.play();

// Update my_media position every second
if (mediaTimer == null) {
mediaTimer = setInterval(function() {
// get my_media position
my_media.getCurrentPosition(
// success callback
function(position) {
if (position > -1) {
setAudioPosition((position) + " sec");
}
},
// error callback
function(e) {
console.log("Error getting pos=" + e);
setAudioPosition("Error: " + e);
}
);
}, 1000);
}
}

// Pause audio
function pauseAudio() {
console.log(my_media);
if (my_media) {
my_media.pause();
}
}

// Stop audio
function stopAudio() {
console.log(my_media);
if (my_media) {
my_media.stop();
}
clearInterval(mediaTimer);
mediaTimer = null;
}

// onSuccess Callback
function onSuccessPlay() {
console.log("audio is playing");
}

// onError Callback
function onErrorPlay(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}

// Set audio position
function setAudioPosition(position) {
document.getElementById('audio_position').innerHTML = position;
}
$('body').delegate('#play_audio', 'click', function() {
var src_to_play = $('#src_to_play').val();
playAudio(src_to_play);
});

<a href="#" style='position: relative; z-index: 324234; display: inline-block; color: #fff; padding: 10px; width: 100%;' class="btn large" id='play_audio'> Play Audio</a>
<a href="#" style='position: relative; z-index: 324234; display: inline-block; color: #fff; padding: 10px; width: 100%;' class="btn large" onclick="pauseAudio();">Pause Playing Audio</a>
<a href="#" style='position: relative; z-index: 324234; display: inline-block; color: #fff; padding: 10px; width: 100%;' class="btn large" onclick="stopAudio();">Stop Playing Audio</a>
<input type='hidden' id='src_to_play' value=''>
<p id="audio_position" style='position: relative; z-index: 324234; display: inline-block; color: #fff; padding: 10px; width: 100%;'></p>

<a href='#' style='position: relative; z-index: 324234; display: inline-block; color: #fff; padding: 10px; width: 100%;' onclick="recordAudio();">RECORD AUDIO</a>
<p id="media" style='position: relative; z-index: 324234; display: none; color: #fff; padding: 10px; width: 100%;'>Recording audio...</p>
<p id="audio_position" style='position: relative; z-index: 324234; display: inline-block; color: #fff; padding: 10px; width: 100%;'></p>





When I run the recording function everything works fine. When I try to play the recorded file, I get and error from the callback saying:
code: 1
and
message: undefined


What am I doing wrong here?

Answer

You don't need the play function here. What you have to do is declare mediaRec variable globally and play it on click of that button:

// Get absolute file path on the device.
function getPhoneGapPath() {
  var path = window.location.pathname;
  var sizefilename = path.length - (path.lastIndexOf("/") + 1);
  path = path.substr(path, path.length - sizefilename);
  return path;
};
var mediaRec = null;
// Record audio
function recordAudio() {
  document.getElementById('media').style.display = 'block';
  var src = "test_record.amr";
  mediaRec = new Media(src, onSuccess, onError);
  // Record audio
  mediaRec.startRecord();

  // Stop recording after 10 sec
  var recTime = 0;
  var recInterval = setInterval(function() {
    recTime = recTime + 1;
    console.log(recTime);
    setAudioPosition(recTime + " sec");
    if (recTime >= 10) {
      clearInterval(recInterval);
      mediaRec.stopRecord();
      mediaRec.release();
    }
  }, 1000);
}


// onSuccess Callback
function onSuccess() {
  console.log("recordAudio():Audio Success");
}

// onError Callback
function onError(error) {
  alert('code: ' + error.code + '\n' +
    'message: ' + error.message + '\n');
}

// Set audio position
function setAudioPosition(position) {
  document.getElementById('audio_position').innerHTML = position;
}

$('body').delegate('#play_audio', 'click', function() {
  mediaRec.play();
});

Comments