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,从而可以在浏览器中运行测试我们的程 ...

随机推荐

ES6学习准备
ES6学习准备选择运行环境 ES6的语法,nodeJs.浏览器不一定都支持,不同版本的支持情况不一样.在学习过程中,如何确定是自己写的代码有问题,还是运行环境不支持呢? 首先,浏览器端一般支持的特性 ...
Gradient Optimization
Gradient Optimization Gradient Descent Batch Gradient Descent Mini-Batch Gradient Descent Stochastic ...
【转】WEB安全之渗透测试流程
熟悉渗透流程,攻击会像摆积木一样简单! 0x 01:信息收集收集网站信息对渗透测试非常重要,收集到的信息往往会让你在渗透中获得意外惊喜. 1. 网站结构可以使用扫描工具扫描目录,主要扫出网站管理员 ...
IIS调试技术之 Debug Diagnostic (调试诊断)
IIS 调试技术之 Debug Diagnostic (调试诊断) 1 概述 1.1 文档简介系统出现错误或崩溃,免不了要进行调试.调试能进行的前提是错误能重现,但实际上要重现一个错误有 ...
java 并发(五)---AbstractQueuedSynchronizer（2）
文章部分代码和照片来自参考资料问题 : ConditionObject 的 await 和 signal 方法是如何实现的 ConditonObject ConditionObjec ...
【Hadoop系列】linux SSH原理解析
本文中斜体加粗代表shell指令,操作环境 CentOS6.5 linux root免密码登录链接:[Hadoop系列]linux下 root用户免密码登录远程主机 ssh. linux 非root用 ...
webpack基本使用教程
安装本地安装 npm install --save-dev webpack npm install --save-dev webpack-cli //4.x以上版本,用于cli命令全局安装 npm ...
vue如何将单页面改造成多页面应用
问题描述: 手头有一个项目是使用 vue-cli 搭建的单页面应用.项目分为了管理平台和用户查看页面,用户查看页面是很简单的页面,但是在加载过程中,却加载了整个应用的打包代码,量重且影响了响应和体验. ...
Infor SyteLine如何快速锁定用户
使用Infor Syteline ERP系统,当需要做系统维护时,我们需要通知所有用户退出系统,在维护期间,严禁用户登录,这样的话,我们需要锁定用户.对于这个问题,很多管理员会打开SL的Users窗口 ...
Java 之 static的使用方法（6）
Java 中的 static 使用之静态变量大家都知道,我们可以基于一个类创建多个该类的对象,每个对象都拥有自己的成员,互相独立. 然而在某些时候,我们更希望该类所有的对象共享同一个成员.此时就是 ...

PhoneGap API 之多媒体

PhoneGap API 之多媒体的更多相关文章

随机推荐

热门专题