H5使用企业微信jssdk录音、上传、下载、播放

最新推荐文章于 2024-06-29 02:54:30 发布

勤奋的树懒

最新推荐文章于 2024-06-29 02:54:30 发布

阅读量5.1w

点赞数 4

分类专栏：编程文章标签： jssdk JS-SDK jssdk语音

本文链接：https://blog.csdn.net/qq_42259469/article/details/93875859

版权

编程专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了如何使用企业微信JS-SDK实现语音录制、上传及下载功能，包括应用程序设置、权限验证、代码实现等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

企业微信上使用js-sdk语音发布任务

企业微信官方API：音频接口地址

step1：登录企业微信新建应用程序并记录你的Secret
在这里插入图片描述
step2：在我的企业最下面找出你的企业ID也就是你的appId

step3：在网页授权及JS-SDK设置你页面所放在服务器的域名验证，会生成下面一个.TXT文件下载下来放在你的服务器根目录才能授权成功。

step4：在自定义菜单链接上你的页面
在这里插入图片描述
step5：页面引入js

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

step6：配置wx.config，参数是后台传过来的在最下面我贴出全部代码

wx.config({
  					beta: true,
  					debug: false,//关闭调试模式
  					appId: data.appid,
  					timestamp: data.timestamp,
  					nonceStr: data.nonceStr,
  					signature: data.signature,
  					jsApiList: ['startRecord', 'stopRecord',
  					'uploadVoice', 'onVoiceRecordEnd',
  					'playVoice', 'pauseVoice',
  					'downloadVoice',
  					]
  				});

step7：wx.config验证成功后会自动进入wx.ready接口里去，所以我们在ready接口写录音、上传、下载等等的事件

wx.ready(function(){
	wx.startRecord();//开始录音
	wx.stopRecord({	//停止录音
    	success: function (res) {
        	var localId = res.localId;
    	}
	});
	wx.uploadVoice({//上传录音
    	localId: '', // 需要上传的音频的本地ID，由stopRecord接口获得
   	 	isShowProgressTips: 1, // 默认为1，显示进度提示
   		success: function (res) {
        	var serverId = res.serverId; // 返回音频的服务器端ID
    	}
	});
	//等等.....
});

全部代码如下，我是写在jsp页面里面的。

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/6/20
  Time: 10:22
  To change this template use File | Settings | File Templates.
  --%>
  <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  <!DOCTYPE html>
  <html>
  <head>
  	<meta charset="utf-8" />
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>录音发任务</title>
  	<link rel="stylesheet" href="js/bootstrap.css" />
  	<script src="js/jquery-3.4.1.js"></script>
  	<script src="js/bootstrap.js"></script>
  	<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  	<style>
  		button{
  			height: 40px;
  			width: 120px;
  			margin: 25px;
  		}
  		#ul{
  			margin-top: 15px;
  			height: 40px;
  			line-height: 40px;
  			text-align: center;
  			padding: 5px;
  		}
  		#ul li{
  			width: 80%;
  		}
  		#ullist button{
			width:98%;
			height:40px;
			border-radius:5;
			text-align: center;
			margin: 5px;
		}

  	</style>
  </head>
  <body style="background: lightgray;">
  	<div class="container" style="width: 100%;">
  		<div class="row">
  			<ul class="list-unstyled" id="ullist">
  			</ul>
  		</div>
  		<div id="btn" class="navbar-fixed-bottom" style="user-select:none;align-content: center;">
  			<center>
  				<button id="talk_btn" type="button">录音</button>
  				<button id="tijiao" type="button" onclick="uploadVoice();">提交</button></br>
  			</center>
  		</div>
  	</div>
  </body>
  <script>
  	$(document).ready(function() {
  		$.ajax({
  			url: "后台地址",
  			type: 'get',
  			contentType: "application/x-www-form-urlencoded; charset=utf-8",
  			data: {
  				'url': location.href.split('#')[0]
  			},
  			success: function(data) {
  				wx.config({
  					beta: true,
  					debug: false,//开发过程中可以设为true，每一步都会自动提示你是否有错误
  					appId: data.appid,
  					timestamp: data.timestamp,
  					nonceStr: data.nonceStr,
  					signature: data.signature,
  					jsApiList: ['startRecord', 'stopRecord',
  					'uploadVoice', 'onVoiceRecordEnd',
  					'playVoice', 'pauseVoice',
  					'downloadVoice',
  					]
  				});

  				var voice={
  					localId:'',
  					serverId:''
  				}

  				wx.ready(function(){
  					var END;
  					var START;
						$('#talk_btn').on('touchstart', function(event) {
							event.preventDefault();
							START = new Date().getTime();
							recordTimer = setTimeout(function() {
									wx.startRecord({
										success: function() {							
											localStorage.rainAllowRecord = 'true';
										},					
										cancel: function() {
											alert('用户拒绝授权录音');
										}
									});
								});
						});

						//松手结束录音
						$('#talk_btn').on('touchend', function(event) {
							event.preventDefault();
							END = new Date().getTime();
							if ((END - START) < 3000) {
								END = 0;
								START = 0;
								wx.stopRecord({});
								alert('录音时间不能少于3秒');
								return false;
								//小于3000ms，不录音
							} else {
								var myDate = new Date();
								var riqi=myDate.toLocaleDateString(); //获取当前日期
								var mytime=myDate.toLocaleTimeString(); //获取当前时间
								wx.stopRecord({
									success: function(res) {
										voice.localId=res.localId;
								var str="<li audioid='"+voice.localId+"'><button>音频任务"+riqi+mytime+"</button></li>";
										$("#ullist").append(str);//显示到列表
									}
								});
							}

						});		

						//list播放
						$("ul").on("click", "li", function() {
							var id = $(this).attr("audioid");
							wx.playVoice({
								localId: id
							});
						})

						//上传录音
						uploadVoice = function() {
						//调用微信的上传录音接口把本地录音先上传到微信的服务器
							//不过，微信只保留3天，而我们需要长期保存，我们需要把资源从微信服务器下载到自己的服务器
							wx.uploadVoice({
								localId: voice.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
								isShowProgressTips: 1, // 默认为1，显示进度提示
								success: function(res) {
									$.ajax({//上传到服务器
										url :  "后台地址",
										contentType: "application/x-www-form-urlencoded; charset=utf-8",
										type : 'get',
										data : {
											'media_id' : res.serverId,
											'localId'  : voice.localId
										},
										success:function(req) {
											alert("已提交");
										}
									});
								}
							});
						};

					});
  			}	 
  		});
  	});

  </script>
  </html>