欧美vvv,亚洲第一成人在线,亚洲成人欧美日韩在线观看,日本猛少妇猛色XXXXX猛叫

公司有同事需要相關(guān)的內(nèi)容補(bǔ)充，就想著寫了一個(gè)簡易的語音聊天Demo，有任何問題敬請(qǐng)指教。

框架相關(guān)

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

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

微信小程序錄音控制器：。

微信小程序音頻控制器：。

微信小程序。

Node.js端實(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é)論注意

文件上傳可以根據(jù)自身項(xiàng)目進(jìn)行改變，如果要運(yùn)行demo小程序語音輸入小程序語音輸入，請(qǐng)先開啟微信小程序云開發(fā)