框架相關(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 = http://www.wxapp-union.com/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é)論

• 主要通過WebSocket完成實(shí)時(shí)通訊
• 通過微信小程序提供的API完成語音的錄入和輸出
• 通過文件服務(wù)器上傳語音文件