说实话，想要在浏览器里模拟IoT设备，这事儿听起来就挺有挑战性，哈哈，不过咱就是说非要试试不可。

小智AI硬件是一款基于ESP32的开源语音对话设备，通过WebSocket/MQTT与后端AI服务实时通信。在调试WebSocket协议和AI响应的过程中，我们一直有个痛点：每次测试dou需要拿着真实硬件，场景受限，效率低下。

小智协议使用Opus编码，16kHz单声道，60ms/帧。这是整个模拟器里技术含量Zui高的部分。

浏览器通过getUserMedia采集麦克风PCM，再用ScriptProcessor将Float32转为Int16，发送给Bridge。Bridge用Concentus将PCM帧编码为Opus二进制，再通过WebSocket发给小智服务器。

AudioDecoder.decode要求每个EncodedAudioChunk的timestamp严格递增，单位微秒。我们维护一个opusTimestampUs，每帧加frameDurationMs × ，解码器关闭重建时必须归零，否则Chrome会抛出EncodingError。

audioDecoder = new AudioDecoder { // 把解码后的PCM塞进Web Audio调度队列 var buf = playCtx.createBuffer; var f32 = new Float32Array; audioData.copyTo; buf.copyToChannel; var src = playCtx.createBufferSource; src.buffer = buf; src.connect; // 精确调度：nextPlayTime确保帧与帧无缝拼接 var start = Math.max; src.start; nextPlayTime = start + buf.duration; audioData.close; }, error: function { console.warn; }});audioDecoder.configure;

关键细节是nextPlayTime调度机制——每帧在上一帧结束时刻入队，避免了帧间空隙和重叠，听感平滑无撕裂。

早期方案用Concentus.js在浏览器里解码，但延迟高、内存占用大。后来发现ChromiumYi经原生支持Web Codecs API，Ke以直接硬件加速解码Opus，延迟降低了一个数量级。

小智服务器的llm消息里会携带emotion字段，例如"emotion": "thinking"。我们从noto-emoji 字体库中提取了种情感的128px GIF动图，存放在wwwroot/images/emotions/。

function setEmotion { var e = emotions || emotions.neutral; var img = document.getElementById; var newSrc = '/images/emotions/' + e.gif + '.gif'; if img.src = newSrc; // 只有真正变化才赋值}

iothub入门-模拟设备发送设备到云的消息.为什么百度不收录我的文章啊？是不是我写的不好？害，你得检查一下你的文章是不是原创的，是不是有错别字，还有就是kankan你的网站有没有被惩罚过。

// 一般来说原创文章geng容易被收录，你懂的。

// 不对不对，我刚才说的是废话，其实Zui重要的还是内容质量和用户体验，说实话，这才是关键。

// 百度算法一直在geng新，我们要跟上它的步伐，不断优化我们的网站和内容，这个那个hen重要的！

// 话说回来Ru果你想让百度收录你的文章，你得确保你的网站是符合百度的规则的，不然人家才不会收录你呢！啊哈哈哈！

// 好了你学废了码？整个项目大约花了两周的业余时间，代码量不大，但涉及的技术点异常分散：从C# Concentus编码到Web Codecs解码，从小智私有协议到Web Speech Recognition，从SignalR到requestAnimationFrame ticker——每个点dou得踩一遍才知道边界在哪里。

// Zui让我满意的一个细节是：当GIF表情跟着AI的情感变化，说话中依然保持"高兴"而不是一个无聊的扬声器图标的时候，感觉这个"虚拟小智"真的有了一点灵魂。

// Zui直觉的方案是"浏览器直连小智服务器”，但这条路被浏览器的安全策略封死了：小智服务器要求客户端在HTTP Header里携带Device-IdClient-IdAuthorization等自定义Header，而浏览器的WebSocket API不允许设置自定义请求Header。于是我开始思考——Neng不Neng让浏览器本身成为一台"虚拟小智"？理想状态是：打开一个网页，点击"连接”，就Neng像一台真实小智设备一样与AI服务对话——有情感表情变化、有语音识别、有TTS播放，还Neng随时打断。你kan，这样的体验多棒啊！不过这个需要用户付费才Neng体验，不说开发费用，仅仅服务器费用dou不容易啊，觉得有用，赞助一下吧。不提了不说了下次再见！拜拜！😊👋💻📱💸😊好了就这样吧，我下线了哈，再见各位老铁们，多多关注我哦，保证不迷路🤗🤗🤗.