小程序实现简单语音聊天的示例代码


Posted in Javascript onJuly 24, 2020

框架相关

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>

js

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完成语音的录入和输出
  • 通过文件服务器上传语音文件

到此这篇关于小程序实现简单语音聊天的示例代码的文章就介绍到这了,更多相关小程序 语音聊天内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript实现 在光标处插入指定内容
May 25 Javascript
JavaScript delete操作符应用实例
Jan 13 Javascript
jQuery 入门讲解1
Apr 15 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
axios学习教程全攻略
Mar 26 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
vue接口请求加密实例
Aug 11 Javascript
Ajax常用封装库——Axios的使用
May 08 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 #Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 #Javascript
javascript实现支付宝滑块验证码效果
Jul 24 #Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 #Javascript
如何通过vscode运行调试javascript代码
Jul 24 #Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 #Javascript
js实现验证码功能
Jul 24 #Javascript
You might like
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
php while循环控制的简单实例
2016/05/30 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
Python 26进制计算实现方法
2015/05/28 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
Python处理CSV与List的转换方法
2018/04/19 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
python实现拼图小游戏
2020/02/22 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
销售员自我评价怎么写
2013/09/19 职场文书
护士实习自我鉴定
2013/10/22 职场文书
县委务虚会发言材料
2014/10/20 职场文书
金秋助学感谢信
2015/01/21 职场文书
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python
python中pycryto实现数据加密
2022/04/29 Python