H5使用企业微信jssdk录音、上传、下载、播放
企业微信上使用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" %>
<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="+riqi+mytime+"";
$("#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>
效果如下按紧录音即上面会提示录音中，这是默认的，你可以自己找找好看的插件换上去，图2点击不同任务播放
| 图1 | 图2 |
|---|---|
 |
 |