来源：so.csdn.net
发布时间：Dec 7, 2020, 3:35:35 PM
原地址：https://blog.csdn.net/qq_42374676/article/details/110791680
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
background: #fff;
}
.btn {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
background: #eee;
}
.btn input {
width: 100%;
height: 100%;
font: 20px/60px 'microsoft yahei';
}
.blackBoxSpeak {
width: 176px;
height: 176px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: url("./ic_record@2x.png") no-repeat 28px 16px/65px 104px,
url("./ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px;
background: rgba(0, 0, 0, .7);
display: none;
border-radius: 12px;
}
.blackBoxSpeakConent {
font: 14.4px '微软雅黑 Light';
position: absolute;
left: 0;
right: 0;
bottom: 12px;
display: block;
text-align: center;
width: 90%;
padding: 8px 0;
margin: auto;
color: #ffffff;
font-weight: 200;
border-radius: 4px;
}
.blackBoxPause {
width: 176px;
height: 176px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: url("./ic_record@2x.png") no-repeat 28px 16px/65px 104px,
url("./ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px;
background: rgba(0, 0, 0, .7);
display: none;
border-radius: 12px;
}
.blackBoxPauseContent {
font: 14.4px '微软雅黑 Light';
position: absolute;
left: 0;
right: 0;
bottom: 12px;
display: block;
text-align: center;
width: 90%;
padding: 8px 0;
margin: auto;
color: #ffffff;
font-weight: 200;
border-radius: 4px;
}
</style>
</head>
<body>
<h3>只支持移动端预览</h3>
<!-- 底部按住说话按钮 -->
<div class="btn">
<input type="button" id="bt_recoding" value="按住 说话">
</div>
<!-- 中间黑框 录音状态 -->
<div class="blackBoxSpeak">
<p class="blackBoxSpeakConent">手指上划，取消发送</p>
</div>
<!-- 中间黑框 暂停状态 -->
<div class="blackBoxPause">
<p class="blackBoxPauseContent" style="background: red">松开手指， 取消发送</p>
</div>
</body>
</html>
<script type="text/javascript">
//录音按钮
var bt_recoding = document.getElementById("bt_recoding");
//中间黑色边框和里面的内容（录音状态）
var blackBoxSpeak = document.querySelector(".blackBoxSpeak");
blackBoxSpeak.style.background = "url('./ic_record@2x.png')no-repeat 28 16px/65px 104px, url('./ic_record_ripple@2x-9.png')no-repeat 111.2px 32px/28.8px 88px";
blackBoxSpeak.style.backgroundColor = "rgba(0,0,0,.7)";
//中间黑色边框和里面的内容（暂停状态）
var blackBoxPause = document.querySelector(".blackBoxPause");
blackBoxPause.style.background = "rgba(0,0,0,.7) url('ic_release_to_cancel@2x.png')no-repeat center 8px/67.2px 104px";
blackBoxPause.style.backgroundColor = "rgba(0,0,0,.7)";
//手指移动相关
var posStart = 0;//初始化起点坐标
var posEnd = 0;//初始化终点坐标
var posMove = 0;//初始化滑动坐标
//轮播相关
var index = [9, 8, 7, 6, 5, 4, 3, 2, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var num = index.length;
var timer = null; //用于清除计时器
//直接开启轮播模式
setTimer();
function initEvent() {
bt_recoding.addEventListener("touchstart", function (event) {
event.preventDefault();//阻止浏览器默认行为
posStart = 0;
posStart = event.touches[0].pageY;//获取起点坐标
//显示录音 隐藏暂停
showBlackBoxSpeak();
});
bt_recoding.addEventListener("touchmove", function (event) {
event.preventDefault();//阻止浏览器默认行为
posMove = event.targetTouches[0].pageY;//获取滑动实时坐标
if (posStart - posMove < 200) {
//隐藏录音 显示暂停
showBlackBoxSpeak();
} else {
//显示录音 隐藏暂停
showBlackBoxPause();
}
});
bt_recoding.addEventListener("touchend", function (event) {
event.preventDefault(); //阻止浏览器默认行为
posEnd = 0;
posEnd = event.changedTouches[0].pageY;//获取终点坐标
//初始化状态
initStatus();
if (posStart - posEnd < 200) {
alert("发送成功");
showBlackBoxNone();
} else {
alert("取消发送");
showBlackBoxNone();
}
});
}
initEvent();
//轮播
function setTimer() {
timer = setInterval(function () {
setTimeout(function () {
num++;
blackBoxSpeak.style.background = "url('./ic_record@2x.png')no-repeat 28px 16px/64px 104px, url('./ic_record_ripple@2x-" + index[num] + ".png')no-repeat 111.2px 32px/28.8px 88px";
blackBoxSpeak.style.backgroundColor = " rgba(0,0,0,.7)";
}, 70);
if (num >= index.length - 1) {
num = 0;
}
}, 70);
}
//初始化状态
var initStatus = function () {
bt_recoding.value = '按住 说话';
//全部隐藏
showBlackBoxNone();
}
//显示录音 隐藏暂停
var showBlackBoxSpeak = function () {
bt_recoding.value = '松开 结束';
blackBoxSpeak.style.display = "block";
blackBoxPause.style.display = "none";
}
//隐藏录音 显示暂停
var showBlackBoxPause = function () {
bt_recoding.value = '松开手指，取消发送';
blackBoxSpeak.style.display = "none";
blackBoxPause.style.display = "block";
}
//隐藏录音
var showBlackBoxNone = function () {
blackBoxSpeak.style.display = "none";
blackBoxPause.style.display = "none";
}
</script>