PhoneGap API 之多媒體

時間 2019-11-19

標籤 phonegap api 之多媒體简体版

原文原文鏈接

1、 MediaApi 簡單介紹javascript

　　　　PhoneGap API Media 對象提供錄製和回放設備上的音頻文件的能力css

　　　　參數：html

　　　　　　var media = new Media(src, mediaSuccess, [mediaError], [mediaStatus]);java

　　　　　　src: 一個包含音頻內容的 URI （媒體音樂的播放器）jquery

　　　　　　mediaSuccess: （可選項）當一個 Media 對象完成當前的播放、錄製或中止操做時觸發的回調函數函數

　　　　　　mediaError:（可選項）當出現錯誤時調用的回調函數ui

　　　　　　mediaStatus: （可選項）當狀態發生變化的時候調用的回調函數。spa

　　　　方法：操作系統

　　　　　　media.getCurrentPosition：返回一個音頻文件的當前位置。code

　　　　　　media.getDuration：返回一個音頻文件的總時長。

　　　　　　media.play：開始或恢復播放音頻文件。

　　　　　　media.pause：暫停播放音頻文件。

　　　　　　media.release：釋放底層操做系統的音頻資源。

　　　　　　media.seekTo：在音頻文件中移動到相應的位置。

　　　　　　media.setVolume: 設置音頻的音量

　　　　　　media.startRecord：開始錄製音頻文件。

　　　　　　media.stopRecord：中止錄製音頻文件。

　　　　　　media.stop：中止播放音頻文件。

2、播放音頻

<!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>

3、錄製音頻

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。