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,从而可以在浏览器中运行测试我们的程 ...
随机推荐
- poj 2405 Beavergnaw
Beavergnaw Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6310 Accepted: 4158 Descri ...
- 常用工具说明--Maven使用说明
什么是Maven? 如今我们构建一个项目需要用到很多第三方的类库,如写一个使用Spring的Web项目就需要引入大量的jar包.一个项目Jar包的数量之多往往让我们瞠目结舌,并且Jar包之间的关系错综 ...
- js 验证字符串是否全为中文
js 验证字符串是否全为中文: function isChinese(str) { var reg = /^[\u4E00-\u9FA5]+$/; if(reg.test(str)){ return ...
- sublime text 3 PHP 所需插件
1. PHP代码语法验证插件:SublimeLinter 2.Bracket Highlighter 用于匹配括号,引号和html标签.对于很长的代码很有用.安装好之后,不需要设置插件会自动生效 3. ...
- JavaScript使用Object.defineProperty方法实现双数据绑定
Object.defineProperty这个方法非常值得学习,很多mvc框架中的双向数据绑定就是通过它来实现的. 本着互联网分享精神,今天我就将我自己的见解分享给大家,希望能有所帮助. 开始使用 O ...
- 四 Scatter/Gather
scatter/gather用于描述从Channel中读取或者写入到Channel的操作. 分散(scatter):从Channel中读取在读操作中将读取的数据写入多个Buffer中.因此,Chann ...
- C Primer Plus note9
undefined reference to `WinMain@16'| 运行程式的时候出现了这样的错误,而且编译器也没有提示是哪一行出错: 经过百度搜索,发现了问题所在: 上面的图中main()函数 ...
- Idea创建Hibernate bean类和.xml文件
Idea通过表结构反向生成Hibernate实体类和映射文件 首先:之前通过Eclipse反向生成Hibernate的实体类,很傻瓜式,基本上不用配置.但是Idea通过表结构反向生成hibernate ...
- Unity --- 关节组件
一.简介 Unity提供了下面的关节组件:铰链关节(Hinge Joint).固定关节(Fixed Joint).弹簧关节(Spring Joint).角色关节(Character Joint).可配 ...
- 最长公共子序列（LCS）思维导图