I'm using the following PhoneGap Media code to record audio in my app. I'm able to record the audio and play it back just fine. I need to be able to send the recorded file to my server when done (preferably using PhoneGap's File Transfer plugin), however I'm not quite sure how to write File Transfer code. Below is the code I'm currently using to record the file. Any help on this would be great, thanks.
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Record audio
//
function recordAudio() {
var src = "myrecording.wav";
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;
setAudioPosition(recTime + " sec");
if (recTime >= 10) {
clearInterval(recInterval);
mediaRec.stopRecord();
}
}, 1000);
}
// Cordova is ready
//
function onDeviceReady() {
recordAudio();
}
// onSuccess Callback
//
function onSuccess() {
alert("recordAudio():Audio Success");
console.log(filePath);
}
// 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;
}
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Record audio
//
function recordAudio() {
var src = "myrecording.wav";
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;
setAudioPosition(recTime + " sec");
if (recTime >= 10) {
clearInterval(recInterval);
mediaRec.stopRecord();
}
}, 1000);
}
// Cordova is ready
//
function onDeviceReady() {
recordAudio();
}
// onSuccess Callback
//
function onSuccess() {
alert("recordAudio():Audio Success");
console.log(filePath);
}
// 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;
}
- 5 Posts
- 0 Reply Likes
Posted 5 years ago
JesseMonroy650 (Volunteer), Champion
- 3325 Posts
- 122 Reply Likes
@Samuel,
you said you are not confident of your code. However, you did not state if you had test this code on your server.
Have you tested your server to see if it can receive a file?
Is this your first App? If not, What other plugins have you used?
Is
Are you waiting for the
TIA
Jesse
you said you are not confident of your code. However, you did not state if you had test this code on your server.
Have you tested your server to see if it can receive a file?
Is this your first App? If not, What other plugins have you used?
Is
phonegap.js in your index.html?
Are you waiting for the
deviceready event?
TIA
Jesse
- 5 Posts
- 0 Reply Likes
Thanks for the response! I am confident in the codes ability to record and playback. And have the necessary plugins installed (Phonegap, Media, File). Where I am struggling is finding a code to send the audio file to the server. I have tested several and can’t seem to get a response from the server.
JesseMonroy650 (Volunteer), Champion
- 3325 Posts
- 122 Reply Likes
- 5 Posts
- 0 Reply Likes
Q: Have you tested your server to see if it can receive a file?
A:We have tested the server and received the file using the phonegap capture plugin. When using that same code to upload to the server with the media plugin, nothing happens.
Q:Is this your first App? If not, What other plugins have you used?
A: This is the first app we have created utilizing Phonegap.
Q: Is phonegap.js in your index.html?
A: We are using the service for a mobile app we have built using appery.io. Appery comes with the entire phonegap suite pre-installed.
Q:Are you waiting for the deviceready event?
A: What do you mean by this?
Thank you for your time thus far.
-Sam
A:We have tested the server and received the file using the phonegap capture plugin. When using that same code to upload to the server with the media plugin, nothing happens.
Q:Is this your first App? If not, What other plugins have you used?
A: This is the first app we have created utilizing Phonegap.
Q: Is phonegap.js in your index.html?
A: We are using the service for a mobile app we have built using appery.io. Appery comes with the entire phonegap suite pre-installed.
Q:Are you waiting for the deviceready event?
A: What do you mean by this?
Thank you for your time thus far.
-Sam
JesseMonroy650 (Volunteer), Champion
- 3325 Posts
- 122 Reply Likes
@Sam
Okay. Thanks for all the details. It makes this much easier. The best thing is you have real experience.
1) Okay. There are three (3) frameworks that make up Phonegap that often confuse people. I am stating this to make sure we are on the same page.
If you are using the later two, this forum is for you. If the first, you'll need to get help from the Google Group
If you are using Desktop/Developer, some plugins do not work on this system.
If you are using Build, you should be using these DOCS, and no other - plugins being the only exception.
2) Hmmm... bit of a problem. Phonegap uses the HTML5 APIs when it can. This means some services (camera being one) don't require phonegap, because the camera can run natively on the platform (be it Android or iOS - usually 7 and 4, respectively).
This means you might have used the camera API on your device and not known it. The best way to tell is to remove the plugin and try your app. But let's put that aside for the moment.
3) I assume your transfer to the server was FTP, or POST-form. Which did you use? Did you use the plugin?
4) When using Phonegap, be it CLI or Build, two things are required - in this order.
EXAMPLE Boilerplate App using both phongap.js and deviceready.
Blog: An HTML Boilerplate for Phonegap
Code: https://github.com/jessemonroy650/Phonegap--Generic-Boilerplate
YOUR ISSUE
Please let me know how you did the file transfer?
FTP? POST-form? File-Transfer Plugin?
I re-read your post and realized you are asking "how to do a file transfer". This should have been your title.
You can use AJAX, JQuery (POST-form), websockets, or any plugin that is available for this task.
TIA
Jesse
Okay. Thanks for all the details. It makes this much easier. The best thing is you have real experience.
1) Okay. There are three (3) frameworks that make up Phonegap that often confuse people. I am stating this to make sure we are on the same page.
- Phonegap CLI - done locally on your command line from end to end.
- Phonegap Desktop/Developer App - done locally on your command line, but passes your App to the Developer App running on your mobile device
- Phonegap Build - builds in the cloud (remote server). Does NOT use your machine for anything. You would only user a text editor on your end - and nothing else.
If you are using the later two, this forum is for you. If the first, you'll need to get help from the Google Group
If you are using Desktop/Developer, some plugins do not work on this system.
If you are using Build, you should be using these DOCS, and no other - plugins being the only exception.
2) Hmmm... bit of a problem. Phonegap uses the HTML5 APIs when it can. This means some services (camera being one) don't require phonegap, because the camera can run natively on the platform (be it Android or iOS - usually 7 and 4, respectively).
This means you might have used the camera API on your device and not known it. The best way to tell is to remove the plugin and try your app. But let's put that aside for the moment.
4) When using Phonegap, be it CLI or Build, two things are required - in this order.
- You must have
<script src="phonegap.js"></script>in yourindex.htmland it must listed as I show it. Documentation - See: Making Sure You can Still Access the PhoneGap API
- phonegap.js loads all the pluings and does some "housekeeping", when it is done, it issues a
devicereadyevent. Documentation
EXAMPLE Boilerplate App using both phongap.js and deviceready.
Blog: An HTML Boilerplate for Phonegap
Code: https://github.com/jessemonroy650/Phonegap--Generic-Boilerplate
YOUR ISSUE
FTP? POST-form? File-Transfer Plugin?
I re-read your post and realized you are asking "how to do a file transfer". This should have been your title.
You can use AJAX, JQuery (POST-form), websockets, or any plugin that is available for this task.
- Google: ajax file upload
- Google: jquery post form upload file
- Google: websocket javascript api upload
-
cordova-plugin-websocket plugin
-
cordova-sftp-plugin plugin
-
cordova-plugin-file-transfer plugin
TIA
Jesse
- 5 Posts
- 0 Reply Likes
Hi Jesse,
Sorry for the late reply. To rephrase and simplify:
We are building the mobile app using the appery.io framework. Every app that you create in Appery.io includes Apache Cordova (PhoneGap). Apache Cordova provides two main capabilities:
Wraps the mobile web app inside a native wrapper.
Allows you to access native device features such as your microphone, camera, contacts and more.
We have successfully created (using phonegap CAPTURE) an audio recording function, which when complete uploads to our server where a .php service renames and stores the file in a specific folder.
We would like to create the same funtion using phonegap MEDIA. As we would like to customize the appearance of the audio recorder and have control over the quality and file type.
We have created a code which successfully records the audio, but when it gets to the portion on the file transfer to the server, it doesnt work. Can you look over the following code and tell me if something jumps out at you as being incorrect? I've modified it since it was posted above. I greatly appreciate your help!
-Sam
// Create the record file and set variables fileURL and audioRecord //
//
audioRecord = 'record.wav';
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, fail);
}
function onFileSystemSuccess(fileSystem) {
fileSystem.root.getFile(audioRecord, {
create: true,
exclusive: false
}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileURL = fileEntry.toURL();
}
function fail(fileSystem) {
alert("File System Error");
}
// Start recording and stop after 10 seconds //
//
function recordAudio() {
var record = new Media(audioRecord, onSuccess, onError);
// Record audio
record.startRecord();
// Stop recording
var recTime = 0;
var recInterval = setInterval(function() {
recTime = recTime + 1;
setAudioPosition(recTime + " sec");
if (recTime >= 10) {
clearInterval(recInterval);
record.stopRecord();
}
}, 1000);
}
// Cordova is ready
//
function onDeviceReady() {
recordAudio();
}
// onSuccess Callback
//
function onSuccess() {
alert("recordAudio():Audio Success");
uploadAudio();
}
// 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;
}
// Upload the recorded file to server //
//
function uploadAudio(fileURL) {
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = "recordupload.wav";
options.mimeType = "audio/wav";
var ft = new FileTransfer();
ft.upload(fileURL, encodeURI("http://www.xylo-app.com/images/test/i..."), win, fail, options);
}
function win(r) {
console.log("Code = " + r.responseCode);
console.log("Response = " + r.response);
console.log("Sent = " + r.bytesSent);
alert("success!");
}
function fail(error) {
alert("An error has occurred: Code = " + error.code);
console.log("upload error source " + error.source);
console.log("upload error target " + error.target);
}
Sorry for the late reply. To rephrase and simplify:
We are building the mobile app using the appery.io framework. Every app that you create in Appery.io includes Apache Cordova (PhoneGap). Apache Cordova provides two main capabilities:
Wraps the mobile web app inside a native wrapper.
Allows you to access native device features such as your microphone, camera, contacts and more.
We have successfully created (using phonegap CAPTURE) an audio recording function, which when complete uploads to our server where a .php service renames and stores the file in a specific folder.
We would like to create the same funtion using phonegap MEDIA. As we would like to customize the appearance of the audio recorder and have control over the quality and file type.
We have created a code which successfully records the audio, but when it gets to the portion on the file transfer to the server, it doesnt work. Can you look over the following code and tell me if something jumps out at you as being incorrect? I've modified it since it was posted above. I greatly appreciate your help!
-Sam
// Create the record file and set variables fileURL and audioRecord //
//
audioRecord = 'record.wav';
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, fail);
}
function onFileSystemSuccess(fileSystem) {
fileSystem.root.getFile(audioRecord, {
create: true,
exclusive: false
}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileURL = fileEntry.toURL();
}
function fail(fileSystem) {
alert("File System Error");
}
// Start recording and stop after 10 seconds //
//
function recordAudio() {
var record = new Media(audioRecord, onSuccess, onError);
// Record audio
record.startRecord();
// Stop recording
var recTime = 0;
var recInterval = setInterval(function() {
recTime = recTime + 1;
setAudioPosition(recTime + " sec");
if (recTime >= 10) {
clearInterval(recInterval);
record.stopRecord();
}
}, 1000);
}
// Cordova is ready
//
function onDeviceReady() {
recordAudio();
}
// onSuccess Callback
//
function onSuccess() {
alert("recordAudio():Audio Success");
uploadAudio();
}
// 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;
}
// Upload the recorded file to server //
//
function uploadAudio(fileURL) {
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = "recordupload.wav";
options.mimeType = "audio/wav";
var ft = new FileTransfer();
ft.upload(fileURL, encodeURI("http://www.xylo-app.com/images/test/i..."), win, fail, options);
}
function win(r) {
console.log("Code = " + r.responseCode);
console.log("Response = " + r.response);
console.log("Sent = " + r.bytesSent);
alert("success!");
}
function fail(error) {
alert("An error has occurred: Code = " + error.code);
console.log("upload error source " + error.source);
console.log("upload error target " + error.target);
}
JesseMonroy650 (Volunteer), Champion
- 3325 Posts
- 122 Reply Likes
@Samuel,
With your response, I cannot assume you have addressed the two main issues.
In addition, as I pointed out this forum is for Phonegap Build. Nothing you said let me know if you are using "CLI" or the "Cloud-based service".
If you address my previous post, I can help you.
AGAIN, if you are using CLI, then you should be on Google Groups
FWIW: have your tried playing back your recording locally? Are you sure you have a file to transfer?
ALSO, I wanted to add, this is NOT the support forum for Appery.io They have support on this page. Look for a blue popout tab on the right middle.
Lastly, when posting code, please use some HTML (like <code></code>). (see attached image)
TIA
Jesse
With your response, I cannot assume you have addressed the two main issues.
- phonegap.js
- deviceready
In addition, as I pointed out this forum is for Phonegap Build. Nothing you said let me know if you are using "CLI" or the "Cloud-based service".
If you address my previous post, I can help you.
AGAIN, if you are using CLI, then you should be on Google Groups
FWIW: have your tried playing back your recording locally? Are you sure you have a file to transfer?
ALSO, I wanted to add, this is NOT the support forum for Appery.io They have support on this page. Look for a blue popout tab on the right middle.
Lastly, when posting code, please use some HTML (like <code></code>). (see attached image)
TIA
Jesse
- 2 Posts
- 0 Reply Likes
- 2 Posts
- 0 Reply Likes
Solved - I used this plugin instead.
https://github.com/emj365/cordova-plu...
https://github.com/emj365/cordova-plu...
- 1 Post
- 0 Reply Likes
Related Categories
-
PhoneGap Build
- 15111 Conversations
- 275 Followers



