ltb8r.com

小程序实现简单语音聊天

框架相关Demo采用Mpvue框架,后端的WebSocket采用Node.js,文件服务器直接使用的微信小程序的云开发的存储。储备知识微信小程序录音控制器:recorderManager。微信小程序音频控制器:innerAudioContext。

框架相关

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

免责声明:本站所有PPT模板资源均来自用户分享和网络收集,仅供学习与参考,请勿用于商业用途,如果损害了您的权益,请联系网站客服处理
本文地址:https://www.ltb8r.com/webseo/103.html
打赏 微信扫一扫 微信扫码打赏

相关推荐

  • 百度快照 什么是百度快照? 它如何帮助SEO?

    1.什么是百度快照? 百度快照是一个基本概念,之前也曾提到过。 例如,如果您在百度上搜索 小熊吧织梦仿站 ,则搜索到的网站后面会出现百度快照。 单击第一个百度快照,顶部显示…

    8分钟前 169
  • 微信小程序 小程序实现简单语音聊天

    框架相关 Demo采用Mpvue框架,后端的WebSocket采用Node.js,文件服务器直接使用的微信 小程序 的云开发的存储。 储备知识 微信小程序录音控制器:recorderManager。 微信小程序音频控制器:…

    07-28 09:09 183
  • 自适应 电脑pc端的网页自适应显示在移动端方法

    当我们将一个pc端的网页放到移动端的时候,移动端浏览器会将pc端的网页按照一定的比例完整的显示出来,这是因为移动端的浏览器默认的会将网页渲染在一个比例比较大的viewport中排…

    07-02 10:26 106
  • 微信小程序 微信小程序开发组件初步使用和配置

    微信小程序基础开发详解知识,关于一些小程序的组件初步使用和配置项的讲解。…

    04-13 10:35 109
  • 微信小程序 「用户登录」微信小程序登录验证实现

    对于部分页面添加登录验证,当用户未登录时,进入页面,该页面自动转到登录页面。 成功登录验证后,回调到登录发起页面。…

    04-12 13:56 165