H5特效模仿微信说话语音代码

最新推荐文章于 2024-07-30 10:19:43 发布

KENYIQ

最新推荐文章于 2024-07-30 10:19:43 发布

阅读量6.3k

点赞数 2

分类专栏： CSSH5技术

CSSH5技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

  <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>

以上代码放到<meta标签下即可

说明，演示一定用浏览器F12的手机页面调试才能看

代码里的图片请百度：html5仿微信语音发送动画特效

个人觉得做H5聊天室语音版的能用到。所以分享！