zoukankan      html  css  js  c++  java
  • 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    + '
    ' +
                      'message: ' + error.message + '
    ');
       }
           //状态改变的回调函数
           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    + '
    ' +
                      'message: ' + error.message + '
    ');
       }
           //状态改变的回调函数
           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>
  • 相关阅读:
    城市的划入划出效果
    文本溢出省略解决笔记css
    长串英文数字强制折行解决办法css
    Poj 2352 Star
    树状数组(Binary Indexed Trees,二分索引树)
    二叉树的层次遍历
    Uva 107 The Cat in the Hat
    Uva 10336 Rank the Languages
    Uva 536 Tree Recovery
    Uva10701 Pre, in and post
  • 原文地址:https://www.cnblogs.com/LO-ME/p/4582136.html
Copyright © 2011-2022 走看看