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,从而可以在浏览器中运行测试我们的程 ...
随机推荐
- JQuery JSON Servlet
<script type="text/javascript" src="js/jquery-1.10.2.js"></script> & ...
- step4: Xpath的使用
XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历. XPath 包含一个标准函数库. XPath 是一个 W3C 标准. 语法简介: htt ...
- js惊奇效果分享，和排序算法
分享地址:http://www.cnblogs.com/lhb25/p/8-amazing-codepen-demos.html 排序算法分享地址:http://www.w3cplus.com/js/ ...
- C# 多线程系列之Mutex使用
互斥量是一个内核对象,它用来确保一个线程独占一个资源的访问,并且互斥量可以用于不同进程中的线程互斥访问资源. 我们可以把Mutex看作一个出租车,乘客看作线程.乘客首先等车,然后上车,最后下车.当一个 ...
- Oracle PL/SQL Developer 上传下载Excel
接到需求,Oracle数据库对Excel数据进行上传和下载,百度后没有很全的方案,整理搜到的资料,以备不时之需. 一.下载Oracle数据到Excel中. 下载数据到Excel在MSSql中很简单,直 ...
- request方法总结
1.获得指定的头 String header = response.getHeader("user-agent"); 2.获得所有头的名称 Enumeration<Stri ...
- Mysql根据经纬度筛选数据
创建位置表,并且插入测试数据 /* Navicat MySQL Data Transfer Source Server : localhost Source S ...
- hdu 4003 Find Metal Mineral 树形dp ，*****
Find Metal Mineral Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65768/65768 K (Java/Other ...
- 从官网下载mod_jk.so
最近在搞apache和tomcat集群,这里就要用到mol_jk.so,在官网找了很久才知道在哪里下载,英语是硬伤啊. 1.打开tomcat官网 http://tomcat.apache.org/ 2 ...
- JavaEE之HttpServletResponse
HttpServletResponse概述 我们在创建Servlet时会覆盖service()方法,或doGet()/doPost(),这些方法都有两个参数,一个为代表请求的request和代表响应r ...