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>