微信js-sdk 录音功能的示例代码_javascript技巧

来源:脚本之家  责任编辑:小易  

已经发布了啊2015-01-09就发布了。开发者可以利用该SDK工具调用包括分享、拍照、上传、下载、位置、扫描、录音、卡卷、支付等等在内的各项微信功能。以后基于微信内置浏览器的网页将拥有更加强大的信息处理能力,基于微信平台的网页应用将会更加丰富多彩,并且对于微信开发者来说,为实现流量变现添加了新的动力,微信借此也为广大企业公众号运营者们的提供了一个更加成熟的商业基础设施平台。使用这个JS-sdk工具包需要引用微信的JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js(支持使用 AMD/CMD 标准模块加载方法加载)并且使用前,需要在微信公众号后台公众号设置-功能设置设置JS接口安全域名:需要注意的是,微信原有的自定义分享函数已经失效,新开放JS-SDK接口分享功能需要经过微信认证www.zgxue.com防采集请勿采集本网。

需求描述

制作一个H5页面,打开之后可以录音,并将录音文件提交至后台

以IOS版“语音备忘录”和微信演示m4a录音的制作过程。微信m4a录音制作有以下几步: 一、在桌面上找到“语音备忘录”软件,并点击进入。二、上一步点击后进入如下界面。点击红色的录制按钮。三、

微信录音最长时长为1min

4、选择收道藏之后,我们进入专“微信群”聊天界面,并导出功能栏,在功能栏中可以看到属有“我的收藏”选择,点击“我的收藏”: 5、在我的收藏列表界面,选择刚才收藏好的录音文件并发送: 6、提示已

微信官方文档--音频接口

矮冬瓜马洪刚

代码如下

不同型号的手机所用的步骤都不相同的,我用小米手机,以下以小米手机为例做步骤说明。4、在“应用管理”选项中往下拉,找到“微信”并点击6、最后将“拒绝”修改为“允许”,录音功能就恢复了。

// isVoice: 0-未录音 1-录音中 2-录完音 // 点击录音/录音中 按钮展示 <div class="vm-voice-box" v-show="isVoice < 2"> <p v-show="!isVoice" @click="voiceStart">点击录音</p> <img v-show="isVoice" @click="voiceEnd" src="../../xxx/ico-voice.png" alt=""> </div> // isListen // 0-未试听/试听结束 1-试听中 2-暂停试听 // 录完音 按钮展示 <div class="vm-voice-player" v-show="isVoice == 2"> <div class="vm-vp-button"> <p class="vm-vp-revoice" @click="openMask(0)">重录</p> <p class="vm-vp-submit" :class="{'vm-vp-no-submit' : isSubmit}" @click="openMask(1)">提交</p> <p class="vm-vp-pause" v-show="!isListen" @click="play">试听</p> <p class="vm-vp-pause" v-show="isListen==1" @click="pause">| |</p> <p class="vm-vp-pause vm-vp-border" v-show="isListen==2" @click="play"> ▶ </p> </div> </div> data() { return { id: '', startTime: 0, recordTimer: null, localId: '', // 录音本地id serverId: '', // 录音微信服务id showMask: false, tip: 1, //提交 0- 重录 isVoice: 0, // 0-未录音 1-录音中 2-录完音 isListen: 0, // 0-未试听/试听结束 1-试听中 2-暂停试听 data1: 0, work: {}, isPlay: false, // 是否播放 isSubmit: false, // 是否已提交 } } // 微信配置 getConfig() { let _url = encodeURIComponent(window.location.href) // 后台提供接口,传入当前url(返回基础配置信息) voiceApi.wechatConfig(_url) .then(res => { if (res.data.code == 200) { wx.config({ debug: false, appId: res.data.content.appid, timestamp: res.data.content.timestamp, // 必填,生成签名的时间戳 nonceStr: res.data.content.nonceStr, // 必填,生成签名的随机串 signature: res.data.content.signature, // 必填,签名 // 需要授权的api接口 jsApiList: [ 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'uploadVoice', 'downloadVoice', 'playVoice', 'pauseVoice', 'onVoicePlayEnd' ] })

