实例介绍
【实例简介】
整个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>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论