微信H5录音实现

HTML5原生是提供了音频录音的支持的,用到的是这个API--getUserMedia,然而……感人的是,iOS Safari & Safari 直接不支持,面对着庞大的水果系用户,这个方案显然行不通。值得庆幸的是微信的JSSDK提供了音频接口的支持,所以要在微信的H5页面中实现录音等功能,直接使用微信的API即可,兼容性也是妥妥的。下面说说在微信中使用录音接口的具体实现和其中的一些坑。

前提

用过微信JSSDK的童鞋都应该知道,使用它需要先在公众号上绑定安全域名、并且实现权限验证逻辑,具体细节可以参阅官方文档。做好了上述准备工作,在我们的页面中引入SDK的js,并且部署到安全域名下,即可调用API。

接口列表

  • 开始录音接口

wx.startRecord();
  • 停止录音接口

wx.stopRecord({
    success: function (res) {
        var localId = res.localId;
    }
});
  • 监听录音自动停止接口

wx.onVoiceRecordEnd({
    // 录音时间超过一分钟没有停止的时候会执行 complete 回调
    complete: function (res) {
        var localId = res.localId; 
    }
});
  • 播放语音接口

wx.playVoice({
    localId: '' // 需要播放的音频的本地ID,由stopRecord接口获得
});
  • 暂停播放接口

wx.pauseVoice({
    localId: '' // 需要暂停的音频的本地ID,由stopRecord接口获得
});
  • 停止播放接口

wx.stopVoice({
    localId: '' // 需要停止的音频的本地ID,由stopRecord接口获得
});
  • 监听语音播放完毕接口

wx.onVoicePlayEnd({
    success: function (res) {
        var localId = res.localId; // 返回音频的本地ID
    }
});
  • 上传语音接口

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

备注:上传语音有效期3天,可用微信多媒体接口下载语音到自己的服务器,此处获得的 serverId 即 media_id,参考文档 https://mp.weixin.qq.com/wiki... 目前多媒体文件下载接口的频率限制为10000次/天,如需要调高频率,请邮件weixin-open@qq.com,邮件主题为【申请多媒体接口调用量】,请对你的项目进行简单描述,附上产品体验链接,并对用户量和使用量进行说明。

  • 下载语音接口

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

实现长按录音和保存上传录音

长按录音的关键代码:

var btnRecord = $('#record');
btnRecord.on('touchstart', function(event) {
    event.preventDefault();
    btnRecord.addClass('hold');
    startTime = new Date().getTime();
    // 延时后录音,避免误操作
    recordTimer = setTimeout(function() {
        wx.startRecord({
            success: function() {
            },
            cancel: function() {
                alert('用户拒绝授权录音');
            }
        });
    }, 300);
}).on('touchend', function(event) {
    event.preventDefault();
    btnRecord.removeClass('hold');
    // 间隔太短
    if (new Date().getTime() - startTime < 300) {
        startTime = 0;
        // 不录音
        clearTimeout(recordTimer);
    } else { // 松手结束录音
        wx.stopRecord({
            success: function(res) {
                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: '后端处理上传录音的接口',
                type: 'post',
                data: JSON.stringify(res),
                dataType: "json",
                success: function (data) {
                    alert('文件已经保存到自己的服务器');
                },
                error: function (xhr, errorType, error) {
                    console.log(error);
                }
            });
        }
    });
}

微信的录音只能通过localId上传到微信服务器,然后通过localId从微信服务器上进行下载,文件只会在服务器上保存3天,格式是arm格式,所以一般还需要通过自己的服务器将文件下载下来保存转码,具体细节查阅文档

我们在做例如录音贺卡等H5页面时,就需要在自己的服务器下载录音转码成mp3,然后收到贺卡的用户是通过在我们的服务器中获取mp3路径来收听录音的。

小细节处理

  • 阻止默认事件

按钮的touch事件记得加 event.preventDefault();
  • 防止长按文字被选中出现复制框

使用css设置按钮 user-select:none;
  • 避免授权弹窗导致touchend事件无法触发,一直不能结束录音

    用户第一次触发录音时,会弹出授权窗口,这时会导致无法触发touchend事件,导致录音一直无法中断。解决的办法是,进入页面时自动触发一次录音弹出授权,之后真正录音时就不需要授权了。

    // 用localStorage进行记录,之前没有授权的话,先触发录音授权,避免影响后 续交互
    if (!localStorage.allowRecord || localStorage.allowRecord !== 'true') {
        wx.startRecord({
            success: function() {
                localStorage.allowRecord = 'true';
                // 仅仅为了授权,所以立刻停掉
                wx.stopRecord();
            },
            cancel: function() {
                alert('用户拒绝授权录音');
            }
        });
    }

脑洞

是否能利用录音接口实现类似“八分音符”这种麦克风游戏呢?
目前微信的录音api更适合做录音类,像“八分音符”这种需要实时获取当前声音数据的交互还实现不了,因为我们仅仅能获得一个音频的id,不像原生H5接口那样能拿到音频的数据信息。


技术小栈
记录技术上的心得与经验
216 声望
3 粉丝
0 条评论
推荐阅读
用socket.io简单快速实现H5实时互动
在页游时代,大部分游戏都是通过socket来实现玩家之间的实时通信互动的,在H5时代,利用websocket,我们也同样可以达到这个目的,并且目前websocket的浏览器兼容度已经很高,下面记录一下基于socket.io库来实现H5...

cybs4阅读 9.3k评论 3

CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan29阅读 3.6k评论 2

封面图
现代 CSS 之高阶图片渐隐消失术
在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: {代码...} {代码...} 但是,CSS 的功能如此强大的今天。我们可以利用 CSS 实现的渐隐效果已经不再是如此的简单。想想看,...

chokcoco25阅读 2.1k

封面图
给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.5k

封面图
开局一张图,构建神奇的 CSS 效果
假设,我们有这样一张 Gif 图:利用 CSS,我们尝试来搞一些事情。图片的 Glitch Art 风在这篇文章中 --CSS 故障艺术,我们介绍了利用混合模式制作一种晕眩感觉的视觉效果。有点类似于抖音的 LOGO。像是这样:假设...

chokcoco13阅读 2.1k评论 3

封面图
你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.7k

封面图
现代 CSS 高阶技巧,完美的波浪进度条效果!
本文为稀土掘金技术社区首发签约文章,14 天内禁止转载,14 天后未获授权禁止转载,侵权必究!我的新的专栏 -- 现代 CSS 与 Web 动画解决方案。将专注于实现复杂布局,兼容设备差异,制作酷炫动画,制作复杂交互...

chokcoco10阅读 2.6k

封面图
216 声望
3 粉丝
宣传栏