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

微信开发之录音功能

.需求描述在微信浏览器内打开的页面,制作一个按钮,用户按住按钮后开始录音,松手后停止录音并将录音上传并长期保存。1.开发流程如果开发的是普通的展示性页面,就和开发普通的页面没有区别,不过这里要用到设备(手机)的录音功能,就需要调用微信app的录音接口,需要使用微信jssdk。使用微信jssdk:微信JS-SDK说明文档
微信jssdk录音功能开发记录

标签(空格分隔): 前端


0.需求描述

在微信浏览器内打开的页面,制作一个按钮,用户按住按钮后开始录音,松手后停止录音并将录音上传并长期保存。


1.开发流程

如果开发的是普通的展示性页面,就和开发普通的页面没有区别,不过这里要用到设备(手机)的录音功能,就需要调用微信app的录音接口,需要使用微信jssdk。

使用微信jssdk:微信JS-SDK说明文档

  • 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。[需要有微信公众号]

  • 引入JS文件

  • 通过config接口注入权限验证配置

  • 通过ready接口处理成功验证

  • 通过error接口处理失败验证

//假设已引入微信jssdk。【支持使用 AMD/CMD 标准模块加载方法加载】
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

wx.ready(function(){

    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});

wx.error(function(res){

    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。

});

本次需求核心功能:录音并保存

//假设全局变量已经在外部定义
//按下开始录音
$('#talk_btn').on('touchstart', function(event){
    event.preventDefault();
    START = new Date().getTime();

    recordTimer = setTimeout(function(){
        wx.startRecord({
            success: function(){
                localStorage.rainAllowRecord = 'true';
            },
            cancel: function () {
                alert('用户拒绝授权录音');
            }
        });
    },300);
});
//松手结束录音
$('#talk_btn').on('touchend', function(event){
    event.preventDefault();
    END = new Date().getTime();
    
    if((END - START) <300){
        END = 0;
        START = 0;
        //小于300ms,不录音
        clearTimeout(recordTimer);
    }else{
        wx.stopRecord({
          success: function (res) {
            voice.localId = res.localId;
            uploadVoice();
          },
          fail: function (res) {
            alert(JSON.stringify(res));
          }
        });
    }
});

