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,从而可以在浏览器中运行测试我们的程 ...
随机推荐
- Xshell关闭导致jar服务终止，使Jar在CentOS后台运行
环境:Xsehll6,CentOS7 在项目文件夹新建一个runjar.sh 在sh中写入(举例说明) nohup java -Dfile.encoding=UTF- -jar fin-mgmt-.j ...
- 架构实战项目心得（九）：后台服务工具ldap：统一用户中心ldap工具使用以及安装
一.安装OpenLDAP 1.安装 yum -y install openldapopenldap-servers openldap-clients openldap-devel compat-ope ...
- log4j记录日志 和 webAppRootKey关系
今天发现一个问题,就是后台从某天开始不再记录日志了,最后发现是 webAppRootKey 的 value 的值必须要和log4j的注入变量要一致. 如下:web.xml文件的 webAppRootK ...
- spring mvc 基本配置
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- Silverlight & Blend动画设计系列六：动画技巧（Animation Techniques）之对象与路径转化、波感特效
当我们在进行Silverlight & Blend进行动画设计的过程中,可能需要设计出很多效果不一的图形图像出来作为动画的基本组成元素.然而在设计过程中可能会出现许多的问题,比如当前绘制了一个 ...
- golang学习之mgo操作mongodb
mgo是mongodb的golang驱动,测试代码: // mgotest project main.go package main import ( "fmt" "ti ...
- 快速删除node_modules目录
当node项目需要重新安装依赖,并且需要删除原有的node_modules目录时,windows下删除该目录比较麻烦的,所以我就在网上找了个npm包,名字叫做 rimraf 安装步骤: npm ins ...
- [javaEE] jsp的九大隐式对象
pageContext对象: 1.可以作为入口对象获取其他八大隐式对象的引用 1.1 getEXception获取exception隐世对象 1.2 getPage获取page对象 1.3 getRe ...
- 《MySQL 基础课程》笔记整理（进阶篇）（未完）
一.MySQL服务安装及命令使用 安装过程就不写了,毕竟百度经验一大把 MySQL 官方文档 MySQL 参考手册中文版 1.MySQL简介 RDBMS(Relational Database M ...
- ApplicationContextInitializer接口
一.简述 ApplicationContextInitializer是Spring框架原有的概念, 这个类的主要目的就是在 ConfigurableApplicationContext类型(或者子类型 ...