PhoneGap API 之多媒体
一、 MediaApi 简单介绍
PhoneGap API Media 对象提供录制和回放设备上的音频文件的能力
参数：
var media = new Media(src, mediaSuccess, [mediaError], [mediaStatus]);
src: 一个包含音频内容的 URI （媒体音乐的播放器）
mediaSuccess: （可选项）当一个 Media 对象完成当前的播放、录制或停止操作时触 发的回调函数
mediaError:（可选项）当出现错误时调用的回调函数
mediaStatus: （可选项）当状态发生变化的时候调用的回调函数。
方法：
media.getCurrentPosition：返回一个音频文件的当前位置。
media.getDuration：返回一个音频文件的总时长。
media.play：开始或恢复播放音频文件。
media.pause：暂停播放音频文件。
media.release：释放底层操作系统的音频资源。
media.seekTo：在音频文件中移动到相应的位置。
media.setVolume: 设置音频的音量
media.startRecord：开始录制音频文件。
media.stopRecord：停止录制音频文件。
media.stop：停止播放音频文件。
二、 播放音频
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
document.addEventListener("deviceready", myDeviceReadyListener, false);
});
var media='';
var timer=''; myDeviceReadyListener = function(){
//var src = "/mnt/sdcard/KuwoMusic/music/wdhxd.mp3";
var src = "http://www.57lehuo.com/nrg.mp3"
media = new Media(src, mediaSuccess, mediaError, mediaStatus);
//开始播放
$('#btn_play').click(function(){
play();
});
//暂停播放
$('#btn_pause').click(function(){
pause();
});
//停止播放
$('#btn_stop').click(function(){
stop();
});
//恢复播放
$('#btn_resume').click(function(){
play();
}); //跳转到100秒
$('#goto100').click(function(){
goto100();
}) //volumeUp
$('#volumeUp').click(function(){
volumeUp();
})
$('#volumeDown').click(function(){
volumeDown();
})
}
//跳转到100秒
function goto100(){
if(media!==''){
media.seekTo(100000)//默认是毫秒数
}
} //增加音量，1表示最高音量
function volumeUp(){
media.setVolume('1.0')
}
//减少音量 ，0表示最低音量
function volumeDown(){
media.setVolume('0.3')
} //播放音频 或者恢复播放
function play(){
if(media!=''){
media.play();
if(timer==''){
timer=setInterval(function(){
//返回一个音频文件的当前位置。有两个回调函数：成功和失败
media.getCurrentPosition(function(position){
if(position>0){
$('#txt_position .ui-btn-text').text('当前播放到'+position+'秒');
}
}, function(err){
console.log('获取当前位置失败'); });//获取当前的一个位置 //获取总长度
var media_length=media.getDuration();//没有获取到 这个值默认就-1，所以下面要先进行判断是否大于0
if(media_length>0){
$('#txt_duration .ui-btn-text').text('当前音频的总长度为'+media_length+'秒');
} },1000); }
}
}
//停止播放
function stop(){
if(media!=''){
media.stop();
media.release();//释放底层资源
if(timer!=''){
clearInterval(timer); //清楚定时器
}
timer='';
//当前位置变为0秒
$('#txt_position .ui-btn-text').text('当前播放到0秒');
}
}
//暂停播放
function pause(){
if(media!=''){
media.pause();
}
} //当一个Media对象完成当前的播放、录制或停止操作时触发的回调函数
function mediaSuccess(){
console.log('当一个Media对象完成当前的播放、录制或停止操作时触发的回调函数');
}
//失败的回调函数
function mediaError(error) {
console.log('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
//状态改变的回调函数
function mediaStatus(){
console.log('状态改变的回调函数');
} </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>phonegap100</h1>
</div>
<div data-role="content">
<a id="btn_play" href="#" data-role="button">播放</a>
<a id="btn_pause" href="#" data-role="button">暂停</a>
<a id="btn_resume" href="#" data-role="button">恢复</a>
<a id="btn_stop" href="#" data-role="button">停止</a> <a id="goto100" href="#" data-role="button">跳转到100秒</a>
<a id="volumeUp" href="#" data-role="button">增加音量</a>
<a id="volumeDown" href="#" data-role="button">降低音量</a> <a id="txt_position" href="#" data-role="button">当前播放到...秒</a>
<a id="txt_duration" href="#" data-role="button">总长度为...秒</a>
</div>
<div data-role="footer">
<h4>phonegap中文网</h4>
</div>
</div> </body>
</html>
三、 录制音频
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function(){
document.addEventListener("deviceready", myDeviceReadyListener, false);
});
var media = null;
var timer='';
var i=1;
myDeviceReadyListener = function(){
var src = "/mnt/sdcard/myrecord1.mp3"; //最后生成的文件的路劲和文件名，这么写第二次录音会替换掉第一次的，因为文件名是一样的,默认我们随机生成文件名
media = new Media(src, mediaSuccess, mediaError, mediaStatus);
$("#btn_play").click(function(){
startRecord();
})
$("#btn_stop").click(function(){
stopRecord();
if(timer!=''){
clearInterval(timer);
timer='';
}
$('#txt_position .ui-btn-text').text('当录音时间为0秒'); }) }
//开始录音
function startRecord(){
if(media!=''){
media.startRecord();
if(timer==''){
timer=setInterval(function(){
$('#txt_position .ui-btn-text').text('当录音时间为'+i+'秒');
i++;
},1000)
}
}
}
//停止录音
function stopRecord(){
if(media!=''){
media.stopRecord();
}
} //当一个Media对象完成录音
function mediaSuccess(){
console.log('当一个Media对象完成当前的播放、录制或停止操作时触发的回调函数');
}
//失败的回调函数
function mediaError(error) {
console.log('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
//状态改变的回调函数
function mediaStatus(){
console.log('状态改变的回调函数');
} </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>phonegap100.com</h1>
</div>
<div data-role="content">
<a id="btn_play" href="#" data-role="button">开始录音</a>
<a id="btn_stop" href="#" data-role="button">停止录音</a>
<a id="txt_position" href="#" data-role="button">录音时间0秒</a>
</div>
<div data-role="footer">
<h4>phonegap中文网</h4>
</div>
</div> </body>
</html>
PhoneGap API 之多媒体的更多相关文章
- PhoneGap学习地址 / PhoneGap API介绍：Events
http://blog.csdn.net/phonegapcn 事件类型: backbutton deviceready menubutton pause resume searchbutton on ...
- PhoneGap API介绍：Camera
本文将介绍PhoneGap API——Camera:使用设备的摄像头采集照片,对象提供对设备默认摄像头应用程序的访问. 方法: camera.getPicture 参数: cameraSuccess ...
- PhoneGap API介绍：File
本文将介绍PhoneGap API——File:通过JavaScript截获本地文件系统.File是用于读取.写入和浏览文件系统层次结构的PhoneGap API. 对象: DirectoryEntr ...
- PhoneGap API介绍：Events
事件类型: backbutton deviceready menubutton pause resume searchbutton online offline backbutton 当用户在Andr ...
- PhoneGap API Documentation API Reference
API Reference-API参考 Accelerometer-加速度计 Tap into the device's motion sensor.-点击进入该设备的运动传感器. Camera-相机 ...
- PhoneGap API 之事件处理_双击返回键退出程序
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- PhoneGap API 之事件处理
一. deviceready 事件 1.在使用 PhoneGap 开发应用时,deviceready 事件是非常常用的.这一事件在设备的本地 环境和页面完全加载完成之后才触发 2.注意:此事件一般晚于 ...
- 禁止输入中文 与 禁止输入数字在phonegap api环境效果
例子如下: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...
- Nova PhoneGap框架 第六章 使用Mock
在我们的框架中引入了一个很重要的设计,那就是使用Mock. 这里的mock是指cordova.mock.js文件,它模拟了PhoneGap(Cordova)的API,从而可以在浏览器中运行测试我们的程 ...
随机推荐
- Windows开启telnet命令
1.点击开始 → 运行 → 输入telnet,回车. 2.点击启用或关闭Windows功能 3.找到Telnet客户端,勾选,点击确认 4.搞定,测试一下 打开CMD,在出来的DOS界面里,输入tel ...
- jQuery ajax async
jQuery 同步调用: jQuery.ajax({ type:'POST', async: false, url:'qcTask/add', contentType:'application/jso ...
- button小手设置 css的cursor
需要对元素的css属性cursor进行设置.cursor可能的值: default 默认(通常是一个箭头) auto 默认.浏览器设置的光标 crosshair 十字线形状. pointer 小手形状 ...
- Chetsheet: 2017 01.01 ~ 01.31
Web TypeScript: the missing introduction Async HTTP API and service bus Optimizing the Performance o ...
- php获取今日开始时间和结束时间
$begintime=date("Y-m-d H:i:s",mktime(0,0,0,date('m'),date('d'),date('Y'))); $endtime=date( ...
- window.onload和3的小游戏
window.onload出现的原因? 我们都知道页面的代码顺序是从上往下进行加载,很多时候我们要对页面中的某一个模块进行操作,这时候我们常常使用javascript代码来进行操作.为了能够保证操作 ...
- Grunt完整打包一个项目实例
Grunt确实好用,配置好Gruntfile.js之后,一个命令就行云如流水,程序帮你搞定一切,爽歪歪. 我们先看压缩前的目录: 再看打包后的目录: build是打包后的文件夹,main.css是压缩 ...
- 小小的js
//安全登陆不允许iframe嵌入 if (window.top !== window.self) { window.top.location = window.location; } 使用filte ...
- Java基础学习总结一（Java语言发展历史、JDK下载安装以及配置环境变量）
最近一段时间计划复习一下java基础知识,使用的视频课程是尚学堂高淇老师的,上课过程中的心得体会直接总结一下,方便以后复习. 一:计算机语言的发展 1:机器语言,最原始的语言,主要有“01”构成,最早 ...
- hdu 2063 过山车（模板）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2063 过山车 Time Limit: 1000/1000 MS (Java/Others) Me ...