//上传录音
function uploadVoice(){
    //调用微信的上传录音接口把本地录音先上传到微信的服务器
    //不过,微信只保留3天,而我们需要长期保存,我们需要把资源从微信服务器下载到自己的服务器
    wx.uploadVoice({
        localId: voice.localId, // 需要上传的音频的本地ID,由stopRecord接口获得
        isShowProgressTips: 1, // 默认为1,显示进度提示
        success: function (res) {
            //把录音在微信服务器上的id(res.serverId)发送到自己的服务器供下载。
            $.ajax({
                url: &#39;后端处理上传录音的接口&#39;,
                type: &#39;post&#39;,
                data: JSON.stringify(res),
                dataType: "json",
                success: function (data) {
                    alert(&#39;文件已经保存到七牛的服务器&#39;);//这回,我使用七牛存储
                },
                error: function (xhr, errorType, error) {
                    console.log(error);
                }
            });
        }
    });
}

//注册微信播放录音结束事件【一定要放在wx.ready函数内】
wx.onVoicePlayEnd({
    success: function (res) {
        stopWave();
    }
});

2.小麻烦

要防止用户误操作(如:反复点击、误触摸)导致的无效录音。

小于300ms不录音

防止用户长按导致的浏览器默认弹出微信浏览器默认的“复制对话框”。

使用css设置按钮 user-select:none;

微信播放录音接口事件回调函数无效

微信注册事件一定要放在wx.ready中。

阻止默认事件

touch 事件记得加 event.preventDefault(); 防火防爆

微信存储静态资源时间为3天,如何长期保存

要么存到自己服务器,要么利用其它资源,比如七牛,还可以帮我们自由转换amr格式到mp3等格式呢!
微信服务器默认资源格式为amr,这个格式在android机器可以使用audio标签播放,在ios机器使用audio标签无法播放。

微信录音功能授权引发的交互问题

使用微信jssdk接口录音,在同一个域只需要授权一次,即第一次使用录音的时候,微信自己会弹出对话框询问是否允许录音,用户点击允许后,之后再使用录音时,便不会再咨询用户是否允许。
在第一次按住录音后,由于用户未曾允许录音,微信会提示用户授权允许在本页面使用微信录音功能,这时用户会放开录音按钮转而去点击允许,在用户允许后,才真正会开始录音,而此时用户早已放开录音按钮,那么录音按钮上便不会再有touchend事件,录音便会一直进行。
解决策略:使用localStorage记录用户是否曾授权,并以此来判断是否需要在刚进入页面是自动录一段录音来触发用户授权

if(!localStorage.rainAllowRecord || localStorage.rainAllowRecord !== &#39;true&#39;){
    wx.startRecord({
        success: function(){
            localStorage.rainAllowRecord = &#39;true&#39;;
            wx.stopRecord();
        },
        cancel: function () {
            alert(&#39;用户拒绝授权录音&#39;);
        }
    });
}

3.难题

音量bug:在ios设备上,使用微信录音功能后,再播放audio标签的音频,音量极低。
但是使用微信接口(wx.playVoice)播放录音的音量是正常的,而且之后,audio标签的音量会有所增大(但是依然音量很低)。

该问题正在沟通微信相关技术人员。
暂时的解决策略为:对于刚刚录音的音频,使用wx.playVoice来播放,否则使用audio播放服务器资源。原因是不确定该音频本地是否存在,刚刚录音的音频肯定是存在的。


推荐阅读
  • 作为140字符的开创者,Twitter看似简单却异常复杂。其简洁之处在于仅用140个字符就能实现信息的高效传播,甚至在多次全球性事件中超越传统媒体的速度。然而,为了支持2亿用户的高效使用,其背后的技术架构和系统设计则极为复杂,涉及高并发处理、数据存储和实时传输等多个技术挑战。 ... [详细]
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • Select2.js下拉框应用总结与实践要点
    在使用Select2.js下拉框插件的过程中,积累了诸多实践经验与心得。尽管最初觉得Select2在某些方面不尽如人意,但在对比了其他选项后,发现其仍是最优选择。本文将详细探讨Select2.js的配置、优化技巧及常见问题解决方法,帮助开发者更好地利用这一强大的前端工具。 ... [详细]
  • Spring Security 认证模块的项目构建与初始化
    本文详细介绍了如何构建和初始化Spring Security认证模块的项目。首先,通过创建一个分布式Maven聚合工程,该工程包含四个模块,分别为core、browser(用于演示)、app等,以构成完整的SeehopeSecurity项目。在项目构建过程中,还涉及日志生成机制,确保能够输出关键信息,便于调试和监控。 ... [详细]
  • 通过优化模板消息机制,本研究提出了一种高效的信息化推送方案。该方案利用获取的访问令牌(access token)和指定的模板ID,实现了精准且快速的信息推送,显著提升了用户体验和信息传递效率。具体实现中,通过调用相关API接口,确保了消息的准确性和及时性,为用户提供更加便捷的服务。 ... [详细]
  • 在ASP.NET MVC项目中,通过实战解决了Ajax请求500错误及多表数据查询的问题。具体而言,将页面分为两个部分,用户点击右侧导航栏时,通过Ajax请求动态加载数据,并在右侧显示相应的页面内容。最初尝试使用Partial Action方法,但遇到了500错误。通过详细排查和调试,最终成功解决了这一问题,并实现了预期功能。此外,还优化了多表数据查询的性能,确保系统的高效运行。 ... [详细]
  • 本文详细探讨了Java集合框架的使用方法及其性能特点。首先,通过关系图展示了集合接口之间的层次结构,如`Collection`接口作为对象集合的基础,其下分为`List`、`Set`和`Queue`等子接口。其中,`List`接口支持按插入顺序保存元素且允许重复,而`Set`接口则确保元素唯一性。此外,文章还深入分析了不同集合类在实际应用中的性能表现,为开发者选择合适的集合类型提供了参考依据。 ... [详细]
  • 本课程详细介绍了如何使用Python Flask框架从零开始构建鱼书应用,涵盖高级编程技巧和实战项目。通过视频教学,学员将学习到Flask的高效用法,包括数据库事务处理和书籍交易模型的实现。特别感谢AI资源网提供的课程下载支持。 ... [详细]
  • 如何创建和使用快捷链接:掌握打开链接的快捷方式技巧 ... [详细]
  • 如果你对项目管理和系统架构感兴趣,欢迎关注微信订阅号“softjg”,加入我们这个PM和架构师的大家庭。本文将探讨编写高质量软件架构文档的重要性及其优势。良好的架构文档不仅能够促进不同利益相关者之间的沟通与理解,还能为项目的长期维护和扩展提供坚实的基础。通过详细记录系统的设计决策和关键组件,架构文档能够确保团队成员在项目周期内保持一致性和高效协作。 ... [详细]
  • PHP连接MySQL的三种方法及预处理语句防止SQL注入的技术详解
    PHP连接MySQL的三种方法及预处理语句防止SQL注入的技术详解 ... [详细]
  • PHP高性能并发处理技术深入解析
    在《PHP高性能并发处理技术深入解析》一文中,探讨了提升PHP应用性能的多种策略。首先,通过将应用程序与静态资源(如JavaScript、CSS文件及图像)分离并部署于专门的服务器上,有效减轻了主服务器的负载。其次,文章强调了页面缓存的重要性,通过缓存由应用程序生成的页面内容,不仅显著减少了CPU的使用率,还提升了用户的访问速度。对于需要动态更新的部分页面,文章也提出了相应的优化建议,确保在保持内容时效性的同时,不影响整体性能表现。 ... [详细]
  • 深入解析 AngularJS 表达式的应用与优化技巧
    本文深入探讨了AngularJS表达式的应用及其优化策略。在AngularJS中,表达式主要通过$digest循环进行自动解析,但在某些场景下,手动解析表达式也是必要的。文章详细介绍了如何利用$parse服务实现手动解析,并提供了多种优化技巧,以提高应用性能和响应速度。 ... [详细]
  • 浏览器与服务器在网站访问过程中的数据交互分析
    本文分析了浏览器与服务器在网站访问过程中基于HTTP协议的数据交互机制。HTTP协议具有轻量级和高效通信的特点,主要通过GET、HEAD和POST方法进行数据传输。其“请求-响应”模式确保了数据交互的有序性和可靠性,同时支持多种数据格式和内容类型,为现代Web应用提供了坚实的基础。 ... [详细]
  • 内网渗透技术详解:PTH、PTT与PTK在域控环境中的应用及猫盘内网穿透配置
    本文深入探讨了内网渗透技术,特别是PTH、PTT与PTK在域控环境中的应用,并详细介绍了猫盘内网穿透的配置方法。通过这些技术,安全研究人员可以更有效地进行内网渗透测试,解决常见的渗透测试难题。此外,文章还提供了实用的配置示例和操作步骤,帮助读者更好地理解和应用这些技术。 ... [详细]
author-avatar
sa沙沙ssa
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有