热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

HTML5实现微信jssdk录音播放语音的实例

HTML5微信jssdk录音播放语音的方法需要注意的2个问题1就是一定要判断1秒内录音都不算ps:太短不能录音2录音超过1分钟会发现正在录音突然消失所以要写wx.onVoiceRecordEnd这个是是1分钟会自动出发然后写上传数据。
HTML5微信jssdk录音播放语音的方法 需要注意的2个问题 1 就是一定要判断1秒内 录音都不算 ps:太短不能录音 2 录音超过1分钟 会发现正在录音突然消失 所以要写wx.onVoiceRecordEnd 这个是是1分钟会自动出发 然后写上传数据。

前端代码如下
 $('.luyin').on('touchstart',function () {
        wx.startRecord({
            success: function(){
                START = new Date().getTime();
                wx.onVoiceRecordEnd({
                    // 录音时间超过一分钟没有停止的时候会执行 complete 回调
                    complete: function (res) {
                        alert('最多只能录制一分钟');
                        var localId = res.localId;
                        uploadluyin(localId,60000);
                    }
                });
            },
            cancel: function () {
                alert('用户拒绝授权录音');
                return false;
            }
        });

    })
    $('.luyin').on('touchend',function () {
        END = new Date().getTime();
        //录音时间
        luyintime=END - START;
        if(luyintime <2000){
            END = 0;
            START = 0;
            wx.stopRecord({});
            alert(&#39;录音时间不能少于2秒&#39;);
            return false;
            //小于300ms,不录音
        }else {


            wx.stopRecord({
                success: function (res) {
                    localId = res.localId;

                    uploadluyin(localId,luyintime);

                }
            });
        }
    })
    
    function uploadluyin(localId,luyintime) {
        wx.uploadVoice({
            localId: localId, // 需要上传的音频的本地ID,由stopRecord接口获得
            isShowProgressTips: 1, // 默认为1,显示进度提示
            success: function (res) {
                var serverId = res.serverId; // 返回音频的服务器端ID
                console.log(serverId);

                $.post("/home/xishanluyin/scyuyin", {
                            "serverId": serverId,
                            "luyintime": luyintime
                        },
                        function (data) {
                            if (data.success == 1) {
                                alert(&#39;录音成功&#39;);
                            } else {
                                alert(data.msg);
                            }
                        }, "json");
            }
        })
    }

后端代码 核心代码如下直接写入mp3就行

$ft = copy("http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$accessToken}&media_id={$imgServerId}",
			APP_PATH . "/../Public/{$project}/upload/{$imgServerId}.mp3");

然后用暴风影音播放

推荐阅读
  • 微信小程序支付官方参数小程序中代码后端发起支付代码支付回调官方参数文档地址:https:developers.weixin.qq.comminiprogramdeva ... [详细]
  • 现在的新手程序猿,动不动就是框架,就连外面培训的也是框架,我就问一句,没了框架是不是就啥也不会了 ... [详细]
  • 实现Win10与Linux服务器的SSH无密码登录
    本文介绍了如何在Windows 10环境下使用Git工具,通过配置SSH密钥对,实现与Linux服务器的无密码登录。主要步骤包括生成本地公钥、上传至服务器以及配置服务器端的信任关系。 ... [详细]
  • PHP中Smarty模板引擎自定义函数详解
    本文详细介绍了如何在PHP的Smarty模板引擎中自定义函数,并通过具体示例演示了这些函数的使用方法和应用场景。适合PHP后端开发者学习。 ... [详细]
  • 调试利器SSH隧道
    在开发微信公众号或小程序的时候,由于微信平台规则的限制,部分接口需要通过线上域名才能正常访问。但我们一般都会在本地开发,因为这能快速的看到 ... [详细]
  • 本文详细介绍了如何在ARM架构的目标设备上部署SSH服务端,包括必要的软件包下载、交叉编译过程以及最终的服务配置与测试。适合嵌入式开发人员和系统集成工程师参考。 ... [详细]
  • 本文详细介绍了Python的multiprocessing模块,该模块不仅支持本地并发操作,还支持远程操作。通过使用multiprocessing模块,开发者可以利用多核处理器的优势,提高程序的执行效率。 ... [详细]
  • Web网络基础
    目录儿1使用HTTP协议访问Web2HTTP的诞生2.1因特网的起源2.2互联网、因特网与万维网2.3万维网与HTTP3网络基础TCPIP3.1TCPIP协议族3.2TCPIP的分 ... [详细]
  • J2EE平台集成了多种服务、API和协议,旨在支持基于Web的多层应用开发。本文将详细介绍J2EE平台中的13项关键技术规范,涵盖从数据库连接到事务处理等多个方面。 ... [详细]
  • 基于Python的微信智能自动回复系统构建
    本文详细介绍如何通过Python编程语言,结合itchat库及青云客智能语音API,构建一个能够自动响应用户消息的微信聊天机器人。主要内容包括环境配置、API对接以及代码实现。 ... [详细]
  • 择要:Fundebug的JavaScript毛病监控插件同步支撑Vue.js异步毛病监控。Vue.js从降生至今已5年,尤大在本年2月份宣布了严重更新,即Vue2.6。更新包含新增 ... [详细]
  • 深入浅出:Hadoop架构详解
    Hadoop作为大数据处理的核心技术,包含了一系列组件如HDFS(分布式文件系统)、YARN(资源管理框架)和MapReduce(并行计算模型)。本文将通过实例解析Hadoop的工作原理及其优势。 ... [详细]
  • 在日常运维中,频繁地对多台Linux服务器进行用户管理是一项耗时的任务。为了提高效率,可以通过编写Expect脚本来实现远程自动化操作,从而简化这一过程。 ... [详细]
  • 本文探讨了使用Python实现监控信息收集的方法,涵盖从基础的日志记录到复杂的系统运维解决方案,旨在帮助开发者和运维人员提升工作效率。 ... [详细]
  • 在 Ubuntu 22.04 LTS 上部署 Jira 敏捷项目管理工具
    Jira 敏捷项目管理工具专为软件开发团队设计,旨在以高效、有序的方式管理项目、问题和任务。该工具提供了灵活且可定制的工作流程,能够根据项目需求进行调整。本文将详细介绍如何在 Ubuntu 22.04 LTS 上安装和配置 Jira。 ... [详细]
author-avatar
手机用户2502877197
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有