基本信息
源码名称：微信语音demo(录音并上传)
源码大小：87.21M
文件格式：.rar
开发语言：C#
更新时间：2019-07-13
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：78630559
本次赞助数额为： 2 元×
微信扫码支付：2 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
整个demo，都是调用的微信公众平台的接口来实现..
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="WebApplication9.index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta content="telephone=no" name="format-detection">
<meta content="yes" name="apple-mobile-web-app-capable">
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<style type="text/css">
.voice-remote {
border-radius: 50%;
width: 4rem;
height: 4rem;
overflow: hidden;
position: absolute;
background: #f6f6f6;
bottom: 1.5rem;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
transition: all .2s;
-webkit-transition: all .2s;
}
.voice-remote:active {
width: 4.5rem;
height: 4.5rem;
bottom: 1rem;
border: 1px solid #e7e7e7;
}
.voice-remote:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
top: 0;
left: 0;
border-radius: 50%;
background-image: linear-gradient(-90deg, transparent 50%, #1dc61c 50%);
}
.voice-remote:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: 3;
bottom: 0;
left: 0;
border-radius: 50%;
background-image: linear-gradient(-90deg, transparent 50%, #1dc61c 50%);
}
.voice-remote .cover {
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
z-index: 4;
top: 0;
left: 0;
background-image: linear-gradient(-90deg, transparent 50%, #f6f6f6 50%);
}
.voice-remote .icon {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #f6f6f6 url(../../images/voice.png) no-repeat center center;
background-size: 100%;
border-radius: 50%;
z-index: 5;
}
.voice-remote .icon:active {
width: 80%;
height: 80%;
top: 10%;
left: 10%;
background-size: 100%;
}
.voice-remote:active:before {
-webkit-animation: scoll linear 30s;
animation: scoll linear 30s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.voice-remote:active:after {
-webkit-animation: xscoll linear 60s;
animation: xscoll linear 60s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.voice-remote:active .cover {
-webkit-animation: hide linear 60s;
animation: hide linear 60s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes scoll {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
@keyframes scoll {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
@-webkit-keyframes xscoll {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes xscoll {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes hide {
0% {
opacity: 1
}
49.9% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes hide {
0% {
opacity: 1
}
49.9% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
</style>
<script>
wx.config({
//debug: true,
appId: '<%=JsAppid%>',
timestamp: '<%=Jstimestamp%>',
nonceStr: '<%=JsnonceStr%>',
signature: '<%=Jssignature%>',
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onVoiceRecordEnd',
'playVoice',
'onVoicePlayEnd',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard'
]
});
wx.ready(function () {
/**
config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，
所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，
则可以直接调用，不需要放在ready函数中。
*/
var localIds
var lysj //录音时间
var lyCss //样式
var lyName //图片名字
var localIdArr //本地ID集合字符串
var serverIdArr //服务端ID集合字符串
//注册微信播放录音结束事件【一定要放在wx.ready函数内】
/* wx.onVoicePlayEnd({
success: function (res) {
}
}); */
//假设全局变量已经在外部定义
//按下开始录音
$('#talk_btn').on('touchstart', function (event) {
event.preventDefault();
START = new Date().getTime();
if (localIds != null) {
if (localIdArr == null) {
localIdArr = localIds
} else {
localIdArr = "," localIds;
}
}
localIds = null;
recordTimer = setTimeout(function () {
wx.startRecord({
success: function () {
localStorage.rainAllowRecord = 'true';
wx.onVoiceRecordEnd({
// 录音时间超过一分钟没有停止的时候会执行 complete 回调
complete: function (res) {
END = new Date().getTime();
localIds = res.localId;
alert('最多只能录制一分钟');
}
})
},
cancel: function () {
alert('用户拒绝授权录音');
}
});
}, 300);
});
var yyTotal = 1; //语音数量
//松手结束录音
$('#talk_btn').on('touchend', function (event) {
event.preventDefault();
if (localIds != null) {
} else {
END = new Date().getTime();
}
if ((END - START) < 300) {
END = 0;
START = 0;
//小于300ms，不录音
clearTimeout(recordTimer);
alert("录音时间太短，录音不做保存!")
} else {
$("#voiceButton").show();
lysj = (END - START) / 1000;
if (lysj <= 10) {
lyName = 10;
lyCss = "height: 42px;width: 79px;";
} else if (10 < lysj && lysj <= 20) {
lyName = 20;
lyCss = "height: 42px;width: 129px;";
} else if (20 < lysj && lysj <= 30) {
lyName = 30;
lyCss = "height: 42px;width: 177px;";
} else if (30 < lysj && lysj <= 40) {
lyName = 40;
lyCss = "height: 42px;width: 227px;";
} else if (40 < lysj && lysj <= 50) {
lyName = 50;
lyCss = "height: 42px;width: 277px;";
} else if (50 < lysj && lysj <= 60) {
lyName = 60;
lyCss = "height: 42px;width: 327px;";
} else {
lyName = 60;
lyCss = "height: 42px;width: 327px;";
lysj = "60.00";
}
lysj = "" lysj "";
lysj = lysj.substr(0, lysj.lastIndexOf("."));
wx.stopRecord({
success: function (res) {
if (localIds != null) {
} else {
localIds = res.localId;
}
$("#rwnrVoice").append("<li id='" localIds.substr(localIds.lastIndexOf("/") 1) "' style='text-align: left;'><p id='p" RemoveStr(localIds) "' style='position: absolute;margin-left:36px;margin-top:-32px'>" lysj "s</p>"
"<img id='" localIds "' strt='0' onclick='playVoice(this,this.id," lysj ")' "
"src='images/mes_read.png?v=154' style='" lyCss "'>"
"</li>");
//playVoice(localIds);
uploadVoice(localIds);
},
fail: function (res) {
alert(JSON.stringify(res));
},
});
}
});
//播放语音接口
$('#_playVoice').on('click', function () {
wx.playVoice({
localId: localIds // 需要播放的音频的本地ID，由stopRecord接口获得
});
})
//暂停播放接口
$('#_pauseVoice').on('click', function () {
wx.pauseVoice({
localId: localIds // 需要播放的音频的本地ID，由stopRecord接口获得
});
})
//停止播放接口
$('#_stopVoice').on('click', function () {
wx.stopVoice({
localId: localIds // 需要播放的音频的本地ID，由stopRecord接口获得
});
})
//上传录音
function uploadVoice(localId) {
//调用微信的上传录音接口把本地录音先上传到微信的服务器
//不过，微信只保留3天，而我们需要长期保存，我们需要把资源从微信服务器下载到自己的服务器
wx.uploadVoice({
localId: localId, // 需要上传的音频的本地ID，由stopRecord接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回音频的服务器端ID
$("#serverId").val(serverId);
},
error: function (res) {
alert("上传出错")
}
});
}
//删除语音
/**
删除后把本地录音集合中的最后一段录音id赋予给当前id
**/
$('#_player').on('click', function () {
document.getElementById('audio_player').play();
})
$("#_deleteVoice").on("click", function () {
var name = localIds.substr(localIds.lastIndexOf("/") 1);
$("li#" name).remove();
var temp = localIdArr.substr(localIdArr.lastIndexOf("w"));
if (localIdArr.indexOf(",") != -1) {
localIdArr = localIdArr.replace("," temp, "");
} else {
localIdArr = localIdArr.replace(temp, "");
}
localIds = temp;
yyTotal--;
});
});
var timer;
function RemoveStr(id) {
return id.replace("://", "");
}
function playVoice(obj, id, seconds) {
if ($(obj).attr("strt") == "0") {
$(obj).attr("strt", "1");
$("#p" RemoveStr(id)).hide();
$(obj).attr("src", "images/mes_reading.gif?v=154");
wx.playVoice({
localId: id // 需要播放的音频的本地ID，由stopRecord接口获得
});
timer = setTimeout(function () {
$(obj).attr("strt", "0");
$("#p" RemoveStr(id)).show();
$(obj).attr("src", "images/mes_read.png?v=154");
}, seconds * 1000);
} else {
clearTimeout(timer);
$(obj).attr("strt", "0");
$("#p" RemoveStr(id)).show();
$(obj).attr("src", "images/mes_read.png?v=154");
wx.stopVoice({
localId: id // 需要播放的音频的本地ID，由stopRecord接口获得
});
}
}
$(document).ready(function () {
//$("#audio_player").attr("src", data.Message);
//$("#_player").on("click", function () {
// document.getElementById('audio_player').play();
//});
//上传录音接口
$('#_uploadVoice').on('click', function () {
var serverId = $("#serverId").val();
if (serverId != null && serverId != "") {
var result = confirm("确定上传所有录音吗？");
if (result == true) {
//只有一段录音直接上传
$.post("API/UploadVoiceAPI.ashx", "mediaId=" serverId, function (data) {
//上传后不可用
//$("#_uploadVoice").attr("disabled", "disabled");
//上传后不可返回普通任务
//$("#inputText").attr("disabled", "disabled")
if (data.Success) {
//alert(data.Message);
if ($("#audio_player").find("source")[0] != null) {
$($("#audio_player").find("source")[0]).attr("src", data.Message);
$("#_player").show();
}
}
isUploadVoice = true;
});
} else {
}
} else {
alert("请先录音哦！");
}
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField ID="serverId" runat="server" />
<div class="content">
<ul id="rwnrVoice">
</ul>
<div class="form-group text-center">
<button id="_playVoice" type="button" class="btn btn-primary btn-hight">
<h2>播放录音</h2>
</button>
</div>
<div class="form-group text-center">
<button id="_pauseVoice" type="button" class="btn btn-warning btn-hight">
<h2>暂停播放</h2>
</button>
</div>
<div class="form-group text-center">
<button id="_stopVoice" type="button" class="btn btn-success btn-hight">
<h2>停止播放</h2>
</button>
</div>
<div class="form-group text-center">
<button id="_uploadVoice" type="button" class="btn btn-info btn-hight">
<h2>上传录音</h2>
</button>
</div>
<div class="form-group text-center">
<button id="_player" type="button" style="display: none;" class="btn btn-info btn-hight">
<h2>播放上传</h2>
</button>
<audio id="audio_player">
<source type="audio/mpeg">
</audio>
</div>
<div class="voice-remote" id="talk_btn">
<span class="cover"></span>
<span class="icon"></span>
</div>
</div>
</form>
</body>
</html>