喵音Live2是一款聚焦语音社交的直播平台,核心功能覆盖三大场景:
1. 多元化直播房间:支持单人语音秀、多人连麦(最多9人同时互动)、主题聊天室等模式,主播可设置房间标签(如“声优陪聊”“音乐分享”“情感倾诉”),用户按兴趣精准匹配。
2. 沉浸式互动体系:内置实时弹幕(支持个性化字体与颜色设置)、语音礼物(触发动画特效)、AI降噪功能,通过算法过滤环境杂音,确保远距离收音清晰;同时提供“举手连麦”“麦序排队”机制,规范互动秩序。
3. 生态化辅助功能:包含直播预约、回放录制、主播数据看板(在线人数、互动率统计),以及社交模块(关注主播、私信聊天、粉丝群组建),实现“直播-沉淀-复访”闭环。
前端开发核心职责
作为核心前端工程师,我主导了以下关键模块的设计与实现:
1. 直播核心页面开发:基于Vue 3 + Vite搭建项目架构,采用Pinia管理房间状态,开发直播主页的“标签化房间列表”(使用Grid布局适配多端),通过虚拟列表优化万级房间数据渲染卡顿问题。
2. 实时互动功能落地:利用WebSocket实现弹幕的即时收发与广播,结合Web Audio API开发语音录制与降噪组件,通过MediaRecorder API处理连麦音频流,适配Chrome、Safari等多浏览器兼容性 。
3. 性能与体验优化:针对直播页加载慢问题,实施“路由懒加载+CDN静态资源分发”,将首屏加载时间从3.2s压缩至1.8s;设计礼物动画的Canvas渲染方案,避免高频DOM操作导致的页面掉帧。
4. 跨端适配与工程化:通过Flex布局与媒体查询实现PC端与移动端H5的一致体验,引入ESLint + Husky规范代码风格,搭建GitLab CI/CD流水线实现自动化部署,线上BUG率降低70%。