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


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运算符小结
Jun 03 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
JS前端广告拦截实现原理解析
Feb 17 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和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
Python内置函数—vars的具体使用方法
2017/12/04 Python
python中join()方法介绍
2018/10/11 Python
简单了解python单例模式的几种写法
2019/07/01 Python
简单了解python代码优化小技巧
2019/07/08 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
水果连锁超市创业计划书
2014/01/24 职场文书
公路绿化方案
2014/05/12 职场文书
工作调动申请报告
2015/05/18 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
货款欠条范本
2015/07/03 职场文书