⼩程序实现简单语⾳聊天的⽰例代码
框架相关
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 = [];
// 建⽴链接监听
<('connection', function (ws) {
clients.push(ws);
<("message", function (message) {
clients.forEach(function (ws1) {
if (ws1 !== ws) {
ws1.send(message)
}
})
})
})
// 建⽴链接关闭监听
<("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() {
format: "mp3"
});
},
// 松开按钮停⽌录⾳
stopRecord() {
},
// 播放录⾳
palyAudio(value) {
this.innerAudioContext.src = value;
this.innerAudioContext.play();
}
},
created() {
this.innerAudioContext = wx.createInnerAudioContext();
// 监听录⾳开始
console.log("recordStart");
});
// 监听录⾳结束
const audioName = new Date().getTime() + ".mp3";
// 上传录⾳⽂件
wx.cloud.uploadFile({
cloudPath: audioName,
filePath: pFilePath,
success: upload => {
this.chatContent.push(upload.fileID);
// 通过websocket传递录⾳连接
wx.sendSocketMessage({
data: upload.fileID
});
}
});
});
// 建⽴websocket链接
url: "ws://yoursiteandeport",
success: res => {
console.log("success", res);
},
fail: err => {
console.log("error", err);
}
});
/
/ websocket消息监听
console.log(data);
this.chatContent.push(data.data);
});
写文章的小程序}
};
结论
主要通过WebSocket完成实时通讯
通过⼩程序提供的API完成语⾳的录⼊和输出
通过⽂件服务器上传语⾳⽂件
到此这篇关于⼩程序实现简单语⾳聊天的⽰例代码的⽂章就介绍到这了，更多相关⼩程序语⾳聊天内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。