移动端h5仿微信语音功能

最新推荐文章于 2023-08-14 08:15:25 发布
最新推荐文章于 2023-08-14 08:15:25 发布
阅读量1.2k 收藏 4
点赞数 4
分类专栏： js+jq html5+css3 移动端rem布局 文章标签： javascript jquery html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37103514/article/details/116792972
版权

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=iso-8859-1">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/recorder.mp3.min.js"></script><!--插件地址:https://github.com/xiangyuecn/Recorder-->
    <script>
        //rem
        (function(doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function() {
                    var clientWidth = docEl.clientWidth;
                    if(!clientWidth) return;
                    if(clientWidth >= 750) {
                        docEl.style.fontSize = '100px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                    }
                };
            if(!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
    <style>
        *{margin: 0;padding: 0;}
        input{outline: none;}
        .press_box{
            position: fixed;
            top: 50%;
            left: 50%;
            transform:translate(-50%,-50%);
            -webkit-transform:translate(-50%,-50%);
            -moz-transform:translate(-50%,-50%);
            -ms-transform:translate(-50%,-50%);
            width: 2.5rem;
            height: 2.5rem;
            background: rgba(0,0,0,0.5);
            text-align: center;
            display: none;
        }
        .press_box2{
            position: fixed;
            top: 50%;
            left: 50%;
            transform:translate(-50%,-50%);
            -webkit-transform:translate(-50%,-50%);
            -moz-transform:translate(-50%,-50%);
            -ms-transform:translate(-50%,-50%);
            width: 2.5rem;
            height: 2.5rem;
            background: rgba(0,0,0,0.5);
            text-align: center;
            display: none;
        }
        .press_box3{
            position: fixed;
            top: 50%;
            left: 50%;
            transform:translate(-50%,-50%);
            -webkit-transform:translate(-50%,-50%);
            -moz-transform:translate(-50%,-50%);
            -ms-transform:translate(-50%,-50%);
            width: 2.5rem;
            height: 2.5rem;
            background: rgba(0,0,0,0.5);
            text-align: center;
            display: none;
        }
        .press_text3{
            color: white;
            font-size: 1rem;
            line-height: 1rem;
            margin-top: 0.5rem;
        }
        .press_text4{
            color: white;
            font-size: 0.24rem;
            margin-top: 0.3rem;
        }
        .press_main2{
            display: none;
        }
        .press_voice{
            width: 1.28rem;
            height: 1.28rem;
            display: block;
            margin-top: 0.4rem;
            margin-left: 0.2rem;
        }
        .press_voice2{
            width: 1.28rem;
            height: 1.28rem;
            display: block;
            margin: auto;
            margin-top: 0.4rem;
        }
        .press_text{
            color: white;
            font-size: 0.24rem;
            margin-top: 0.3rem;
        }
        .press_text2{
            color: white;
            font-size: 0.24rem;
            margin-top: 0.3rem;
        }
        .recpowerx{
            width: 0.4rem;
            height:0.1rem;
            max-height: 1.28rem;
            min-height: 0.1rem;
            background:white;
            position:absolute;
            right: 0.5rem;
            bottom: 0.83rem;
        }
        .add_yuyin .r_yuyin b.bofang {
            background: url(images/mobile/yuyin.png) no-repeat -.17rem -.1rem;
            -webkit-animation: bofang 1s steps(1,start) infinite;
            background-size: 1.9rem .49rem;
        }
        .add_yuyin .r_yuyin b {
            width: .27rem;
            height: .32rem;
            position: absolute;
            right: .2rem;
            top: .24rem;
            background: url(images/mobile/icon.png) no-repeat -7.14rem -3.65rem;
            background-size: 14.57rem 4.86rem;
            transform:rotate(180deg);

        }
        /** 播放录音的动画效果 **/
        @-webkit-keyframes bofang{
            25% {
                background-position:-.17rem -.1rem;
            }
            50% {
                background-position:-.66rem -.11rem;
            }
            75% {
                background-position:-1.1rem -.1rem;
            }
            100% {
                background-position:-1.51rem -.1rem;
            }
        }
        @keyframes bofang{
            25% {
                background-position:-.17rem -.1rem;
            }
            50% {
                background-position:-.66rem -.11rem;
            }
            75% {
                background-position:-1.1rem -.1rem;
            }
            100% {
                background-position:-1.51rem -.1rem;
            }
        }
        .foot_nav {
            position: fixed;
            left: 0;
            width: 100%;
            bottom: 0;
            border-top: 0.01rem solid #E6EAEF;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .foot_navMain {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -ms-flex-align: center;
            -webkit-box-align: center;
            box-align: center;
            -webkit-align-items: center;
            align-items: center;
            padding: 0 0.2rem;
            height: 1rem;
            background: #ffffff;
        }
        .foot_navLi {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 0;
            width: 0.8rem;
            height: 0.8rem;
            line-height: 0.8rem;
            text-align: center;
        }
        .foot_navLIcon {
            width: 0.48rem;
            height: 0.48rem;
        }
        .foot_navInpBox {
            background: #F4F4F4;
            border-radius: 0.4rem;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            padding: 0 0.3rem;
            background: none;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .foot_navInput {
            border-radius: 0.4rem;
            background: #F4F4F4;
            padding-left: 0.3rem;
            box-sizing: border-box;
            height: 0.6rem;
            line-height: 0.6rem;
            width: 100%;
        }
        .foot_talk {
            height: 0.6rem;
            line-height: 0.6rem;
            width: 100%;
            background: white;
            border-radius: 0.4rem;
            border: 1px solid #3D4A5E;
            display: none;
        }
        .send {
            color: white;
            background: #87CEFA;
            width: 0.9rem;
            height: 0.6rem;
            line-height: 0.6rem;
            border-radius: 0.4rem;
            text-align: center;
            font-size: 0.24rem;
        }
        .r_yuyin {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            margin-top: 0.3rem;
            align-items: flex-start;
            justify-content: flex-end;
            padding-left: 1rem;
        }
        .us_box {
            display: flex;
            justify-content: flex-end;
            width: auto;
            max-width: 60%;
            min-width: 25%;
            margin-right: 0.3rem;
            background: #87CEFA;
            color: #ffffff;
            position: relative;
            border-radius: 0.1rem;
            min-height: 0.8rem;
            height: 0.8rem;
        }
        .us_box:before {
            position: absolute;
            content: "";
            display: block;
            border-width: 0.16rem;
            top: 0.2rem;
            right: -0.32rem;
            border-style: dashed solid solid dashed;
            border-color: transparent transparent transparent #87CEFA;
        }
        .audio_time {
            font-size: 0.24rem;
            line-height: 0.8rem;
            position: absolute;
            left: 0.25rem;
        }
        .us_msgImg {
            width: 1rem;
            height: 1rem;
        }
        .us_img {
            width: 100%;
            display: block;
            border-radius: 100%;
        }
    </style>
</head>
<body>
<!--音频-->
<div class="add_yuyin" id="add_yuyin">

</div>
<!--事件-->
<div class="foot_nav">
    <ul class="foot_navMain">
        <li class="foot_navLi" onclick="recOpen()"><img class="foot_navLIcon js_voice" src="images/mobile/icon_voice1.png" alt=""></li>
        <li class="foot_navInpBox">
            <input class="foot_navInput" type="text" value="" placeholder="请输入您要咨询的问题">
            <button id="recStart" class="foot_talk">按住&nbsp;说话</button>
        </li>
        <li class="foot_navLi send">发送</li>
    </ul>
</div>
<!--按下说话-->
<div class="press_box">
    <div class="press_main">
        <img class="press_voice" src="images/mobile/icon_voice2.png" alt="">
        <div class="recpowerx"></div>
    </div>
    <div class="press_main2">
        <img class="press_voice2" src="images/mobile/icon_cancel.png" alt="">
    </div>
    <p class="press_text">手指上划,取消发送</p>
</div>
<div class="press_box2">
    <div class="press_main3">
        <img class="press_voice2" src="images/mobile/icon_hint.png" alt="">
    </div>
    <p class="press_text2">说话时间太短</p>
</div>
<div class="press_box3">
    <p class="press_text3">10</p>
    <p class="press_text4">手指上划,取消发送</p>
</div>
</body>
<script>
    $(function(){
        //点击语音
        $('.js_voice').click(function () {
            $('.js_mainMenu').removeClass('foot_mainMenu');
            $('.js_mainMenu').removeClass('foot_boxMenu');
            if ($(this).attr('src')==='images/mobile/icon_voice1.png'){
                $(this).attr('src','images/mobile/icon_key.png')
            } else {
                $(this).attr('src','images/mobile/icon_voice1.png')
            }
            if($('.foot_navInput').is(':hidden')){//如果当前隐藏
                $('.foot_navInput').show();//那么就显示div
                $('.foot_talk').hide()
            }else{
                $('.foot_navInput').hide();//否则就隐藏div
                $('.foot_talk').show()
            }

        })
        //点击发送
        $('.send').click(function () {
            $('.foot_navInput').val("")
        })

    })

    var rec;
    /**调用open打开录音请求好录音权限**/
    var recOpen=function(success){//一般在显示出录音按钮或相关的录音界面时进行此方法调用，后面用户点击开始录音时就能畅通无阻了
        rec=Recorder({
            type:"mp3",sampleRate:16000,bitRate:16 //mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎
            ,onProcess:function(buffers,powerLevel){
                $(".recpowerx").css("height",powerLevel+"%");
            }
        });
        rec.open(function(){//打开麦克风授权获得相关资源
            success&&success();
        },function(msg,isUserNotAllow){//用户拒绝未授权或不支持
            alert((isUserNotAllow?"UserNotAllow，":"")+"无法录音:"+msg);
            $('.js_voice').attr('src','images/mobile/icon_voice1.png')
            $('.foot_navInput').show();
            $('.foot_talk').hide()
        });
    };

    /**开始录音**/
    var timer1 = null
    var timer2 = null
    $('#recStart').on('touchstart',function () {
        $(this).text('松开 结束')
        $('.press_box').show()
        rec.start();
        $('.press_text4').html('手指上划,取消发送')
        //说话时间已到60s
        var num = 9
        timer1 = setTimeout(function () {
            $('.press_box3').show()
            $('.press_box').hide()
            $('.press_box2').hide()
            timer2 = setInterval(function () {
                if(num==0){
                    clearInterval(timer2);
                    console.log('时间到')
                    $('.press_text4').html('说话时间已到60s')
                    setTimeout(function () {
                        $('.press_box3').hide()

                    },1000)
                    rec.stop(function(blob,duration){
                        console.log(blob,(window.URL||webkitURL).createObjectURL(blob),"时长111:"+duration+"ms");
                        var audio = (window.URL||webkitURL).createObjectURL(blob)
                        var time = Math.round(duration/1000)
                        var str = '<div class="r_yuyin">' +
                            '<div class="us_box">' +
                            '<span class="audio_time"></span>' +
                            '<audio id="audioTime" class="audio" src="'+audio+'"></audio>' +
                            '<b></b>' +
                            '</div>'+
                            '<div class="us_msgImg">'+
                            '<img src="images/tx02.jpg" class="us_img">'+
                            '</div>'+
                            '</div>'
                        $('#add_yuyin').append(str)
                        $('#add_yuyin .r_yuyin:last-child span').html(time+' ″')
                        $('#add_yuyin .r_yuyin:last-child .us_box').css("width",time+24+'%')
                    })
                }else {
                    $('.press_text3').html(num)
                    num--
                }
            },1000)
        },50000);
    })


    /**上划取消**/
    var btnElem=document.getElementById("recStart");//获取ID
    var posStart = 0;//初始化起点坐标
    var posEnd = 0;//初始化终点坐标
    var posMove = 0;//初始化终点坐标
    btnElem.addEventListener("touchstart", function(event) {
        event.preventDefault();//阻止浏览器默认行为
        posStart = 0;
        posStart = event.touches[0].pageY;//获取起点坐标
    });
    btnElem.addEventListener("touchmove", function(event) {
        event.preventDefault();
        posMove = 0;
        posMove = event.changedTouches[0].pageY;//获取终点坐标
        if(posStart - posMove > 20 ){
            $('.press_text').text('松开手指，取消发送')
            $('.press_main').hide()
            $('.press_main2').show()
        }else {
            $('.press_text').text('手指上划，取消发送')
            $('.press_main').show()
            $('.press_main2').hide()
        }
    });
    /**结束录音**/
    $('#recStart').on('touchend',function (event) {
        clearTimeout(timer1);
        clearInterval(timer2);
        $('.press_text3').html(10)
        $('.press_box3').hide()
        $(this).text('按住 说话')
        $('.press_box').hide()
        $('.press_text').text('手指上划，取消发送')
        $('.press_main').show()
        $('.press_main2').hide()
        event.preventDefault();
        posEnd = 0;
        posEnd = event.changedTouches[0].pageY;//获取终点坐标
        rec.stop(function(blob,duration){
            console.log(blob,(window.URL||webkitURL).createObjectURL(blob),"时长:"+duration+"ms");
            //播放上传
            var audio = (window.URL||webkitURL).createObjectURL(blob)
            var time = Math.round(duration/1000)
            var str = '<div class="r_yuyin">' +
                '<div class="us_box">' +
                '<span class="audio_time"></span>' +
                '<audio id="audioTime" class="audio" src="'+audio+'"></audio>' +
                '<b></b>' +
                '</div>'+
                '<div class="us_msgImg">'+
                '<img src="images/tx02.jpg" class="us_img">'+
                '</div>'+
                '</div>'
            $('#add_yuyin').append(str)
            $('#add_yuyin .r_yuyin:last-child span').html(time+' ″')
            $('#add_yuyin .r_yuyin:last-child .us_box').css("width",time+24+'%')
            //取消发送
            if (posStart - posEnd > 20) {
                if($('#add_yuyin .r_yuyin').length===1){
                    $('#add_yuyin .r_yuyin').remove()
                }else {
                    $('#add_yuyin .r_yuyin:last-child').remove()
                }
            }
            //说话时间太短
            if(duration < 500){
                $('.press_box').hide()
                $('.press_box2').show()
                if($('#add_yuyin .r_yuyin').length===1){
                    $('#add_yuyin .r_yuyin').remove()
                }else {
                    $('#add_yuyin .r_yuyin:last-child').remove()
                }
                setTimeout(function () {
                    $('.press_box2').hide()
                },500)
            }
            var TestApi="/test_request";
            var api=TestApi;
            /***方式一：将blob文件转成base64纯文本编码，使用普通application/x-www-form-urlencoded表单上传***/
            var reader=new FileReader();
            reader.onloadend=function(){
                $.ajax({
                    url:api //上传接口地址
                    ,type:"POST"
                    ,data:{
                        mime:blob.type //告诉后端，这个录音是什么格式的，可能前后端都固定的mp3可以不用写
                        ,upfile_b64:(/.+;\s*base64\s*,\s*(.+)$/i.exec(reader.result)||[])[1] //录音文件内容，后端进行base64解码成二进制
                        //...其他表单参数
                    }
                    ,success:function(v){
                        console.log("上传成功",v);
                    }
                    ,error:function(s){
                        console.error("上传失败",s);
                    }
                });
            };
            reader.readAsDataURL(blob);
            //方法二
            // var form=new FormData();
//             form.append("upfile",blob,"recorder.mp3"); //和普通form表单并无二致，后端接收到upfile参数的文件，文件名为recorder.mp3
// //...其他表单参数
//             $.ajax({
//                 url:api //上传接口地址
//                 ,type:"POST"
//                 ,contentType:false //让xhr自动处理Content-Type header，multipart/form-data需要生成随机的boundary
//                 ,processData:false //不要处理data，让xhr自动处理
//                 ,data:form
//                 ,success:function(v){
//                     console.log("上传成功",v);
//                 }
//                 ,error:function(s){
//                     console.error("上传失败",s);
//                 }
//             });
        },function(msg){
            if(msg){
                console.log("录音失败:"+msg);
            }else{
                $('.press_box').hide()
                $('.press_box2').show()
                setTimeout(function () {
                    $('.press_box2').hide()
                },500)
            }
        });
    })
    //录音播放
    $(".add_yuyin").on("click",'.r_yuyin',function () {
        let audios = $(this).find("audio")[0];
        if (audios.paused) {
            audios.play()
            $(this).find("b").addClass("bofang");
        }else {
            audios.load()
            $(this).find("b").removeClass("bofang");
        }
        // 多个语音切换
        if($(this).siblings().length>0){
            $(this).siblings().find("audio")[0].load();
            $(this).siblings().find("b").removeClass("bofang");
        }
        //语音结束动画停止
        let _this = $(this)
        audios.addEventListener('ended', function () {
            _this.find('b').removeClass("bofang");
        }, false);
    })
</script>
</html>
金翅
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5仿微信发送语音消息,H5特效模仿微信说话语音代码
weixin_28792813的博客
06-01 1703
* {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'...
html5仿微信聊天语音发送话筒录音动画特效.7z
12-02
html5制作手机微信聊天语音发送话筒录音动画效果。手指按住说话，松开结束语音发送特效。内含源码及图片素材
前端调用麦克风获取实时音频流和录音并上传至后台
05-11
文件分为两个，一个是实时获取音频流的文件，另一个是录音并上传至后台的文件，建议都在服务器环境下打开，这两天从网上整理的，希望对大家有所启发。
html仿微信语音功能案例,html5聊天案例|趣聊h5|仿微信界面聊天|红包|语音聊天|地图...
weixin_28916013的博客
05-30 649
之前有开发过一个h5微直播项目，当时里面也用到过聊天模块部分，今天就在之前聊天部分的基础上重新抽离模块，开发了这个h5趣聊项目，功能效果比较类似微信聊天界面。采用html5+css3+Zepto+swiper+wcPop+flex等技术融合开发，实现了发送消息、表情(动图)，图片、视频预览，添加好友/群聊，右键长按菜单。另外新增了语音模块、地图定位模块。整体功能界面效果比较接近微信聊天。项目运行效...
Html5多媒体实现微信语音功能
delishcomcn的博客
08-14 604
，机会留给有准备的人。接下来就是，一按按钮就生米煮成熟饭了，对应录音机就是录完了按按钮就播放了，但是在我们程序里面要想播放你不仅要有磁带，还得有录音机，录音机就是audio标签，没有好办，我们new一个。html5 多媒体里面的语音这块换了好几茬规范，很乱，有些标签甚至一个浏览器都没实现过，未曾绽放就枯萎了，你也不用关心也没必要浪费那个时间知道，你只要知道我说这些就够了，因为你知道那些被废掉的过往没啥用，有那个时间还不如来一局LOL或者王者荣耀（虽然我并不懂二者的区别，不过这两个游戏应该都挺好玩吧）。
android h5语音输入,HTML5实现网页端语音输入语义理解（speex压缩）
weixin_33365214的博客
05-27 121
H5特效模仿微信说话语音代码
web修理工
12-07 1353
<style type="text/css"> * { margin: 0; padding: 0; } html, body { background: #fff; } .btn { position: fixed; bottom: 0;
html5 post图片二维码信息到后台_HTML5仿微信按住语音发送代码
weixin_35480435的博客
12-05 196
码农那点事儿关注我们，一起学习进步HTML5仿微信按住语音发送代码是一款手机端微信聊天语音发送话筒录音动画效果。手指按住说话，松开结束语音发送特效。HTML5仿微信按住语音发送代码是一款手机端微信聊天语音发送话筒录音动画效果。手指按住说话，松开结束语音发送特效。HTML5仿微信按住语音发送代码是一款手机端微信聊天语音发送话筒录音动画效果。手指按住说话，松开结束语音发送特效。HTML5仿...
【HTML5】------- JavaScript 实现网页版HTML5发送语音功能
皮皮冰要做大神
06-17 8785
1.浏览器实现HTML5发送语音功能(转载处:https://www.xuanmo.xin/details/1784) 这是一次后台同事让做的一个功能，但是在手机端兼容不好，Safari清一色不支持，导致后来没有用上，想看效果的伙伴可以用pc端浏览器打开模拟手机的功能查看，查看demo链接移步文章尾部。 也是借助插件实现的，插件主要做了AudioContext的一些封装...
html5仿微信聊天语音发送话筒录音动画特效.zip
12-18
html5制作手机微信聊天语音发送话筒录音动画效果。手指按住说话，松开结束语音发送特效。内含源码及图片素材
h5移动端调用支付宝、微信支付的实现
08-30
解决在公众号中调起支付宝支付跳转浏览器的问题。使用方法：將ap.js 和pay.html引入到项目中，将需要跳转的支付宝支付地址传入pay.html中的code_url即可
H5仿微信界面教程(一)
09-28
主要为大家详细介绍了H5仿微信界面教程的第一篇，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用Html5多媒体实现微信语音功能
01-19
随着微信等社交App的兴起，语音聊天成为很多App必备功能，大到将语音聊天作为主要功能的社交App，小到电商App的语音客服、店小二功能，语音聊天成为了必不可少的方式。 但是很多人感觉网页端语音离我们很遥远，这些...
H5仿微信支付数字键盘.zip
04-25
html5+css3界面设计，仿微信支付设计数字键盘，源码下载对应文章【H5仿微信支付数字键盘】欢迎下载
Android利用MedioRecorder使用仿微信语音录音以及播放（总结）
lpCrazyBoy的博客
09-30 3018
今天模仿着微信的发送语音功能做了一下，现将步骤以及其中遇到的问题记录一下，以便以后查看。 实现功能：1、录制语音并显示到列表中；2、点击列表中的语音自动进行播放；3、录制语音时以及播放语音时的动画效果显示。 最终界面效果如下： 现在说一下大致的步骤： 一、布局样式 1、拉界面。很简单，上面一个ListView或者RecyclerView用来显示语音列表，下面用线性布局做一下。 ...
html5语音即时聊天|仿微信语音效果|表情|定位
热门推荐
码农ICoding
03-24 1万+
h5+css3语音实时聊天系统|仿微信语音聊天|js音频录制|仿微信地图定位 基于html5开发的仿微信语音聊天系统weChatIM项目，采用了h5+css3+jQuery+swiper+wcPop+mescroll等技术选型开发，实现了下拉刷新消息，发送信息、表情，预览大图、视频，红包、语音、地图定位等新增功能。 ◆meScroll下拉刷新消息 /* * 下拉刷新、上拉加...
微信公众号开发+H5页面语音录入+下载+amr转换为MP3+讯飞语音转文字
lxyang0211的博客
03-29 3379
其实作为H5想要做语音识别，自认为还说有各种弊端得，同时还是微信公众号里面，如果小程序得话，或许会简单一点，但是这里是在公众号里面开发，在这个过程中查阅个各种资料，其实里面得东西都大同小异，但是大多数并不全， 首先微信公众号里面得H5开发语音录入，试过各种方法，由于是java渣渣，页面技术只是了解简单得，因此在使用标签得时候，本身并不能适用于当前得需求，因此最后只能选择了微信自带得录音功能，使用...
html5 微信播放语音,html5的audio实现高仿微信语音播放效果
weixin_29028611的博客
05-30 925
前言之前做过一个微信的项目，专家回复可以录音，然后储存成mp3格式，前台可以获取mp3，客户可以在线试听mp3录音效果，今天就简单分享一下这个效果如何实现，及实现思路和方法！效果图前台大体呈现效果图如下：点击就可以播放mp3格式的录音。点击另外一个录音，当前录音停止！思路关于播放动画，这个很简单，我们可以用css3的逐帧动画来实现。关于逐帧动画，我之前的文章也写过：http://www.haoro...
移动端h5 调用微信支付
最新发布
09-12
移动端H5调用微信支付是指在手机上运行的网页应用使用微信支付进行支付交易。移动端H5通常是通过微信内置的浏览器或者第三方浏览器打开的网页应用。要实现移动端H5调用微信支付，需要进行以下步骤： 首先，开发人员需要在微信公众平台上注册并申请一个微信支付商户号。商户号是与微信支付相关联的唯一标识符。 接下来，开发人员需要在移动端H5的网页应用中引入微信支付的JSAPI。微信支付提供了一组JavaScript API，开发人员可以通过这些API来实现支付功能。 在用户点击支付按钮时，网页应用需要调用微信支付的统一下单API，向微信服务器发送支付请求。支付请求需要包括商户号、订单号、支付金额、用户的openid等必要信息。 微信服务器收到支付请求后，会返回一个prepay_id给移动端H5的网页应用。网页应用可以将这个prepay_id传递给微信支付的JSAPI，用于发起支付。 在调用微信支付的JSAPI时，需要传递一些必要的参数，如appId、timeStamp、nonceStr和签名等。这些参数是为了验证支付请求的合法性，并确保支付过程的安全性。 最后，用户确认支付后，网页应用会调用微信支付的JSAPI发起支付。微信支付会弹出一个支付窗口，用户可以在该窗口中输入支付密码完成支付。 支付过程结束后，微信服务器会将支付结果通知给网页应用。网页应用可以根据支付结果进行相应的处理，如提示用户支付成功或失败，并进行相应的操作。 总之，移动端H5调用微信支付需要开发人员在网页应用中引入微信支付的JSAPI，并按照微信支付的流程进行相应的调用和处理，以实现支付功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值