实现聊天发送语音消息功能

1.通过mqtt实时收发信息

2.实现发送语音消息

（1）安装js-audio-recorder ，通过这个插件获取浏览器麦克风权限，
注意：在我们开发过程中，前端项目要用localhost这个本地链接访问，否则会获取不到麦克风权限

 npm i js-audio-recorder

//在组件中导入插件
import Recorder from 'js-audio-recorder'

//获取麦克风权限的方法，我是在mounted中直接调用的initRecorder() {this.recorder = new Recorder({sampleBits: 16000, // 采样位数，支持 8 或 16，默认是16sampleRate: 44100, // 采样率，numChannels: 1, // 声道，支持 1 或 2， 默认是1})Recorder.getPermission().then(() => {console.log('给权限了')this.access = true},error => {console.log('获取失败')this.access = false// this.$Message.error({//   title: '获取麦克风失败！',//   desc: `${error.name} : ${error.message}`,// })})},

（2）当用户按住空格键时，开始录音，松开空格键时发送消息

 //监听键盘addEventListenerForKey(type) {//因为只有语音消息需要监听键盘按下和松开事件，如果是文字发送时，type位false,删除掉监听事件if (type) {window.addEventListener('keydown', this.keyDownHandler)window.addEventListener('keyup', this.keyUpHandler)} else {window.removeEventListener('keydown', this.keyDownHandler)window.removeEventListener('keyup', this.keyUpHandler)}},//键盘按下keyDownHandler(e) {switch (e.keyCode) {case 32: //空格键this.voiceMask = true//当获取到麦克风权限时按下空格键，调用recorder.start()开始录音this.recorder.start().then(() => {// 开始录音},error => {// 出错了console.log(error)})break}},//键盘松开keyUpHandler(e) {switch (e.keyCode) {case 32: //空格键//this.voiceMask = falselet wavData = this.recorder.getWAV() //获取 WAV 数据，在录音结束后使用this.timeLength = Math.ceil(this.recorder.duration) //语音时长let mp3BlobData = this.convertToMp3(wavData) //转成MP3格式this.recorder.stop() // 停止录音if (this.access) {this.fnUploadRequest(mp3BlobData, this.timeLength)}break}},

（3）当用户松开空格键时，完成录音，通过 lamejstmp将录音转化位mp3格式的文件，js-audio-recorder官网上有

     //键盘松开时调用convertToMp3(wavDataView) {// 获取wav头信息const wav = lamejs.WavHeader.readHeader(wavDataView) // 此处其实可以不用去读wav头信息，毕竟有对应的config配置const { channels, sampleRate } = wavconst mp3enc = new lamejs.Mp3Encoder(channels, sampleRate, 128)// 获取左右通道数据const result = this.recorder.getChannelData()const buffer = []const leftData =result.left && new Int16Array(result.left.buffer, 0, result.left.byteLength / 2)const rightData =result.right && new Int16Array(result.right.buffer, 0, result.right.byteLength / 2)const remaining = leftData.length + (rightData ? rightData.length : 0)const maxSamples = 1152for (let i = 0; i < remaining; i += maxSamples) {const left = leftData.subarray(i, i + maxSamples)let right = nulllet mp3buf = nullif (channels === 2) {right = rightData.subarray(i, i + maxSamples)mp3buf = mp3enc.encodeBuffer(left, right)} else {mp3buf = mp3enc.encodeBuffer(left)}if (mp3buf.length > 0) {buffer.push(mp3buf)}}const enc = mp3enc.flush()if (enc.length > 0) {buffer.push(enc)}return new Blob(buffer, { type: 'audio/mp3' })},

（4）将录音文件转化为MP3格式后将文件上传，我这边是上传到阿里云oss

//阿里云oss上传录音文件
async fnUploadRequest(options, timeLength) {let ossFileName = 'voiceMessage' //上传到阿里云的文件options.name = new Date().getTime()let file = options // 拿到 filelet res = await uploadOSS(file, ossFileName)this.voice_url = res.fileUrl//拿到oss返回的文件路径后调用发送语音的方法，//this.getVoice() //发送语音},

总结：一开始做的时候觉得这个功能好难，后面研究之后自己也实现了，这上面的就是我的实现思路，有成长了一小步

实现聊天发送语音消息功能相关推荐

微信公众号开发笔记（九）发送语音消息
上一篇我们用代码实现发送图片消息,接下来我们来实现发送语音消息功能发送语音消息代码实现 1.在Message.util工具类中新增 buildVoiceMessag方法 /** * 构造语音消息 ...
android仿微信语音聊天功能,Android仿微信发送语音消息的功能及示例代码
微信的发送语音是有一个向上取消的,我们使用ontouchlistener来监听手势,然后做出相应的操作就行了. 直接上代码: //语音操作对象 private mediaplayer mplayer ...
iOS 仿微信发送语音消息按钮 - 手势按钮(一)
最近在做基于XMPP的IM,开发到发送语音消息的功能.在某度上搜了很久也没有找到适合的方法.索性自己琢磨了一个,提供给大家参考.(其中找到的很多文章都是一个复制另一个的,很烦!没格式没头没尾的.给不了 ...
Android仿微信发送语音消息动态提示，支持上滑取消发送
Android仿微信发送语音消息动态提示,支持上滑取消发送先来几张图说明一下,简单直接: 是不是看了图片就秒懂了. 下面来分析代码实现,直接撸代码. 主页面 AudioSendActivity.j ...
php消息功能,PHP实现发送微博消息功能完整示例
PHP实现发送微博消息功能完整示例,操作技巧,本文,相关内容,感兴趣,数据结构 PHP实现发送微博消息功能完整示例易采站长站,站长之家为您整理了PHP实现发送微博消息功能完整示例的相关内容. 本文实 ...
融云 IM SDK 发送语音消息
由于公司既有移动端又有 web 端,所以在语音消息这遇到了些小问题.解决的过程最近整理了下也分享给大家作为参考. 遇到问题 web 端发送语音的问题. 移动端发送来的 VoiceMessage 在 w ...
ios开发多人语音聊天_iOS语音通话功能实现流程(实时语音通话二)
上一篇我们讲述了iOS语音通话SDK集成指引,今天就来看下iOS下实时语音通话功能实现的流程.实时语音场景的典型之一是同一会话中的成员进行实时语音对话. 以 2 人间的实时语音为例,主要流程如下: 请 ...
微信小程序｜基于小程序实现发送语音消息及转文字
此文主要在小程序内聊天的基础上实现语音发送及文字转换. 小程序账号创建及工具准备页面大体设计实现录音功能实现对话界面语音转换文字账号创建及应用申请实现语音转文字小程序账号创建及工具准 ...
android模拟微信聊天功能,android仿微信聊天界面语音录制功能
本例为模仿微信聊天界面UI设计,文字发送以及语言录制UI. 1先看效果图: 第一:chat.xml设计 android:layout_width="fill_parent" and ...

实现聊天发送语音消息功能

1.通过mqtt实时收发信息

2.实现发送语音消息

实现聊天发送语音消息功能相关推荐

最新文章

热门文章