h5语音聊天audio实战|仿微信语音效果|h5即时聊天系统

最近一段时间不是那么忙，就抽空整理了下之前的项目，因为之前有开发过H5聊天项目，只是觉得好些功能都没有特别的完善，所以就把之前项目重新开发了下，如是就有了这个html5版实时聊天语音项目weChatIM系统。

依旧使用的是h5+css3+jquery+wcPop+swiper+weScroll等技术架构开发，新增了上拉刷新加载数据，右键长按菜单弹窗、仿微信语音效果(按住说话，上滑取消发送)及地图定位功能。

// >>> 【按住说话核心模块】------------------------------------------
// ...按住说话
var _voiceObj = $(".J__wdtVoice"), eY1 = 0, eY2 = 0, eY3 = 0, isDrag = true;
var voiceIdx;
var difftime = 0;
function initVoice(){
    _voiceObj.on("touchstart", function(e){
        difftime = new Date();
        if(!isDrag) return;
        isDrag = false;
        eY1 = e.originalEvent.targetTouches[0].pageY;
        _voiceObj.text("松开 结束");

        // 弹窗提示
        voiceIdx = wcPop({
            id: 'wdtVoice',
            skin: 'toast',
            content: '<div style="margin-top:-10px;"><i class="iconfont icon-yuyin" style="font-size:65px;"></i><div style="line-height:32px;">手指上滑，取消发送</div></div>',
            style: 'border-radius:6px;height: 160px; width:160px;',
            time: 10,
            opacity: 0,
        });

        _voiceObj.on("touchmove", function (e) {
            e.preventDefault();

            eY3 = e.originalEvent.targetTouches[0].pageY;
            if(eY1 - eY3 < 150){
                _voiceObj.text("松开 结束");
            }else{
                _voiceObj.text("松开手指，取消发送");

                // 弹窗提示
                $("#wdtVoice .popui__panel-cnt").html('<div style="margin-top:-10px;"><i class="iconfont icon-quxiao" style="font-size:65px;"></i><div style="background:#c53838; border-radius:3px; line-height:32px;">松开手指，取消发送</div></div>');
            }
        });
    });
    _voiceObj.on("touchend", function (e) {
        e.preventDefault();
        eY2 = e.originalEvent.changedTouches[0].pageY;
        _voiceObj.text("按住 说话");

        // 录音时间太短提示
        if(new Date() - difftime < 1000){
            // 弹窗提示
            $("#wdtVoice .popui__panel-cnt").html('<div style="margin-top:-10px;"><i class="iconfont icon-gantan" style="font-size:65px;"></i><div style="line-height:32px;">录音时间太短！</div></div>');
        } else{
            if (eY1 - eY2 < 150) {
                // 发送成功
                submitData();
                console.log("测试数据");
            } else {
                // 取消发送
                console.log("cancel");
            }
        }
        // 关闭弹窗
        setTimeout(function(){
            wcPop.close(voiceIdx);
        }, 500);
        isDrag = true;
    });
}

// >>> 【摇一摇加好友核心模块】------------------------------------------
// 摇一摇加好友弹窗
$("#J__popScreen_shake").on("click", function () {
    var shakePopIdx = wcPop({
        id: 'wcim_shake_fullscreen',
        skin: 'fullscreen',
        title: '摇一摇',
        content: $("#J__popupTmpl-shakeFriends").html(),
        position: 'right',
        xclose: true,
        style: 'background: #303030;',
        show: function(){
            // 摇一摇功能
            var _shake = new Shake({threshold: 15});
            _shake.start();
            window.addEventListener("shake", function(){
                window.navigator.vibrate && navigator.vibrate(500);
                // console.log("触发摇一摇！");

                $(".J__shakeInfoBox").html("");
                $(".J__shakeLoading").fadeIn(300);
                // 消息模板
                var shakeTpl = [
                    '<div class="shake-info flexbox flex-alignc">\
                        <img class="uimg" src="img/uimg/u__chat-img08.jpg" />\
                        <div class="flex1">\
                            <h2 class="name">大幂幂<i class="iconfont icon-nv c-f37e7d"></i></h2>\
                            <label class="lbl clamp1">开森每一刻，每天都要美美哒！</label>\
                        </div>\
                    </div>'
                ].join("");
                setTimeout(function(){
                    $(".J__shakeLoading").fadeOut(300);
                    $(".J__shakeInfoBox").html(shakeTpl);
                }, 1500);
            }, false);
        }
    });
});
// 切换摇一摇项目
$("body").on("click", ".J__swtShakeItem a", function(){
    $(this).addClass("active").siblings().removeClass("active");
});
// 摇一摇设置
$("body").on("click", ".J__shakeSetting", function(){
    wcPop({
        skin: 'actionsheetMini',
        anim: 'footer',
        btns: [
            { text: '<div class="flexbox flex-alignc"><span class="flex1">是否开启震动</span> <span class="rpr-30"><input class="cp__checkboxPX-switch" type="checkbox" checked /></span></div>' }, 
            { text: '摇到的历史' },
        ]
    });
});

欢迎大家一起交流、学习 Q：282310962 wx：xy190310