博主首页

h5app调用录音、动态权限询问

5+APP各独立模块中已经集成了功能所需权限的动态申请机制

DCloud在native.js中为Android提供了动态申请权限的功能。

开发者通过调用plus.android.requestPermissions申请权限。

参数permissions为所需权限数组；resultCallback为申请结果回调，将会返回已获取的权限、拒绝本次申请的权限、永久拒绝申请的权限3种结果的权限列表，开发者可以读取各权限申请结果并做相应处理；

errorCallback为权限参数格式错误时调用，返回错误信息

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <script src="js/jquery-3.6.0.min.js"></script>
    <title></title>
    <script>
    var  mediaRecorder;
           document.addEventListener('plusready', function(){
    
               //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")        
            //录音权限询问
             plus.android.requestPermissions(["android.permission.RECORD_AUDIO"],function(resultObj){
                //录音
                 navigator.mediaDevices.getUserMedia({audio: true,video: false}).then(stream => {
                                 mediaRecorder = new MediaRecorder(stream);
                                 var audio = document.getElementById('audio');
                                //音量
                                 audio.volume=1.0;
                                 var recordedChunks = [];
                                //录音时间片段
                                 mediaRecorder.start(3000);
                                 //发生有效声音时回调
                                 mediaRecorder.addEventListener("dataavailable",function(e){
                                     if(e.data.size>0){
                                         recordedChunks.push(e.data);
                                         if(mediaRecorder.state!="inactive"){
                                             mediaRecorder.stop();
                                         }                
                                     }
                                 })
                                 //暂停时回调    
                                 mediaRecorder.addEventListener("stop",function(e){
                                     if(recordedChunks.length>0){
                                         audio.src = URL.createObjectURL(new Blob(recordedChunks));
                                         audio.play();
                                         recordedChunks = [];
                                         mediaRecorder.start(3000);
                                     }            
                                 })
                             },(error) =>{
                                 if(error.toString().indexOf("Could not start video source")>=0){
                                         alert("请打开手机录音权限");
                                        console.log(error.toString());
                                 }
                                 
                             });     
             });
        

           });
        
                
        //点击切换播放音频
        function click2(va){
            
            $("#audio")[0].pause();
            var url="mp3/"+va+".mp3";
            $("#audio").attr("src",url);
            $("#audio")[0].play();
            if(mediaRecorder){
                mediaRecorder.start(3000);
            }    
        }
        

        
    </script>
</head>

<body style="width: auto;height: 100%;background-color: antiquewhite;">
    <audio id="audio" style="background-color: white;opacity: 0;" controls></audio>
    
    <div style="background-color: antiquewhite;width: 100%;padding-left: 3%;">
        <div style="height: 300px;background: url(img/1.gif);background-repeat: no-repeat;
            ">
        </div>    
    </div>
    <div style="padding-left: 8%;">    
    <button onclick="click2('1')" id="b1" style="width: 100px;height: 60px;float: left;">1</button>
    <button onclick="click2('2')" id="b2" style="width: 100px;height: 60px;float: left;">2</button>
    <button onclick="click2('3')" id="b3" style="width: 100px;height: 60px;float: left;">3</button>
    <button onclick="click2('4')" id="b4" style="width: 100px;height: 60px;float: left;">4</button>
    <button onclick="click2('5')" id="b5" style="width: 100px;height: 60px;float: left;">5</button>
    <button onclick="click2('6')" id="b6" style="width: 100px;height: 60px;float: left;">6</button>
    <button onclick="click2('7')" id="b7" style="width: 100px;height: 60px;float: left;">7</button>
    <button onclick="click2('8')" id="b8" style="width: 100px;height: 60px;float: left;">8</button>
    <button onclick="click2('9')" id="b9" style="width: 100px;height: 60px;float: left;">9</button>
    <button onclick="click2('10')" id="b10" style="width: 100px;height: 60px;float: left;">10</button>
    <button onclick="click2('11')" id="b11" style="width: 100px;height: 60px;float: left;">11</button>
    <button onclick="click2('12')" id="b12" style="width: 100px;height: 60px;float: left;">12</button>
    <button onclick="click2('13')" id="b13" style="width: 100px;height: 60px;float: left;">13</button>
    <button onclick="click2('14')" id="b14" style="width: 100px;height: 60px;float: left;">14</button>
    <button onclick="click2('15')" id="b15" style="width: 100px;height: 60px;float: left;">15</button>
    <button onclick="click2('16')" id="b16" style="width: 100px;height: 60px;float: left;">16</button>
    <button onclick="click2('17')" id="b17" style="width: 100px;height: 60px;float: left;">17</button>
    <button onclick="click2('18')" id="b18" style="width: 100px;height: 60px;float: left;">18</button>
    <button onclick="click2('19')" id="b19" style="width: 100px;height: 60px;float: left;">19</button>
    <button onclick="click2('20')" id="b20" style="width: 100px;height: 60px;float: left;">20</button>
    <button onclick="click2('21')" id="b21" style="width: 100px;height: 60px;float: left;">21</button>
    </div>
    
    <script>

    
    </script>
</body>
</html>

 

posted @ 2022-01-19 17:35  笑~笑  阅读(887)  评论(0)    收藏  举报