快捷導(dǎo)航

小程序?qū)崿F(xiàn)簡單語音聊天的示例代碼

更新時(shí)間：2020年07月24日 09:45:14 作者：加菲貓的狗

這篇文章主要介紹了小程序?qū)崿F(xiàn)簡單語音聊天的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

框架相關(guān)

Demo采用Mpvue框架，后端的WebSocket采用Node.js，文件服務(wù)器直接使用的微信小程序的云開發(fā)的存儲(chǔ)。

儲(chǔ)備知識(shí)

微信小程序錄音控制器：recorderManager。
微信小程序音頻控制器：innerAudioContext。
微信小程序WebSocket。

Node.js端WebScoket實(shí)現(xiàn)

// 基于WS插件
 
// 引入ws插件
var WebSocketServer = require("ws").Server;
// 實(shí)例化WebSocket
var wss = new WebSocketServer({ port: 9090 });
// 初始化客戶端數(shù)組
var clients = [];
 
// 建立鏈接監(jiān)聽
wss.on('connection', function (ws) {
 clients.push(ws);
 ws.on("message", function (message) {
  clients.forEach(function (ws1) {
   if (ws1 !== ws) {
    ws1.send(message)
   }
  })
 })
})
 
// 建立鏈接關(guān)閉監(jiān)聽
ws.on("close", function (message) {
 clients = clients.filter(function (ws1) {
  return ws1 !== ws
 })
})

小程序端實(shí)現(xiàn)

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 {
   // 存儲(chǔ)聊天記錄
   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();
  // 監(jiān)聽錄音開始
  this.recorderManager.onStart(res => {
   console.log("recordStart");
  });
  // 監(jiān)聽錄音結(jié)束
  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消息監(jiān)聽 
  wx.onSocketMessage(data => {
   console.log(data);
   this.chatContent.push(data.data);
  });
 }
};

結(jié)論