微信音频接口调用demo

淡淡的烟草味﹌ 2022-01-26 22:25 329阅读 0赞

学习微信音频接口调用，参考一下

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=640, user-scalable=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-title" content="">
    <title>录音test</title>
    <style type="text/css">
    @charset "utf-8";
    *{
          margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}
    html{
          max-width:640px; margin:0 auto;}
    body{
          font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; font-size:24px; line-height:1.5em; color:#000;
        -webkit-user-select:none; user-select:none;
        -webkit-touch-callout:none; touch-callout:none;
    }
     
    .start_btn , .play_btn , .send_btn{
          width:250px; height:60px; line-height:60px; margin:20px auto; text-align:center; border:#eee solid 2px; cursor:pointer;}
    .start_btn_in , .stop_btn{
          color:#f00; border:#f00 solid 2px;}
    </style>
    </head>
     
    <body>
     
    <div class="start_btn">按住不放即可录音</div>
     
    <div class="play_btn">点我播放</div>
     
    <div class="send_btn">点我保存</div>
     
     
     
     
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script type="text/javascript">
    wx.config({
         
    	debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    	appId: '', // 必填，公众号的唯一标识
    	timestamp: '', // 必填，生成签名的时间戳
    	nonceStr: '', // 必填，生成签名的随机串
    	signature: '',// 必填，签名，见附录1
    	jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','startRecord','stopRecord','onVoiceRecordEnd','playVoice','stopVoice','onVoicePlayEnd','uploadVoice'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
     
    wx.ready(function(){
         
    	//返回音频的本地ID
    	var localId;
    	//返回音频的服务器端ID
    	var serverId;
    	//录音计时,小于指定秒数(minTime = 10)则设置用户未录音
    	var startTime , endTime , minTime = 2;
    	
    	
    	//***********************************//
    	
    	
    	//开始录音
    	$('.start_btn').on('touchstart',function(e){
         
    		e.preventDefault();
    		var $this = $(this);
    		$this.addClass('start_btn_in');
    		startTime = new Date().getTime();
    		
    		//开始录音
    		wx.startRecord();
    	});
    	//***********************************//
    	//停止录音接口
    	$('.start_btn').on('touchend', function(){
         
    		var $this = $(this);
    		$this.removeClass('start_btn_in');
    		
    		//停止录音接口
    		wx.stopRecord({
         
    			success: function (res) {
         
    				localId = res.localId;
    			}
    		});
    		
    		endTime = new Date().getTime();
    		alert((endTime - startTime) / 1000);
    		if((endTime - startTime) / 1000 < minTime){
         
    			localId = '';
    			alert('录音少于' + minTime +  '秒，录音失败，请重新录音');
    		}
    		
    	});
    	//监听录音自动停止接口
    	wx.onVoiceRecordEnd({
         
    		//录音时间超过一分钟没有停止的时候会执行 complete 回调
    		complete: function (res) {
         
    			localId = res.localId;
    			
    			$('.start_btn').removeClass('start_btn_in');
    		}
    	});
    	
    	
    	//***********************************//
    	
    	
    	$('.play_btn').on('click',function(){
         
    		if(!localId){
         
    			alert('您还未录音，请录音后再点击播放');
    			return;
    		}
    		var $this = $(this);
    		if($this.hasClass('stop_btn')){
         
    			$(this).removeClass('stop_btn').text('点我播放');
    			
    	//		//暂停播放接口
    	//		wx.pauseVoice({
         
    	//			//需要暂停的音频的本地ID，由 stopRecord 或 onVoiceRecordEnd 接口获得
    	//			localId: localId
    	//		});
    	
    			//停止播放接口
    			wx.stopVoice({
         
    				//需要停止的音频的本地ID，由 stopRecord 或 onVoiceRecordEnd 接口获得
    				localId: localId
    			});
    		}else{
         
    			$this.addClass('stop_btn').text('点我停止');
    			
    			//播放语音接口
    			wx.playVoice({
         
    				//需要播放的音频的本地ID，由 stopRecord 或 onVoiceRecordEnd 接口获得
    				localId: localId
    			});
    		}
    	});
    	//监听语音播放完毕接口
    	wx.onVoicePlayEnd({
         
    		//需要下载的音频的服务器端ID，由uploadVoice接口获得
    		serverId: localId,
    		success: function (res) {
         
    			$('.play_btn').removeClass('stop_btn').text('点我播放');
    			
    			//返回音频的本地ID
    			//localId = res.localId;
    		}
    	});
    	
    	
    	//***********************************//
    	
    	
    	//上传语音接口
    	$('.send_btn').on('click',function(){
         
    		if(!localId){
         
    			alert('您还未录音，请录音后再保存');
    			return;
    		}
    		
    		alert('上传语音,测试，并未提交保存');
    		return;
    		
    		//上传语音接口
    		wx.uploadVoice({
         
    			//需要上传的音频的本地ID，由 stopRecord 或 onVoiceRecordEnd 接口获得
    			localId: localId, 
    			//默认为1，显示进度提示
    			isShowProgressTips: 1,
    			success: function (res) {
         
    				//返回音频的服务器端ID
    				serverId = res.serverId;
    			}
    		});
    	});
    	
    });
     
    </script>
    </body>
    </html>

原文地址： [https://blog.csdn.net/qq\_16494241/article/details/79306023][https_blog.csdn.net_qq_16494241_article_details_79306023]

[https_blog.csdn.net_qq_16494241_article_details_79306023]: https://blog.csdn.net/qq_16494241/article/details/79306023