小程序实现简单语音聊天

框架相关

Demo采用Mpvue框架，后端的WebSocket采用Node.js，文件服务器直接使用的微信小程序的云开发的存储。

储备知识

微信小程序录音控制器：recorderManager。

微信小程序音频控制器：innerAudioContext。

微信小程序WebSocket。

Node.js端WebScoket实现

// 基于WS插件// 引入ws插件
var WebSocketServer = require("ws").Server;
// 实例化WebSocket
var wss = new WebSocketServer({ port: 9090 });
// 初始化客户端数组
var clients = [];// 建立链接监听
wss.on('connection', function (ws) {clients.push(ws);ws.on("message", function (message) {clients.forEach(function (ws1) {if (ws1 !== ws) {ws1.send(message)}})})
})// 建立链接关闭监听
ws.on("close", function (message) {clients = clients.filter(function (ws1) {return ws1 !== ws})
})

小程序端实现

html

<div><button @click="palyAudio(value)" v-for="(value,index) in chatContent" :key="index">)))))</button><button class="botom-button" @touchstart="startRecord" @touchend="stopRecord">输入语音</button>
</div>

export default {data() {return {// 存储聊天记录chatContent: [],// 录音控制器recorderManager: null,// 音频控制器innerAudioContext: null};},methods: {// 按下按钮开始录音startRecord() {this.recorderManager.start({format: "mp3"});},// 松开按钮停止录音stopRecord() {this.recorderManager.stop();},// 播放录音palyAudio(value) {this.innerAudioContext.src = value;this.innerAudioContext.play();}},created() {this.recorderManager = wx.getRecorderManager();this.innerAudioContext = wx.createInnerAudioContext();// 监听录音开始this.recorderManager.onStart(res => {console.log("recordStart");});// 监听录音结束this.recorderManager.onStop(res => {const audioName = new Date().getTime() + ".mp3";// 上传录音文件wx.cloud.uploadFile({cloudPath: audioName,filePath: res.tempFilePath,success: upload => {this.chatContent.push(upload.fileID);// 通过websocket传递录音连接wx.sendSocketMessage({data: upload.fileID});}});});// 建立websocket链接wx.connectSocket({url: "ws://yoursiteandeport",success: res => {console.log("success", res);},fail: err => {console.log("error", err);}});// websocket消息监听 wx.onSocketMessage(data => {console.log(data);this.chatContent.push(data.data);});}
};

结论

主要通过WebSocket完成实时通讯
通过微信小程序提供的API完成语音的录入和输出
通过文件服务器上传语音文件

小程序实现简单语音聊天相关推荐

小程序实现即时语音聊天功能
1.用户在小程序咨询客服,有时候文字沟通不太清楚,如果能发语音沟通,就好了. 2.用户在公众号发了语音,客服能在手机上收听,以及能用语音去回复吗? 3.我没有小程序,也没有公众号,做了一个H5咨询链接 ...
用Mpvue开发微信小程序，微信语音聊天
1.github项目 https://github.com/F-loat/mpvue-quickstart 2.参考项目 github https://github.com/unmagic/wech ...
微信小程序实现图林机器人聊天和百度AI语音识别的简单人工客服
用微信小程序实现简单的人工客服最近在做软件工程的课程设计,选择性的做了微信小程序的简单的人工客服.在这里对该课程设计的原理和实现进行一个讲解,也算做一个总结和笔记,方便自己以后查看.复习和帮助大家的 ...
小程序源码：聊天斗图微信表情包-多玩法安装简单
这是一款微信表情包小程序支持自定义搜索,另外支持长按发送给好友当然也支持长按保存表情包这个源码比较单调一点,没有那么多的分类小程序源码下载地址: 小程序源码:聊天斗图微信表情包-多玩法安装简单 ...
许嵩音乐智能问答系统微信小程序之客服聊天室
许嵩音乐智能问答系统微信小程序之客服聊天室项目简介. 音乐播放器搭建. 获取数据及文本分类. 智能客服聊天界面. 连接前端微信小程序输入和后端python,并返回值连接知识图谱你还在为因为性格腼 ...
【微信小程序系列】微信小程序超简单教程，基本语法，获取用户基本数据信息，实现对云数据库的增删改查及小程序外部api的引用示例（附源码）
[微信小程序系列]微信小程序超简单教程小程序项目结构静态页面的构成 HTML:结构 css:样式 js:行为小程序页面全部存放在pages, 而且pages目录只能存放页面页面包括4个文件, ...
微信小程序最简单的轮播图
小程序轮播图今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码基本属性介绍 <!-- indic ...
微信小程序：简单舒服新UI装逼制作神器
这是一款装逼神器小程序源码内包含了N种模板制作,另外并有大分类另外小编还给添加了几个流量主广告,包含了每一个页面都覆盖了而且流量主还不是单一种: Banner 激励视频视频广告多格子广告横 ...
小程序源码：聊天斗图微信表情包
这是一款微信表情包小程序支持自定义搜索,另外支持长按发送给好友当然也支持长按保存表情包这个源码比较单调一点,没有那么多的分类小程序源码下载地址: 小程序源码:聊天斗图微信表情包-小程序文档类资 ...
微信小程序+.NET(九) 小程序之简单的广告拦截
微信小程序之简单的广告拦截导语:我们在web-view内嵌网上的某些网站比如我内嵌的小说网站,会包含某些影响使用和含有诱导链接的垃圾广告,这时我们该怎么处理呢? 首先,要是自己写的网站,就可 ...

小程序实现简单语音聊天

框架相关

储备知识

Node.js端WebScoket实现

小程序端实现

结论

小程序实现简单语音聊天相关推荐

最新文章

热门文章