今天简单的记录一下android手机的录音功能,并实现上传到服务器以及下载缓存到手机端,phonegap的android开发环境搭建就忽略不说,可以去网上看教程,本文主要介绍phonegap的录音以及上传下载缓存到手机(android),录音的文件格式我使用的是mp3,后台用的是java,由于自己测试写的,没有整理过,比较乱,如果有错误的话或者更好的方式的话请指示出交流,我也是新手,刚接触phonegap不久,由于ios的录音文件过大,如何实现转码后期再进行研究。。。
至于路径基本是写死,大家可以根据自己的规范来进行配置,写的时候主要针对实现,不是很规范
1、前端代码
<script type="text/javascript">
// 等待加载PhoneGap,加载完成后执行初始化方法
document.addEventListener("deviceready", init, false);
//初始化第一个录音文件()
var myMedia = null;
function init() {
//alert(1);
//初始化文件的路径,应该只下载一次,以后都用这个文件进行录音,然后上传下载缓存(个人意见,不对请指出)
var sourceUrl = "http://192.168.1.9/project/project.mp3";
//将初始化文件下载到手机的位置,mnt/sdcard/ 是android手机的根路径,后面的时自定义路径
var targetUrl = "/mnt/sdcard/project/record/project.mp3";
var fileTransfer = new FileTransfer();
var uri = encodeURI(sourceUrl);
//执行下载
fileTransfer.download(uri, targetUrl, function(entry) {
myMedia = new Media("/mnt/sdcard/project/record/project.mp3");
alert("初始化project.mp3结束");
}, function(error) {
alert("下载出错:" + error.code);
console.log("下载网络mp3出现错误");
},
true,
null
);
}
function test(){
var myMedia = new Media("/mnt/sdcard/project/record/re.mp3");
myMedia.play();
}
var flag = false;
function startRecord(){
alert("开始录音");
console.log('开始录音');
myMedia.startRecord();
flag = true;
// 在页面上进行打印当前的录音时长
var recTime = 0;
var recInterval = setInterval(function() {
if (!flag) {
clearInterval(recInterval);
myMedia.stopRecord();
alert("时长:" + recTime);
} else{
recTime = recTime + 1;
document.getElementById('time').innerHTML = recTime + "秒";
}
}, 1000);
}
function endRecord(){
//结束录音,改变状态,使得开始录音函数中的每秒计时停止,并stop录音
flag = false;
}
//播放录音
function p(){
myMedia.play();
}
function success(){
alert("success");
}
function fail(error){
alert(error.code);
}
/*
上传文件
*/
function uploadMp3() {
var options =new FileUploadOptions();
options.fileKey="file";
options.fileName="/mnt/sdcard/project/record/project.mp3";
//根据不同的格式设置不同的参数
options.mimeType="audio/mpeg";
var params =new Object();
//value1跟value2跟后台的属性进行对应,右边是传到后台该属性的值,这里可以设置为文件名,录音文件的时长等参数,用户信息等参数,看项目需要
params.value1 ="test";
params.value2 ="param";
options.params = params;
var ft =new FileTransfer();
options.chunkedMode = false;
//将本地文件上传到后台,上传成功后调用win函数
ft.upload("/mnt/sdcard/project/record/project.mp3","http://192.168.1.9/project/app/vr_uploadFile.action", done, fail, options);
}
function done(r) {
//这里我简单的返回后台处理后的文件名,这里我还是返回mp3文件
alert("文件名:" + r.response);
var name = "1415262347219.mp3";
//获取到文件名后,将处理后的文件下载到手机的某个目录下
downloadFile("http://192.168.1.9/project/" + name,"/mnt/sdcard/project/record/" + name);
}
/*下载文件,跟第一步初始化时一样*/
function downloadFile(sourceUrl,localUrl){
var fileTransfer = new FileTransfer();
var uri = encodeURI(sourceUrl);
fileTransfer.download(uri, localUrl, function(entry) {
//alert("下载完成");
//取出播放录音并成功上传的文件
var m = new Media("/mnt/sdcard/project/record/xxx.mp3");
m.play();
//alert(m.getDuration());
}, function(error) {
alert("下载出错:" + error.code);
console.log("下载网络mp3出现错误");
},
true,
null
);
}
</script>
//这里是图片的下载及缓存的处理(此处仅供参考,可以与本文的录音缓存做借鉴)
<script type="text/javascript">
function localFile() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
//获取newFile目录,如果不存在则创建该目录
function gotFS(fileSystem) {
//创建目录
fileSystem.root.getDirectory("project/images", {create:true},
function(fileEntry){ },
function(){ console.log("创建目录失败");
});
var _localFile = "project/images/123.jpg";
var _url = "http://192.168.1.9/project/123.jpg";
fileSystem.root.getFile(_localFile, null, function(fileEntry){
alert("存在");
//文件存在就直接显示
var smallImage = document.getElementById('smallImage');
smallImage.style.display = 'block';
smallImage.src = "/mnt/sdcard" + fileEntry.fullPath;
}, function(){
alert("不存在");
//否则就到网络下载图片!
fileSystem.root.getFile(_localFile, {create:true}, function(fileEntry){
var targetURL = fileEntry.toURL();
downloadPic(_url,targetURL);
},function(){
alert('下载图片出错');
});
});
}
function fail(){
akert("fail");
}
/**********下载相片***********/
function downloadPic(sourceUrl,targetUrl){
var fileTransfer = new FileTransfer();
var uri = encodeURI(sourceUrl);
fileTransfer.download(
uri,targetUrl,function(entry){
var smallImage = document.getElementById('smallImage');
smallImage.style.display = 'block';
alert(entry.fullPath);
smallImage.src = "/mnt/sdcard" + entry.fullPath;
},function(error){
console.log("下载网络图片出现错误");
});
}
</script>
2、后台代码
public String uploadDownload() {
String name = new Date().getTime() + ".mp3";
String savePath = ServletActionContext.getServletContext().getRealPath(
"/upload/voice/" + name);
System.out.println(savePath);
try {
将文件保存起来
FileUtils.copyFile(file, new File(savePath));
} catch (IOException e) {
e.printStackTrace();
}
//前端传过来的值
System.out.println(value1);
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
try {
response.getWriter().write(name);
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
文件下载地址:http://download.csdn.net/detail/aguang_vip/8137305 (大家可以花点时间整理一下)