目前微信暂时不支持边语音边录音的功能,不过呢本人查了网上一些方法,可以下载录音软件,然后将聊天后的语音,录下来,具体方法如下: 1、首先打开录音软件,打开录音2、打开微信群的应用,点击

wx.ready( () => { wx.onVoiceRecordEnd({ // 录音时间超过一分钟没有停止的时候会执行 complete 回调 complete: function (res) { _this.isVoice = 2 _this.localId = res.localId; } }) }) } }) }, // 开始录音 voiceStart(event) { let _this = this event.preventDefault() // 延时后录音,避免误操作 this.recordTimer = setTimeout(function() { wx.startRecord({ success: function() { _this.startTime = new Date().getTime() _this.isVoice = 1 }, cancel: function() { _this.isVoice = 0 } }) }, 300) }, // 停止录音 voiceEnd(event) { this.isVoice = 2 let _this = this event.preventDefault() // 间隔太短 if (new Date().getTime() - this.startTime < 300) { this.startTime = 0 // 不录音 clearTimeout(this.recordTimer) } else { wx.stopRecord({ success: function(res) { // 微信生成的localId,此时语音还未上传至微信服务器 _this.localId = res.localId }, fail: function(res) { console.log(JSON.stringify(res)) } }) } }, // 试听 tryListen() { let _this = this wx.playVoice({ localId: _this.localId // 需要播放的音频的本地ID,由stopRecord接口获得 }) console.log('试听。。。') wx.onVoicePlayEnd({ // 监听播放结束 success: function (res) { console.log('试听监听结束') _this.isListen = 0 } }); }, // 试听停止 tryStop() { let _this = this wx.pauseVoice({ localId: _this.localId // 需要停止的音频的本地ID,由stopRecord接口获得 }) }, // 处理录音数据 voiceHandle() { let _this = this wx.uploadVoice({ localId: this.localId, // 需要上传的音频的本地ID,由stopRecord接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 success: function (res) { // 微信语音已上传至 微信服务器并返回一个服务器id _this.serverId = res.serverId; // 返回音频的服务器端ID _this.upVoice() } }) }, // 自己后台上传接口 upVoice() { let data = { id: this.id, serviceId: this.serverId } voiceApi.upVoice(data) .then(res => { if(res.data.code == 200) { // !! todo 隐藏loading this.isSubmit = true this.$Message.message('提交成功') this.closeMask() } else { this.$Message.message(res.data.message) } }) .catch(err => { console.log(err) }) },

1. 微信jsdk配置

2. 调取微信录音开始方法  wx.startRecord

3. 调取微信录音结束方法  wx.stopRecord

成功后返回一个本地音频id  localId

⚠️ 如果不调用录音结束方法,待录音1min后自动结束,需要wx.onVoiceRecordEnd 监听录音结束

4. 上传录音至微信服务器  wx.uploadVoice

返回serverId

⚠️ 微信存储时间有限,有效期3天

⚠️ 目前多媒体文件下载接口的频率限制为10000次/天,如需要调高频率,请登录微信公众平台,在开发 - 接口权限的列表中,申请提高临时上限。

5. 调取自己后台上传至自己服务器

这部可以看做,将 serverId 传给自己的服务器,然后自己服务器调微信提供的接口去下载(serverId)至自己服务器存储

首先我们用到的两个微信JS-SDK的独特接口:1、音频接口:即通过js调用微信录音相关功能,包括录制、上传、播放,控制等。2、智能接口:所谓“智能”接口,目前只有一个“识别音频并返回识别结果接口”,即”声音转文字。我们的产品"语速达人”基本功能逻辑是这样的:用户读出题词板文字,手机录音,实时识别用户的语速,在完成几秒钟测试后,计算出用户平均语速水平,与小伙伴们愉快的PK“打嘴仗。为了推广,希望基于Web做一个简单版的HTML5测试互动,用于微信传播。很遗憾,这个功能在微信JS-SDK推出之前,是无法实现的:一方面JS调用设备录音功能受限,一方面通过JS进行实时语速识别的算法,性能会有问题,于是我们决定放弃了。但是微信JS-SDk推出后,突然发现,这个测语速功能的实现一下变得非常简单。于是经过了简单的功能设计后,前端攻城师立即开干,与APP上线同步做出了一个”语速达人“网页版。(1)Landing界面:包括主视觉banner、挑战题目标题(摇一摇换一个题),以及一个”开始测试“按钮,(2)开始测试:点击开始测试后,会显示题词板。并在3秒倒计时后开始录音。请注意!用户首次使用时,微信会在这里弹出提示“网页请求录音功能,是否允许”的提示,只有用户选择允许,录音接口才能正常调用。(3)测试结果:关键步骤来了!用户录音完成后,调用语音上传和智能识别接口,即可获得将语音转换后的文字。接口非常简单!1、目前还没有用户在录音授权后的回调接口,JS无法掌握用户授权的情况,如果用户在第一次使用时,请求录音权限时点了”不允许“,功能就废了。2、如果文字长的话,声音转文字还是比较慢的。3、微信很大方,我们用到的几个接口都没有使用频次的限制。4、JS-SDK的文档简单但是很有效,Token获取的逻辑刚开始读的时候有点晕晕的,读完了准备开始写后台程序时发现微信的工程师已经都准备好了,拿来改个Key直接就能用了。这里赞一下微信团队。5、原本计划在每个语速挑战下面,显示一个已经挑战了的用户的列表,并放上他们挑战时的录音。这个功能在JS-SDK支持下也能实现,但是为了更好地呈现,需要微信服务号的权限,才能获取用户的头像和昵称。时间原因,没有做出这个功能。6、吐槽一下:微信服务号300RMB/年,微信开放平台接入300RMB/年,帐号不互通,分开申请分开审核分开收钱~真心觉得鹅长有必要计较这点收入么。PS:补充一个,最近刚发现,有团队用语音接口做了”朋友圈发语音”的功能。听起来很不错的功能,通过JS-SDK实现起来真是太容易了,我觉得也是精巧的使用典范吧内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • js实现录音上传功能
  • javascript实现页面中录音功能的方法
  • 基于js开发微信网页录音功能的实例代码
  • 基于js实现web端录音与播放功能
  • 微信开发之微信jssdk录音功能开发示例
  • vue实现pc端录音功能的实例代码
  • vue使用recorder.js实现录音功能
  • javascript解析xml字符串的函数
  • windows下支持自动更新的electron应用脚手架的方法
  • 浅析javascript原型继承的陷阱
  • js判断为空null与字符串为空简写方法
  • 前端弹出对话框 js实现ajax交互
  • js隐式转换的知识实例讲解
  • 有效提高javascript执行效率的几点知识
  • 探讨js字符串数组拼接的性能问题
  • bootstrap弹出框(popover)被挤压的问题小结
  • es7中利用await减少回调嵌套的方法详解
  • 微信JS-SDK运用得好的案例有哪些
  • 微信 js sdk 什么时候发布
  • 微信录音功能在哪里?
  • 怎么能把手机录音转到微信里
  • 微信m4a录音怎么制作
  • 怎么把微信群里录音转到另一个群里?
  • 微信网页js sdk,把音频从微信服务器下载下来后,怎样播放?
  • 微信的录音功能被禁止后如何恢复
  • 微信语音聊天可以录音吗
  • 怎么解除微信录音设置
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjs实现录音上传功能javascript实现页面中录音功能的方法基于js开发微信网页录音功能的实例代码基于js实现web端录音与播放功能微信开发之微信jssdk录音功能开发示例vue实现pc端录音功能的实例代码vue使用recorder.js实现录音功能javascript解析xml字符串的函数windows下支持自动更新的electron应用脚手架的方法浅析javascript原型继承的陷阱js判断为空null与字符串为空简写方法前端弹出对话框 js实现ajax交互js隐式转换的知识实例讲解有效提高javascript执行效率的几点知识探讨js字符串数组拼接的性能问题bootstrap弹出框(popover)被挤压的问题小结es7中利用await减少回调嵌套的方法详解js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包微信小程序 数据封装,参数传值等经验分享解决option标签selected="selected"属性失javascript 函数声明与函数表达式的区别介js获取url的参数的方法(getquerystring)示bootstrap3中container与container_fluid利用原生js实现html5小游戏之打砖块(附源js+css实现3d切割轮播图解决layui数据表格复选框不居中显示的问题微信小程序的动画效果详解js+css实现tab菜单切换效果的方法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved