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,从而可以在浏览器中运行测试我们的程 ...
随机推荐
- Java复习第四天
1.Object类 (1)Object是类层次结构的根类,所有的类都直接或者间接的继承自Object类. (2)Object类的构造方法有一个,并且是无参构造:子类构造方法默认访问父类的构造是无参构造 ...
- Java - 多线程中的不变性问题
这篇记录一下保证并发安全性的策略之——不变性. (注意:是Immutable,不是Invariant!) 将一连串行为组织为一个原子操作以保证不变性条件,或者使用同步机制保证可见性,以防止读到失效数据 ...
- Oracle数据库查看已添加的索引和创建索引
/** *查看目标表中已添加的索引 * */ --在数据库中查找表名 select * from user_tables where table_name like 'tablename%'; --查 ...
- ,SQL语句关键词以及实例
1.select:功能:查找,语法:select 列名 from 表名(注:可以一次从一个表中查询多个列或者从多个表名中查询资料) 实例:select Name from Table1,返回Table ...
- javaweb带父标签的自定义标签
1.完整的示例代码:要实现的功能是父标签中有name属性,子标签将父标签的name属性值打印到jsp页面上. 1.1 父类和子类的标签处理器类 testParentTag.java package c ...
- go install runtime/cgo: open /usr/local/go/pkg/darwin_amd64/runtime/cgo.a: permission denied
在做更新时,收到下面提示: go get github.com/astaxie/beego go install runtime/cgo: open /usr/local/go/pkg/darwin ...
- Oracle自定义函数&加密
在sql中频繁使用的功能(逻辑.加密等)可以写成自定义函数进行封装,之后再调用即可. CREATE OR REPLACE FUNCTION "函数名" (参数名 参数类型 参数数据 ...
- LeetCode Palidrome Number
class Solution { public: bool isPalindrome(int x) { ) return false; ; int t = x; ; ) { pow *= ; cnt+ ...
- 谈谈我从工作中理解的CDN
一.CDN定义 CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.通过 ...
- Hnoi2004 金属包裹
传送门 三维凸包模板题……只是听了听计算几何的课之后心血来潮想写的…… 我的做法很无脑是吧……暴力枚举三个点组成的三角形,然后枚举剩下的点,判断其余点是否都在这个三角形的同一侧,是的话则说明这个三角形 ...