diff --git a/.github/workflows/docker-build.yml b/.github/workflows/docker-build.yml
new file mode 100644
index 0000000..043447c
--- /dev/null
+++ b/.github/workflows/docker-build.yml
@@ -0,0 +1,56 @@
+name: Build and Push Docker Image
+
+on:
+  push:
+    branches: [ main ]
+    tags:
+      - 'v*'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: gmij/audio3a
+          tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            type=sha,prefix={{branch}}-
+            type=raw,value=latest,enable={{is_default_branch}}
+      
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./samples/Audio3A.WebApi/Dockerfile
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+      
+      - name: Image digest
+        run: echo ${{ steps.docker_build.outputs.digest }}
diff --git a/docs/AUDIO_RECORDING.md b/docs/AUDIO_RECORDING.md
new file mode 100644
index 0000000..c224bea
--- /dev/null
+++ b/docs/AUDIO_RECORDING.md
@@ -0,0 +1,296 @@
+# 音频录制和下载功能说明
+
+## 概述
+
+在通话界面新增了音频录制和下载功能，用户可以录制整个通话过程，并分别下载原声和经过 3A 处理后的音频。
+
+## 功能特性
+
+### 录制功能
+- ✅ 实时录制通话音频
+- ✅ 同时录制原声和处理后音频
+- ✅ 可随时开始/停止录制
+- ✅ 录制状态可视化（脉冲动画）
+
+### 下载功能
+- ✅ 下载原声音频（麦克风直接输入）
+- ✅ 下载净化后音频（经过 3A 处理）
+- ✅ 自动生成带时间戳的文件名
+- ✅ WebM 格式（Opus 编解码器）
+
+## 使用指南
+
+### 1. 进入通话
+
+首先创建或加入一个房间，进入通话界面。
+
+### 2. 开始录制
+
+点击控制栏中的**录制按钮**（摄像机图标）：
+- 按钮会变为红色
+- 显示脉冲动画表示正在录制
+- 此时会同时录制两路音频流
+
+### 3. 停止录制
+
+再次点击录制按钮停止录制：
+- 按钮恢复正常颜色
+- 动画停止
+- 录制的音频已保存在浏览器内存中
+
+### 4. 下载音频
+
+点击**下载按钮**（向下箭头图标），从下拉菜单选择：
+
+**选项 1：下载原声音频**
+- 文件名：`input-audio-YYYYMMDD-HHmmss.webm`
+- 内容：麦克风直接采集的原始音频
+- 包含：环境噪声、回声、音量波动等
+
+**选项 2：下载净化后音频**
+- 文件名：`processed-audio-YYYYMMDD-HHmmss.webm`
+- 内容：经过 3A 处理的音频
+- 效果：回声消除、噪声抑制、自动增益控制
+
+## 界面说明
+
+### 控制按钮布局
+
+通话界面底部控制栏（从左到右）：
+
+1. **静音按钮** 🎤
+   - 功能：切换麦克风静音
+   - 状态：静音时显示红色
+
+2. **录制按钮** 📹
+   - 功能：开始/停止录制
+   - 状态：录制中显示红色脉冲动画
+
+3. **挂断按钮** 📞
+   - 功能：结束通话
+   - 样式：红色大按钮
+
+4. **下载按钮** ⬇️
+   - 功能：下载录制的音频
+   - 状态：未录制时禁用（灰色）
+
+5. **设置按钮** ⚙️
+   - 功能：预留（暂未实现）
+   - 状态：禁用
+
+### 视觉反馈
+
+**录制中**：
+- 录制按钮背景变红
+- 脉冲动画（淡入淡出效果）
+- 清晰提示正在录制状态
+
+**录制完成**：
+- 下载按钮从禁用变为可用
+- 可以重复录制（会覆盖之前的录音）
+
+## 技术实现
+
+### 架构
+
+```
+麦克风输入
+    ↓
+Web Audio API
+    ├─→ 原始音频流 → MediaRecorder → 原声录音
+    └─→ 3A 处理 → MediaStreamDestination → MediaRecorder → 净化后录音
+```
+
+### 使用的 API
+
+1. **MediaRecorder API**
+   - 用途：录制音频流
+   - 编码：audio/webm (Opus codec)
+   - 参数：每 100ms 收集一次数据
+
+2. **Web Audio API**
+   - 用途：创建音频处理图
+   - ScriptProcessor：处理音频数据
+   - MediaStreamDestination：导出处理后的音频流
+
+3. **JavaScript Interop**
+   - Blazor 与 JavaScript 通信
+   - 控制录制状态
+   - 触发下载操作
+
+### 文件格式
+
+- **格式**：WebM
+- **编解码器**：Opus
+- **采样率**：取决于浏览器和麦克风设置
+- **声道**：单声道（Mono）
+- **比特率**：自动调整
+
+## 浏览器兼容性
+
+### 支持的浏览器
+
+| 浏览器 | 版本要求 | MediaRecorder | Web Audio API |
+|--------|---------|---------------|---------------|
+| Chrome | 49+ | ✅ | ✅ |
+| Edge | 79+ | ✅ | ✅ |
+| Firefox | 25+ | ✅ | ✅ |
+| Safari | 14.1+ | ✅ | ✅ |
+| Opera | 36+ | ✅ | ✅ |
+
+### 已知限制
+
+1. **iOS Safari**
+   - 需要用户手势才能开始录制
+   - WebM 支持可能受限（Safari 14.1+）
+
+2. **移动浏览器**
+   - 可能需要额外的权限请求
+   - 某些设备可能不支持 Opus 编码
+
+3. **隐私模式**
+   - 某些浏览器在隐私模式下可能限制音频录制
+
+## 使用场景
+
+### 1. 会议记录
+- 录制完整会议内容
+- 对比 3A 处理效果
+- 事后回顾讨论内容
+
+### 2. 音频质量测试
+- 测试 3A 算法效果
+- 对比原声和处理后的差异
+- 优化音频处理参数
+
+### 3. 培训和演示
+- 录制演示内容
+- 提供清晰的音频材料
+- 展示 3A 处理能力
+
+### 4. 故障诊断
+- 记录音频问题
+- 分析噪声来源
+- 测试不同环境下的表现
+
+## 性能考虑
+
+### 内存使用
+
+- 录制时音频数据存储在浏览器内存
+- 长时间录制会占用较多内存
+- 建议录制时长不超过 30 分钟
+
+### 文件大小
+
+估算公式（Opus @ 48kHz）：
+- 比特率：约 24-32 kbps（单声道）
+- 1 分钟：约 180-240 KB
+- 10 分钟：约 1.8-2.4 MB
+- 30 分钟：约 5.4-7.2 MB
+
+### 优化建议
+
+1. **定期下载**
+   - 长时间通话时分段录制
+   - 及时下载释放内存
+
+2. **监控内存**
+   - 注意浏览器内存警告
+   - 必要时停止录制
+
+3. **网络影响**
+   - 录制在本地进行，不占用网络
+   - 下载也是本地操作
+
+## 故障排查
+
+### 无法开始录制
+
+**症状**：点击录制按钮无反应
+
+**解决方法**：
+1. 检查麦克风权限是否已授予
+2. 确认已成功进入通话
+3. 查看浏览器控制台错误信息
+4. 尝试刷新页面重新进入
+
+### 下载按钮禁用
+
+**症状**：无法点击下载按钮
+
+**原因**：未进行过录制
+
+**解决方法**：
+1. 先点击录制按钮开始录制
+2. 等待一段时间
+3. 停止录制
+4. 下载按钮会变为可用
+
+### 下载的文件无法播放
+
+**症状**：下载的 WebM 文件播放失败
+
+**解决方法**：
+1. 使用支持 WebM 的播放器（VLC、Chrome）
+2. 转换为 MP3 格式（使用 FFmpeg）：
+   ```bash
+   ffmpeg -i input-audio.webm -codec:a libmp3lame output.mp3
+   ```
+3. 检查文件大小（如果为 0 说明录制失败）
+
+### 音频质量问题
+
+**症状**：录制的音频质量差
+
+**解决方法**：
+1. 检查麦克风质量
+2. 确保良好的网络环境
+3. 启用 3A 处理功能
+4. 调整麦克风音量和位置
+
+## 隐私和安全
+
+### 数据存储
+
+- ✅ 所有录制在浏览器本地完成
+- ✅ 音频数据不会上传到服务器
+- ✅ 下载后立即从内存清除
+- ✅ 关闭页面会丢失未下载的录音
+
+### 权限要求
+
+- 麦克风访问权限
+- 文件下载权限（某些浏览器）
+
+### 最佳实践
+
+1. **告知参与者**
+   - 在开始录制前通知其他参与者
+   - 遵守隐私法规（如 GDPR）
+
+2. **安全存储**
+   - 下载后的文件妥善保管
+   - 考虑加密敏感内容
+
+3. **及时删除**
+   - 不需要的录音及时删除
+   - 避免长期保存敏感对话
+
+## 未来改进
+
+计划中的功能：
+
+- [ ] 支持更多音频格式（MP3、AAC）
+- [ ] 云端存储集成
+- [ ] 自动分段录制
+- [ ] 录音质量设置
+- [ ] 音频编辑功能
+- [ ] 转录服务集成
+
+## 参考资料
+
+- [MediaRecorder API](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder)
+- [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
+- [WebM 格式规范](https://www.webmproject.org/)
+- [Opus 编解码器](https://opus-codec.org/)
diff --git a/docs/DOCKER.md b/docs/DOCKER.md
new file mode 100644
index 0000000..cec77c6
--- /dev/null
+++ b/docs/DOCKER.md
@@ -0,0 +1,227 @@
+# Docker 部署指南
+
+本文档介绍如何使用 Docker 部署 Audio3A WebAPI 服务。
+
+## 快速开始
+
+### 使用预构建镜像
+
+从 Docker Hub 拉取并运行：
+
+```bash
+docker pull gmij/audio3a:latest
+docker run -d -p 8080:80 --name audio3a-api gmij/audio3a:latest
+```
+
+访问 `http://localhost:8080/swagger` 查看 API 文档。
+
+### 本地构建
+
+从源码构建镜像：
+
+```bash
+# 在项目根目录执行
+docker build -t audio3a-api -f samples/Audio3A.WebApi/Dockerfile .
+
+# 运行容器
+docker run -d -p 8080:80 --name audio3a-api audio3a-api
+```
+
+## 环境变量配置
+
+可以通过环境变量配置服务：
+
+```bash
+docker run -d -p 8080:80 \
+  -e ASPNETCORE_ENVIRONMENT=Production \
+  -e ASPNETCORE_URLS=http://+:80 \
+  --name audio3a-api \
+  gmij/audio3a:latest
+```
+
+### 常用环境变量
+
+| 变量名 | 默认值 | 说明 |
+|--------|--------|------|
+| `ASPNETCORE_ENVIRONMENT` | Production | 运行环境（Development/Production） |
+| `ASPNETCORE_URLS` | http://+:80 | 监听地址和端口 |
+
+## Docker Compose
+
+使用 Docker Compose 部署完整服务栈：
+
+```yaml
+version: '3.8'
+
+services:
+  audio3a-api:
+    image: gmij/audio3a:latest
+    ports:
+      - "8080:80"
+    environment:
+      - ASPNETCORE_ENVIRONMENT=Production
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost/swagger"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+```
+
+保存为 `docker-compose.yml` 后运行：
+
+```bash
+docker-compose up -d
+```
+
+## 持久化数据
+
+如果需要持久化数据，可以挂载卷：
+
+```bash
+docker run -d -p 8080:80 \
+  -v audio3a-data:/app/data \
+  --name audio3a-api \
+  gmij/audio3a:latest
+```
+
+## 健康检查
+
+检查容器状态：
+
+```bash
+# 查看容器日志
+docker logs audio3a-api
+
+# 检查容器状态
+docker ps | grep audio3a-api
+
+# 测试 API 可用性
+curl http://localhost:8080/api/rooms/stats
+```
+
+## 生产环境部署
+
+### 使用 HTTPS
+
+推荐使用反向代理（如 Nginx 或 Traefik）提供 HTTPS：
+
+```nginx
+server {
+    listen 443 ssl http2;
+    server_name api.audio3a.example.com;
+
+    ssl_certificate /path/to/cert.pem;
+    ssl_certificate_key /path/to/key.pem;
+
+    location / {
+        proxy_pass http://localhost:8080;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
+```
+
+### 资源限制
+
+限制容器资源使用：
+
+```bash
+docker run -d \
+  -p 8080:80 \
+  --memory="512m" \
+  --cpus="1.0" \
+  --name audio3a-api \
+  gmij/audio3a:latest
+```
+
+### 自动重启
+
+设置容器自动重启策略：
+
+```bash
+docker run -d \
+  -p 8080:80 \
+  --restart=unless-stopped \
+  --name audio3a-api \
+  gmij/audio3a:latest
+```
+
+## 故障排查
+
+### 容器无法启动
+
+```bash
+# 查看详细日志
+docker logs --tail 100 audio3a-api
+
+# 进入容器检查
+docker exec -it audio3a-api /bin/bash
+```
+
+### 端口冲突
+
+如果 8080 端口被占用，更改映射端口：
+
+```bash
+docker run -d -p 9090:80 --name audio3a-api gmij/audio3a:latest
+```
+
+### 性能问题
+
+监控容器资源使用：
+
+```bash
+docker stats audio3a-api
+```
+
+## 镜像标签说明
+
+| 标签 | 说明 |
+|------|------|
+| `latest` | main 分支最新版本 |
+| `v1.0.0` | 特定版本号 |
+| `main-abc1234` | 分支名+提交 SHA |
+
+## 清理
+
+停止并删除容器：
+
+```bash
+docker stop audio3a-api
+docker rm audio3a-api
+```
+
+删除镜像：
+
+```bash
+docker rmi gmij/audio3a:latest
+```
+
+清理未使用的镜像和卷：
+
+```bash
+docker system prune -a
+```
+
+## CI/CD 集成
+
+GitHub Actions 会自动构建和推送镜像到 Docker Hub。
+
+**触发条件**：
+- 推送到 main 分支
+- 创建版本标签（如 `v1.0.0`）
+- 手动触发 workflow
+
+**所需配置**：
+在 GitHub Repository Settings → Secrets 中添加：
+- `DOCKERHUB_USERNAME` - Docker Hub 用户名
+- `DOCKERHUB_TOKEN` - Docker Hub 访问令牌
+
+## 参考资料
+
+- [Docker 官方文档](https://docs.docker.com/)
+- [ASP.NET Core Docker 部署](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/docker/)
+- [Docker Compose 文档](https://docs.docker.com/compose/)
diff --git a/docs/NEW_FEATURES.md b/docs/NEW_FEATURES.md
new file mode 100644
index 0000000..dad8a10
--- /dev/null
+++ b/docs/NEW_FEATURES.md
@@ -0,0 +1,74 @@
+# 新增功能说明
+
+## 概述
+
+本次更新实现了两个主要功能：
+
+1. **服务端房间管理集成** - 将 Web 前端从浏览器内存模拟切换到真实的 WebAPI 后端
+2. **实时波形可视化** - 在通话界面显示输入音频和 3A 处理后的波形图
+
+## 1. 服务端房间管理
+
+### 功能描述
+
+之前的 Web 应用使用 `MockApiService` 在浏览器内存中模拟房间管理功能，现在已经升级支持连接真实的 WebAPI 后端服务。
+
+### 配置方式
+
+#### appsettings.json
+
+```json
+{
+  "ApiBaseUrl": "https://localhost:7063",
+  "UseMockApi": false
+}
+```
+
+**配置项说明**：
+- `ApiBaseUrl`: WebAPI 后端地址
+- `UseMockApi`: 
+  - `false` - 使用真实 API（连接服务端，默认）
+  - `true` - 使用 Mock API（浏览器内存，用于 GitHub Pages）
+
+## 2. 实时波形可视化
+
+### 功能描述
+
+在语音通话界面显示两个实时波形图：
+- **输入音频波形**（蓝色）- 显示从麦克风采集的原始音频
+- **3A 处理后波形**（绿色）- 显示经过回声消除、增益控制、噪声抑制后的音频
+
+### 使用效果
+
+1. **启动通话**：点击"开始通话"按钮
+2. **授权麦克风**：浏览器会请求麦克风权限
+3. **查看波形**：
+   - 上方显示输入音频的实时波形（蓝色）
+   - 下方显示 3A 处理后的波形（绿色）
+4. **静音功能**：点击静音按钮时，波形停止更新
+
+## 部署说明
+
+### 开发环境（本地测试）
+
+1. 修改 `samples/Audio3A.Web/wwwroot/appsettings.json`：
+   ```json
+   {
+     "ApiBaseUrl": "https://localhost:7063",
+     "UseMockApi": false
+   }
+   ```
+
+2. 启动服务：
+   ```bash
+   # 终端 1
+   cd samples/Audio3A.WebApi
+   dotnet run
+
+   # 终端 2
+   cd samples/Audio3A.Web
+   dotnet run
+   ```
+
+3. 访问 `https://localhost:5001`
+
diff --git a/samples/Audio3A.Web/Components/WaveformVisualizer.razor b/samples/Audio3A.Web/Components/WaveformVisualizer.razor
new file mode 100644
index 0000000..5ed04b8
--- /dev/null
+++ b/samples/Audio3A.Web/Components/WaveformVisualizer.razor
@@ -0,0 +1,121 @@
+@using Microsoft.JSInterop
+
+<div class="waveform-container">
+    <canvas @ref="_canvasRef" width="@Width" height="@Height" class="waveform-canvas"></canvas>
+    @if (!string.IsNullOrEmpty(Label))
+    {
+        <div class="waveform-label">@Label</div>
+    }
+</div>
+
+<style>
+    .waveform-container {
+        position: relative;
+        background: rgba(0, 0, 0, 0.1);
+        border-radius: 8px;
+        overflow: hidden;
+    }
+
+    .waveform-canvas {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+
+    .waveform-label {
+        position: absolute;
+        top: 8px;
+        left: 12px;
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 12px;
+        font-weight: 500;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+        pointer-events: none;
+    }
+</style>
+
+@code {
+    [Parameter]
+    public int Width { get; set; } = 800;
+
+    [Parameter]
+    public int Height { get; set; } = 120;
+
+    [Parameter]
+    public string? Label { get; set; }
+
+    [Parameter]
+    public string Color { get; set; } = "#52c41a";
+
+    [Parameter]
+    public string BackgroundColor { get; set; } = "rgba(0, 0, 0, 0.5)";
+
+    [Inject]
+    private IJSRuntime JSRuntime { get; set; } = null!;
+
+    private ElementReference _canvasRef;
+    private IJSObjectReference? _module;
+    private DotNetObjectReference<WaveformVisualizer>? _objRef;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            try
+            {
+                _objRef = DotNetObjectReference.Create(this);
+                _module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./js/waveform.js");
+                await _module.InvokeVoidAsync("initWaveform", _canvasRef, Width, Height, Color, BackgroundColor);
+            }
+            catch (Exception ex)
+            {
+                Console.WriteLine($"Failed to initialize waveform: {ex.Message}");
+            }
+        }
+    }
+
+    /// <summary>
+    /// 更新波形数据
+    /// </summary>
+    public async Task UpdateWaveformAsync(float[] data)
+    {
+        if (_module != null)
+        {
+            try
+            {
+                await _module.InvokeVoidAsync("updateWaveform", _canvasRef, data);
+            }
+            catch (Exception ex)
+            {
+                Console.WriteLine($"Failed to update waveform: {ex.Message}");
+            }
+        }
+    }
+
+    /// <summary>
+    /// 更新波形数据（byte array）
+    /// </summary>
+    public async Task UpdateWaveformAsync(byte[] data)
+    {
+        if (_module != null)
+        {
+            try
+            {
+                await _module.InvokeVoidAsync("updateWaveformFromBytes", _canvasRef, data);
+            }
+            catch (Exception ex)
+            {
+                Console.WriteLine($"Failed to update waveform from bytes: {ex.Message}");
+            }
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_module != null)
+        {
+            await _module.DisposeAsync();
+        }
+        _objRef?.Dispose();
+    }
+}
diff --git a/samples/Audio3A.Web/Pages/Call.razor b/samples/Audio3A.Web/Pages/Call.razor
index 60283c5..ba3e8e5 100644
--- a/samples/Audio3A.Web/Pages/Call.razor
+++ b/samples/Audio3A.Web/Pages/Call.razor
@@ -1,5 +1,6 @@
 @page "/call/{RoomId}/{ParticipantId}"
-@inject MockApiService MockApi
+@using Audio3A.Web.Components
+@inject IApiService ApiService
 @inject AudioCallService AudioService
 @inject NavigationManager Navigation
 @inject IMessageService Message
@@ -25,6 +26,26 @@
             </div>
         </div>
 
+        <!-- 波形可视化区域 -->
+        <div class="waveform-section">
+            <div class="waveform-row">
+                <WaveformVisualizer @ref="_inputWaveform" 
+                                  Width="800" 
+                                  Height="100" 
+                                  Label="输入音频波形"
+                                  Color="#1890ff"
+                                  BackgroundColor="rgba(0, 0, 0, 0.3)" />
+            </div>
+            <div class="waveform-row">
+                <WaveformVisualizer @ref="_processedWaveform" 
+                                  Width="800" 
+                                  Height="100" 
+                                  Label="3A 处理后波形"
+                                  Color="#52c41a"
+                                  BackgroundColor="rgba(0, 0, 0, 0.3)" />
+            </div>
+        </div>
+
         <div class="call-main">
             <!-- 本地用户 -->
             <div class="participant-card local">
@@ -61,6 +82,14 @@
                 <Icon Type="@(AudioService.IsMuted ? "audio-muted" : "audio")" Theme="outline" />
             </Button>
 
+            <Button Type="@ButtonType.Default" 
+                    Shape="circle" 
+                    Size="large"
+                    OnClick="ToggleRecording"
+                    Style="@GetRecordButtonStyle()">
+                <Icon Type="@(AudioService.IsRecording ? "pause-circle" : "video-camera")" Theme="outline" />
+            </Button>
+
             <Button Type="@ButtonType.Primary" 
                     Danger
                     Shape="circle" 
@@ -70,6 +99,29 @@
                 <Icon Type="phone" Theme="outline" Rotate="135" />
             </Button>
 
+            <Dropdown Trigger="@(new Trigger[] { Trigger.Click })" Disabled="@(!_hasRecordedAudio)">
+                <Overlay>
+                    <Menu>
+                        <MenuItem OnClick="DownloadInputAudio">
+                            <Icon Type="download" Theme="outline" />
+                            下载原声音频
+                        </MenuItem>
+                        <MenuItem OnClick="DownloadProcessedAudio">
+                            <Icon Type="download" Theme="outline" />
+                            下载净化后音频
+                        </MenuItem>
+                    </Menu>
+                </Overlay>
+                <ChildContent>
+                    <Button Type="@ButtonType.Default" 
+                            Shape="circle" 
+                            Size="large"
+                            Disabled="@(!_hasRecordedAudio)">
+                        <Icon Type="download" Theme="outline" />
+                    </Button>
+                </ChildContent>
+            </Dropdown>
+
             <Button Type="@ButtonType.Default" 
                     Shape="circle" 
                     Size="large"
@@ -103,6 +155,19 @@
         color: rgba(255, 255, 255, 0.9);
     }
 
+    .waveform-section {
+        padding: 16px 24px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .waveform-row {
+        width: 100%;
+        max-width: 800px;
+        margin: 0 auto;
+    }
+
     .call-main {
         flex: 1;
         display: flex;
@@ -155,6 +220,15 @@
         margin-top: 16px;
         font-size: 16px;
     }
+
+    @@keyframes pulse {
+        0%, 100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.6;
+        }
+    }
 </style>
 
 @code {
@@ -164,11 +238,16 @@
     [Parameter]
     public string? ParticipantId { get; set; }
 
-    private MockApiService.RoomDetailInfo? _room;
+    private RoomDetailInfo? _room;
     private string _participantName = "";
     private float _audioLevel = 0;
     private TimeSpan _callDuration = TimeSpan.Zero;
     private System.Timers.Timer? _timer;
+    private bool _hasRecordedAudio = false;
+    
+    // 波形可视化组件引用
+    private WaveformVisualizer? _inputWaveform;
+    private WaveformVisualizer? _processedWaveform;
 
     protected override async Task OnInitializedAsync()
     {
@@ -177,7 +256,7 @@
         // 加载房间信息
         if (!string.IsNullOrEmpty(RoomId))
         {
-            _room = await MockApi.GetRoom(RoomId);
+            _room = await ApiService.GetRoom(RoomId);
             Console.WriteLine($"Call.razor: Room loaded - {_room?.Name}, Participants={_room?.Participants.Count}");
             
             if (_room != null)
@@ -201,6 +280,8 @@
 
                 // 注册事件
                 AudioService.OnAudioLevel += OnAudioLevel;
+                AudioService.OnInputWaveform += OnInputWaveform;
+                AudioService.OnProcessedWaveform += OnProcessedWaveform;
                 AudioService.OnError += OnError;
                 Console.WriteLine("Call.razor: Event handlers registered");
 
@@ -236,12 +317,86 @@
         });
     }
 
+    private void OnInputWaveform(byte[] waveformData)
+    {
+        InvokeAsync(async () =>
+        {
+            if (_inputWaveform != null)
+            {
+                await _inputWaveform.UpdateWaveformAsync(waveformData);
+            }
+        });
+    }
+
+    private void OnProcessedWaveform(byte[] waveformData)
+    {
+        InvokeAsync(async () =>
+        {
+            if (_processedWaveform != null)
+            {
+                await _processedWaveform.UpdateWaveformAsync(waveformData);
+            }
+        });
+    }
+
     private async Task ToggleMute()
     {
         await AudioService.ToggleMuteAsync();
         await InvokeAsync(StateHasChanged);
     }
 
+    private async Task ToggleRecording()
+    {
+        if (AudioService.IsRecording)
+        {
+            var stopped = await AudioService.StopRecordingAsync();
+            if (stopped)
+            {
+                _hasRecordedAudio = true;
+                await Message.Success("录制已停止");
+            }
+        }
+        else
+        {
+            var started = await AudioService.StartRecordingAsync();
+            if (started)
+            {
+                await Message.Info("开始录制音频...");
+            }
+            else
+            {
+                await Message.Error("无法开始录制");
+            }
+        }
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task DownloadInputAudio()
+    {
+        var success = await AudioService.DownloadInputAudioAsync();
+        if (success)
+        {
+            await Message.Success("原声音频下载成功");
+        }
+        else
+        {
+            await Message.Error("下载失败，请先录制音频");
+        }
+    }
+
+    private async Task DownloadProcessedAudio()
+    {
+        var success = await AudioService.DownloadProcessedAudioAsync();
+        if (success)
+        {
+            await Message.Success("净化后音频下载成功");
+        }
+        else
+        {
+            await Message.Error("下载失败，请先录制音频");
+        }
+    }
+
     private async Task EndCall()
     {
         _timer?.Stop();
@@ -249,7 +404,7 @@
         
         if (!string.IsNullOrEmpty(RoomId) && !string.IsNullOrEmpty(ParticipantId))
         {
-            await MockApi.LeaveRoom(RoomId, ParticipantId);
+            await ApiService.LeaveRoom(RoomId, ParticipantId);
         }
 
         Navigation.NavigateTo(Navigation.ToAbsoluteUri("rooms").ToString(), forceLoad: false);
@@ -267,11 +422,18 @@
         return AudioService.IsMuted ? "background-color: #ff4d4f; color: white;" : "";
     }
 
+    private string GetRecordButtonStyle()
+    {
+        return AudioService.IsRecording ? "background-color: #ff4d4f; color: white; animation: pulse 1.5s infinite;" : "";
+    }
+
     public async ValueTask DisposeAsync()
     {
         _timer?.Dispose();
 
         AudioService.OnAudioLevel -= OnAudioLevel;
+        AudioService.OnInputWaveform -= OnInputWaveform;
+        AudioService.OnProcessedWaveform -= OnProcessedWaveform;
         AudioService.OnError -= OnError;
 
         if (AudioService.IsConnected)
diff --git a/samples/Audio3A.Web/Pages/CreateRoom.razor b/samples/Audio3A.Web/Pages/CreateRoom.razor
index d7e9aff..6a8489f 100644
--- a/samples/Audio3A.Web/Pages/CreateRoom.razor
+++ b/samples/Audio3A.Web/Pages/CreateRoom.razor
@@ -1,5 +1,5 @@
 @page "/rooms/create"
-@inject MockApiService MockApi
+@inject IApiService ApiService
 @inject NavigationManager Navigation
 @inject IMessageService Message
 
@@ -82,7 +82,7 @@
         _submitting = true;
         try
         {
-            var room = await MockApi.CreateRoom(
+            var room = await ApiService.CreateRoom(
                 _model.Name,
                 _model.MaxParticipants,
                 _model.EnableAec,
@@ -90,7 +90,7 @@
                 _model.EnableAns
             );
 
-            await Message.Success($"房间创建成功！邀请码: {room.InviteCode}");
+            await Message.Success("房间创建成功！");
             Navigation.NavigateTo(Navigation.ToAbsoluteUri($"rooms/{room.Id}").ToString(), forceLoad: false);
         }
         catch (Exception ex)
diff --git a/samples/Audio3A.Web/Pages/Home.razor b/samples/Audio3A.Web/Pages/Home.razor
index de06189..2e956ba 100644
--- a/samples/Audio3A.Web/Pages/Home.razor
+++ b/samples/Audio3A.Web/Pages/Home.razor
@@ -1,5 +1,5 @@
-@page "/"
-@inject MockApiService MockApi
+@page "/"
+@inject IApiService ApiService
 
 <PageTitle>控制台 - Audio3A</PageTitle>
 
@@ -77,7 +77,7 @@
     {
         try
         {
-            var stats = await MockApi.GetStats();
+            var stats = await ApiService.GetStats();
             _stats = new Stats
             {
                 TotalRooms = stats.TotalRooms,
diff --git a/samples/Audio3A.Web/Pages/RoomDetail.razor b/samples/Audio3A.Web/Pages/RoomDetail.razor
index 94d7f09..5a3cffb 100644
--- a/samples/Audio3A.Web/Pages/RoomDetail.razor
+++ b/samples/Audio3A.Web/Pages/RoomDetail.razor
@@ -1,6 +1,6 @@
 @page "/rooms/{RoomId}"
 @page "/join/{InviteCode}"
-@inject MockApiService MockApi
+@inject IApiService ApiService
 @inject NavigationManager Navigation
 @inject IMessageService Message
 
@@ -97,7 +97,7 @@ else
         }
         else
         {
-            <Table TItem="MockApiService.ParticipantInfo" DataSource="@_room.Participants" Size="TableSize.Small">
+            <Table TItem="ParticipantInfo" DataSource="@_room.Participants" Size="TableSize.Small">
                 <Column Title="名称" @bind-Field="@context.Name" />
                 <Column Title="状态" @bind-Field="@context.State">
                     <Badge Status="@(context.State == "Connected" ? "success" : "default")" Text="@context.State" />
@@ -140,7 +140,7 @@ else
         public string Name { get; set; } = string.Empty;
     }
 
-    private MockApiService.RoomDetailInfo? _room;
+    private RoomDetailInfo? _room;
     private JoinRoomModel _joinModel = new();
     private bool _loading = true;
     private bool _joining = false;
@@ -157,19 +157,12 @@ else
         _loading = true;
         try
         {
-            if (!string.IsNullOrEmpty(InviteCode))
+            if (!string.IsNullOrEmpty(RoomId))
             {
-                // 通过邀请码加入
-                _room = await MockApi.GetRoomByInviteCode(InviteCode);
-                if (_room != null)
-                {
-                    RoomId = _room.Id;
-                }
-            }
-            else if (!string.IsNullOrEmpty(RoomId))
-            {
-                _room = await MockApi.GetRoom(RoomId);
+                _room = await ApiService.GetRoom(RoomId);
             }
+            // 注意：Real API 不支持通过 InviteCode 查找房间
+            // InviteCode 功能仅在 Mock API 中可用（用于 GitHub Pages 演示）
         }
         catch
         {
@@ -198,7 +191,7 @@ else
         _joining = true;
         try
         {
-            var participant = await MockApi.JoinRoom(RoomId, _joinModel.Name);
+            var participant = await ApiService.JoinRoom(RoomId, _joinModel.Name);
             if (participant != null)
             {
                 _currentParticipantId = participant.Id;
@@ -236,7 +229,7 @@ else
 
         try
         {
-            await MockApi.LeaveRoom(RoomId, participantId);
+            await ApiService.LeaveRoom(RoomId, participantId);
             await Message.Success("参与者已移除");
             await LoadRoom();
         }
diff --git a/samples/Audio3A.Web/Pages/Rooms.razor b/samples/Audio3A.Web/Pages/Rooms.razor
index 6c7099a..7f594e6 100644
--- a/samples/Audio3A.Web/Pages/Rooms.razor
+++ b/samples/Audio3A.Web/Pages/Rooms.razor
@@ -1,5 +1,5 @@
 @page "/rooms"
-@inject MockApiService MockApi
+@inject IApiService ApiService
 @inject NavigationManager Navigation
 @inject IMessageService Message
 
@@ -71,7 +71,7 @@ else
 }
 
 @code {
-    private List<MockApiService.RoomInfo> _rooms = new();
+    private List<RoomInfo> _rooms = new();
     private bool _loading = true;
 
     protected override async Task OnInitializedAsync()
@@ -84,11 +84,11 @@ else
         _loading = true;
         try
         {
-            _rooms = await MockApi.GetRooms();
+            _rooms = await ApiService.GetRooms();
         }
         catch
         {
-            _rooms = new List<MockApiService.RoomInfo>();
+            _rooms = new List<RoomInfo>();
         }
         finally
         {
@@ -110,7 +110,7 @@ else
     {
         try
         {
-            await MockApi.DeleteRoom(roomId);
+            await ApiService.DeleteRoom(roomId);
             await Message.Success("房间已删除");
             await LoadRooms();
         }
diff --git a/samples/Audio3A.Web/Program.cs b/samples/Audio3A.Web/Program.cs
index bbbffab..fd5202a 100644
--- a/samples/Audio3A.Web/Program.cs
+++ b/samples/Audio3A.Web/Program.cs
@@ -10,13 +10,24 @@
 
 // 读取 API 配置
 var apiConfig = new ApiConfiguration();
+var useMockApi = false; // 默认使用真实 API
+
 try
 {
     var httpClient = new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) };
     var config = await httpClient.GetFromJsonAsync<Dictionary<string, string>>("appsettings.json");
-    if (config != null && config.ContainsKey("ApiBaseUrl"))
+    if (config != null)
     {
-        apiConfig.BaseUrl = config["ApiBaseUrl"];
+        if (config.ContainsKey("ApiBaseUrl"))
+        {
+            apiConfig.BaseUrl = config["ApiBaseUrl"];
+        }
+        
+        // 检查是否使用 Mock API（用于 GitHub Pages）
+        if (config.ContainsKey("UseMockApi") && bool.TryParse(config["UseMockApi"], out var shouldUseMock))
+        {
+            useMockApi = shouldUseMock;
+        }
     }
 }
 catch
@@ -39,7 +50,26 @@
 // Add Ant Design Blazor
 builder.Services.AddAntDesign();
 
-// Add Mock API Service (for GitHub Pages demo)
+// 根据配置注册 API 服务
+if (useMockApi)
+{
+    // 使用 Mock API（用于 GitHub Pages 演示）
+    builder.Services.AddSingleton<IApiService, MockApiService>();
+    Console.WriteLine("使用 Mock API 服务（客户端内存模拟）");
+}
+else
+{
+    // 使用真实 API（连接服务端）
+    builder.Services.AddScoped<IApiService>(sp =>
+    {
+        var httpClient = sp.GetRequiredService<HttpClient>();
+        var logger = sp.GetService<ILogger<RealApiService>>();
+        return new RealApiService(httpClient, logger);
+    });
+    Console.WriteLine($"使用真实 API 服务（连接到 {apiConfig.BaseUrl}）");
+}
+
+// 保留 MockApiService 的单独注册（向后兼容）
 builder.Services.AddSingleton<MockApiService>();
 
 // Add Audio Call Service
diff --git a/samples/Audio3A.Web/Services/AudioCallService.cs b/samples/Audio3A.Web/Services/AudioCallService.cs
index 7923407..bf74825 100644
--- a/samples/Audio3A.Web/Services/AudioCallService.cs
+++ b/samples/Audio3A.Web/Services/AudioCallService.cs
@@ -15,10 +15,13 @@ public class AudioCallService : IAsyncDisposable
     public event Action<string>? OnParticipantJoined;
     public event Action<string>? OnParticipantLeft;
     public event Action<string, float>? OnAudioLevel;
+    public event Action<byte[]>? OnInputWaveform;
+    public event Action<byte[]>? OnProcessedWaveform;
     public event Action<string>? OnError;
 
     public bool IsMuted { get; private set; }
     public bool IsConnected { get; private set; }
+    public bool IsRecording { get; private set; }
 
     public AudioCallService(IJSRuntime jsRuntime)
     {
@@ -122,6 +125,93 @@ public async Task ToggleMuteAsync()
         }
     }
 
+    /// <summary>
+    /// 开始录制音频
+    /// </summary>
+    public async Task<bool> StartRecordingAsync()
+    {
+        try
+        {
+            if (_module != null && IsConnected)
+            {
+                var result = await _module.InvokeAsync<bool>("startRecording");
+                IsRecording = result;
+                return result;
+            }
+            return false;
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Failed to start recording: {ex.Message}");
+            return false;
+        }
+    }
+
+    /// <summary>
+    /// 停止录制音频
+    /// </summary>
+    public async Task<bool> StopRecordingAsync()
+    {
+        try
+        {
+            if (_module != null && IsConnected)
+            {
+                var result = await _module.InvokeAsync<bool>("stopRecording");
+                if (result)
+                {
+                    IsRecording = false;
+                }
+                return result;
+            }
+            return false;
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Failed to stop recording: {ex.Message}");
+            return false;
+        }
+    }
+
+    /// <summary>
+    /// 下载输入音频
+    /// </summary>
+    public async Task<bool> DownloadInputAudioAsync(string? filename = null)
+    {
+        try
+        {
+            if (_module != null)
+            {
+                return await _module.InvokeAsync<bool>("downloadInputAudio", filename ?? $"input-audio-{DateTime.Now:yyyyMMdd-HHmmss}.webm");
+            }
+            return false;
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Failed to download input audio: {ex.Message}");
+            return false;
+        }
+    }
+
+    /// <summary>
+    /// 下载处理后音频
+    /// </summary>
+    public async Task<bool> DownloadProcessedAudioAsync(string? filename = null)
+    {
+        try
+        {
+            if (_module != null)
+            {
+                return await _module.InvokeAsync<bool>("downloadProcessedAudio", filename ?? $"processed-audio-{DateTime.Now:yyyyMMdd-HHmmss}.webm");
+            }
+            return false;
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Failed to download processed audio: {ex.Message}");
+            return false;
+        }
+    }
+
     // JavaScript 回调方法
     [JSInvokable]
     public void NotifyParticipantJoined(string participantId)
@@ -142,6 +232,18 @@ public void NotifyAudioLevel(string participantId, float level)
         OnAudioLevel?.Invoke(participantId, level);
     }
 
+    [JSInvokable]
+    public void NotifyInputWaveform(byte[] waveformData)
+    {
+        OnInputWaveform?.Invoke(waveformData);
+    }
+
+    [JSInvokable]
+    public void NotifyProcessedWaveform(byte[] waveformData)
+    {
+        OnProcessedWaveform?.Invoke(waveformData);
+    }
+
     [JSInvokable]
     public void NotifyError(string message)
     {
diff --git a/samples/Audio3A.Web/Services/IApiService.cs b/samples/Audio3A.Web/Services/IApiService.cs
new file mode 100644
index 0000000..176a31b
--- /dev/null
+++ b/samples/Audio3A.Web/Services/IApiService.cs
@@ -0,0 +1,84 @@
+namespace Audio3A.Web.Services;
+
+/// <summary>
+/// API 服务接口 - 统一 Mock 和 Real API 的接口
+/// </summary>
+public interface IApiService
+{
+    // 统计信息
+    Task<StatsData> GetStats();
+    
+    // 房间管理
+    Task<List<RoomInfo>> GetRooms();
+    Task<RoomDetailInfo?> GetRoom(string roomId);
+    Task<RoomData> CreateRoom(string name, int maxParticipants, bool enableAec, bool enableAgc, bool enableAns);
+    Task<bool> DeleteRoom(string roomId);
+    
+    // 参与者管理
+    Task<ParticipantData?> JoinRoom(string roomId, string name);
+    Task<bool> LeaveRoom(string roomId, string participantId);
+}
+
+// 共享数据模型
+public class StatsData
+{
+    public int TotalRooms { get; set; }
+    public int ActiveRooms { get; set; }
+    public int TotalParticipants { get; set; }
+}
+
+public class RoomInfo
+{
+    public string Id { get; set; } = string.Empty;
+    public string Name { get; set; } = string.Empty;
+    public string State { get; set; } = string.Empty;
+    public int ParticipantCount { get; set; }
+    public int MaxParticipants { get; set; }
+    public DateTime CreatedAt { get; set; }
+}
+
+public class RoomData
+{
+    public string Id { get; set; } = string.Empty;
+    public string Name { get; set; } = string.Empty;
+    public string State { get; set; } = string.Empty;
+    public int MaxParticipants { get; set; }
+    public DateTime CreatedAt { get; set; }
+    public bool EnableAec { get; set; }
+    public bool EnableAgc { get; set; }
+    public bool EnableAns { get; set; }
+}
+
+public class RoomDetailInfo
+{
+    public string Id { get; set; } = string.Empty;
+    public string Name { get; set; } = string.Empty;
+    public string State { get; set; } = string.Empty;
+    public int ParticipantCount { get; set; }
+    public int MaxParticipants { get; set; }
+    public DateTime CreatedAt { get; set; }
+    public string InviteCode { get; set; } = string.Empty;
+    public bool EnableAec { get; set; }
+    public bool EnableAgc { get; set; }
+    public bool EnableAns { get; set; }
+    public List<ParticipantInfo> Participants { get; set; } = new();
+}
+
+public class ParticipantInfo
+{
+    public string Id { get; set; } = string.Empty;
+    public string Name { get; set; } = string.Empty;
+    public string State { get; set; } = string.Empty;
+    public DateTime JoinedAt { get; set; }
+    public bool Enable3A { get; set; }
+}
+
+public class ParticipantData
+{
+    public string Id { get; set; } = string.Empty;
+    public string Name { get; set; } = string.Empty;
+    public string RoomId { get; set; } = string.Empty;
+    public string State { get; set; } = string.Empty;
+    public DateTime JoinedAt { get; set; } = DateTime.Now;
+    public bool Enable3A { get; set; }
+}
diff --git a/samples/Audio3A.Web/Services/MockApiService.cs b/samples/Audio3A.Web/Services/MockApiService.cs
index 3bf2135..e10dc76 100644
--- a/samples/Audio3A.Web/Services/MockApiService.cs
+++ b/samples/Audio3A.Web/Services/MockApiService.cs
@@ -6,12 +6,12 @@ namespace Audio3A.Web.Services;
 /// 模拟 API 服务（用于 GitHub Pages 演示）
 /// 在客户端内存中模拟服务器端 API 的功能
 /// </summary>
-public class MockApiService
+public class MockApiService : IApiService
 {
-    private readonly ConcurrentDictionary<string, RoomData> _rooms = new();
-    private readonly ConcurrentDictionary<string, ParticipantData> _participants = new();
+    private readonly ConcurrentDictionary<string, InternalRoomData> _rooms = new();
+    private readonly ConcurrentDictionary<string, InternalParticipantData> _participants = new();
 
-    public class RoomData
+    private class InternalRoomData
     {
         public string Id { get; set; } = Guid.NewGuid().ToString();
         public string Name { get; set; } = string.Empty;
@@ -34,7 +34,7 @@ private static string GenerateInviteCode()
         }
     }
 
-    public class ParticipantData
+    private class InternalParticipantData
     {
         public string Id { get; set; } = Guid.NewGuid().ToString();
         public string Name { get; set; } = string.Empty;
@@ -44,17 +44,10 @@ public class ParticipantData
         public bool Enable3A { get; set; }
     }
 
-    public class StatsData
-    {
-        public int TotalRooms { get; set; }
-        public int ActiveRooms { get; set; }
-        public int TotalParticipants { get; set; }
-    }
-
     // 创建房间
     public Task<RoomData> CreateRoom(string name, int maxParticipants, bool enableAec, bool enableAgc, bool enableAns)
     {
-        var room = new RoomData
+        var room = new InternalRoomData
         {
             Name = name,
             MaxParticipants = maxParticipants,
@@ -63,7 +56,17 @@ public Task<RoomData> CreateRoom(string name, int maxParticipants, bool enableAe
             EnableAns = enableAns
         };
         _rooms.TryAdd(room.Id, room);
-        return Task.FromResult(room);
+        return Task.FromResult(new RoomData
+        {
+            Id = room.Id,
+            Name = room.Name,
+            State = room.State,
+            MaxParticipants = room.MaxParticipants,
+            CreatedAt = room.CreatedAt,
+            EnableAec = room.EnableAec,
+            EnableAgc = room.EnableAgc,
+            EnableAns = room.EnableAns
+        });
     }
 
     // 获取所有房间
@@ -81,16 +84,6 @@ public Task<List<RoomInfo>> GetRooms()
         return Task.FromResult(rooms);
     }
 
-    public class RoomInfo
-    {
-        public string Id { get; set; } = string.Empty;
-        public string Name { get; set; } = string.Empty;
-        public string State { get; set; } = string.Empty;
-        public int ParticipantCount { get; set; }
-        public int MaxParticipants { get; set; }
-        public DateTime CreatedAt { get; set; }
-    }
-
     // 获取房间详情
     public Task<RoomDetailInfo?> GetRoom(string roomId)
     {
@@ -128,30 +121,6 @@ public class RoomInfo
         return Task.FromResult<RoomDetailInfo?>(detail);
     }
 
-    public class RoomDetailInfo
-    {
-        public string Id { get; set; } = string.Empty;
-        public string Name { get; set; } = string.Empty;
-        public string State { get; set; } = string.Empty;
-        public int ParticipantCount { get; set; }
-        public int MaxParticipants { get; set; }
-        public DateTime CreatedAt { get; set; }
-        public string InviteCode { get; set; } = string.Empty;
-        public bool EnableAec { get; set; }
-        public bool EnableAgc { get; set; }
-        public bool EnableAns { get; set; }
-        public List<ParticipantInfo> Participants { get; set; } = new();
-    }
-
-    public class ParticipantInfo
-    {
-        public string Id { get; set; } = string.Empty;
-        public string Name { get; set; } = string.Empty;
-        public string State { get; set; } = string.Empty;
-        public DateTime JoinedAt { get; set; }
-        public bool Enable3A { get; set; }
-    }
-
     // 通过邀请码查找房间
     public Task<RoomDetailInfo?> GetRoomByInviteCode(string inviteCode)
     {
@@ -186,7 +155,7 @@ public Task<bool> DeleteRoom(string roomId)
         if (room.MaxParticipants > 0 && room.ParticipantIds.Count >= room.MaxParticipants)
             return Task.FromResult<ParticipantData?>(null);
 
-        var participant = new ParticipantData
+        var participant = new InternalParticipantData
         {
             Name = name,
             RoomId = roomId,
@@ -196,7 +165,15 @@ public Task<bool> DeleteRoom(string roomId)
         _participants.TryAdd(participant.Id, participant);
         room.ParticipantIds.Add(participant.Id);
 
-        return Task.FromResult<ParticipantData?>(participant);
+        return Task.FromResult<ParticipantData?>(new ParticipantData
+        {
+            Id = participant.Id,
+            Name = participant.Name,
+            RoomId = participant.RoomId,
+            State = participant.State,
+            JoinedAt = participant.JoinedAt,
+            Enable3A = participant.Enable3A
+        });
     }
 
     // 离开房间
diff --git a/samples/Audio3A.Web/Services/RealApiService.cs b/samples/Audio3A.Web/Services/RealApiService.cs
new file mode 100644
index 0000000..6e4dcee
--- /dev/null
+++ b/samples/Audio3A.Web/Services/RealApiService.cs
@@ -0,0 +1,252 @@
+using System.Net.Http.Json;
+using System.Text.Json;
+
+namespace Audio3A.Web.Services;
+
+/// <summary>
+/// 真实 API 服务（连接到服务端 WebAPI）
+/// </summary>
+public class RealApiService : IApiService
+{
+    private readonly HttpClient _httpClient;
+    private readonly ILogger<RealApiService>? _logger;
+
+    public RealApiService(HttpClient httpClient, ILogger<RealApiService>? logger = null)
+    {
+        _httpClient = httpClient;
+        _logger = logger;
+    }
+
+    // DTO 类 - 与 API 响应匹配
+    private class RoomResponse
+    {
+        public string Id { get; set; } = string.Empty;
+        public string Name { get; set; } = string.Empty;
+        public string State { get; set; } = string.Empty;
+        public int ParticipantCount { get; set; }
+        public int MaxParticipants { get; set; }
+        public DateTime CreatedAt { get; set; }
+        public List<ParticipantResponse> Participants { get; set; } = new();
+    }
+
+    private class ParticipantResponse
+    {
+        public string Id { get; set; } = string.Empty;
+        public string Name { get; set; } = string.Empty;
+        public string State { get; set; } = string.Empty;
+        public DateTime JoinedAt { get; set; }
+        public bool Enable3A { get; set; }
+    }
+
+    private class StatsResponse
+    {
+        public int TotalRooms { get; set; }
+        public int ActiveRooms { get; set; }
+        public int TotalParticipants { get; set; }
+    }
+
+    // 请求 DTO
+    private class CreateRoomRequest
+    {
+        public string Name { get; set; } = string.Empty;
+        public int MaxParticipants { get; set; }
+        public bool EnableAec { get; set; }
+        public bool EnableAgc { get; set; }
+        public bool EnableAns { get; set; }
+    }
+
+    private class JoinRoomRequest
+    {
+        public string Name { get; set; } = string.Empty;
+    }
+
+    // API 方法实现
+    public async Task<StatsData> GetStats()
+    {
+        try
+        {
+            var response = await _httpClient.GetFromJsonAsync<StatsResponse>("/api/rooms/stats");
+            if (response == null)
+                return new StatsData();
+            
+            return new StatsData
+            {
+                TotalRooms = response.TotalRooms,
+                ActiveRooms = response.ActiveRooms,
+                TotalParticipants = response.TotalParticipants
+            };
+        }
+        catch (Exception ex)
+        {
+            _logger?.LogError(ex, "获取统计信息失败");
+            throw;
+        }
+    }
+
+    public async Task<List<RoomInfo>> GetRooms()
+    {
+        try
+        {
+            var response = await _httpClient.GetFromJsonAsync<List<RoomResponse>>("/api/rooms");
+            if (response == null)
+                return new List<RoomInfo>();
+
+            return response.Select(r => new RoomInfo
+            {
+                Id = r.Id,
+                Name = r.Name,
+                State = r.State,
+                ParticipantCount = r.ParticipantCount,
+                MaxParticipants = r.MaxParticipants,
+                CreatedAt = r.CreatedAt
+            }).ToList();
+        }
+        catch (Exception ex)
+        {
+            _logger?.LogError(ex, "获取房间列表失败");
+            throw;
+        }
+    }
+
+    public async Task<RoomDetailInfo?> GetRoom(string roomId)
+    {
+        try
+        {
+            var response = await _httpClient.GetFromJsonAsync<RoomResponse>($"/api/rooms/{roomId}");
+            if (response == null)
+                return null;
+
+            // WebAPI 不返回 InviteCode，生成一个临时的
+            // 注意：这是一个临时解决方案，生产环境应在服务端实现 InviteCode 功能
+            // 或者考虑移除此功能以保持与 API 的一致性
+            var inviteCode = roomId.Length >= 6 ? roomId.Substring(0, 6).ToUpper() : roomId.ToUpper();
+
+            return new RoomDetailInfo
+            {
+                Id = response.Id,
+                Name = response.Name,
+                State = response.State,
+                ParticipantCount = response.ParticipantCount,
+                MaxParticipants = response.MaxParticipants,
+                CreatedAt = response.CreatedAt,
+                InviteCode = inviteCode,
+                EnableAec = response.Participants.Any(p => p.Enable3A), // 从参与者推断
+                EnableAgc = response.Participants.Any(p => p.Enable3A),
+                EnableAns = response.Participants.Any(p => p.Enable3A),
+                Participants = response.Participants.Select(p => new ParticipantInfo
+                {
+                    Id = p.Id,
+                    Name = p.Name,
+                    State = p.State,
+                    JoinedAt = p.JoinedAt,
+                    Enable3A = p.Enable3A
+                }).ToList()
+            };
+        }
+        catch (HttpRequestException ex) when (ex.StatusCode == System.Net.HttpStatusCode.NotFound)
+        {
+            return null;
+        }
+        catch (Exception ex)
+        {
+            _logger?.LogError(ex, "获取房间详情失败: {RoomId}", roomId);
+            throw;
+        }
+    }
+
+    public async Task<RoomData> CreateRoom(string name, int maxParticipants, bool enableAec, bool enableAgc, bool enableAns)
+    {
+        try
+        {
+            var request = new CreateRoomRequest
+            {
+                Name = name,
+                MaxParticipants = maxParticipants,
+                EnableAec = enableAec,
+                EnableAgc = enableAgc,
+                EnableAns = enableAns
+            };
+
+            var response = await _httpClient.PostAsJsonAsync("/api/rooms", request);
+            response.EnsureSuccessStatusCode();
+
+            var room = await response.Content.ReadFromJsonAsync<RoomResponse>();
+            if (room == null)
+                throw new InvalidOperationException("创建房间返回空响应");
+
+            return new RoomData
+            {
+                Id = room.Id,
+                Name = room.Name,
+                State = room.State,
+                MaxParticipants = room.MaxParticipants,
+                CreatedAt = room.CreatedAt,
+                EnableAec = enableAec,
+                EnableAgc = enableAgc,
+                EnableAns = enableAns
+            };
+        }
+        catch (Exception ex)
+        {
+            _logger?.LogError(ex, "创建房间失败");
+            throw;
+        }
+    }
+
+    public async Task<bool> DeleteRoom(string roomId)
+    {
+        try
+        {
+            var response = await _httpClient.DeleteAsync($"/api/rooms/{roomId}");
+            return response.IsSuccessStatusCode;
+        }
+        catch (Exception ex)
+        {
+            _logger?.LogError(ex, "删除房间失败: {RoomId}", roomId);
+            return false;
+        }
+    }
+
+    public async Task<ParticipantData?> JoinRoom(string roomId, string name)
+    {
+        try
+        {
+            var request = new JoinRoomRequest { Name = name };
+            var response = await _httpClient.PostAsJsonAsync($"/api/rooms/{roomId}/participants", request);
+            response.EnsureSuccessStatusCode();
+
+            var participant = await response.Content.ReadFromJsonAsync<ParticipantResponse>();
+            if (participant == null)
+                return null;
+
+            return new ParticipantData
+            {
+                Id = participant.Id,
+                Name = participant.Name,
+                RoomId = roomId,
+                State = participant.State,
+                JoinedAt = participant.JoinedAt,
+                Enable3A = participant.Enable3A
+            };
+        }
+        catch (Exception ex)
+        {
+            _logger?.LogError(ex, "加入房间失败: {RoomId}", roomId);
+            throw;
+        }
+    }
+
+    public async Task<bool> LeaveRoom(string roomId, string participantId)
+    {
+        try
+        {
+            var response = await _httpClient.DeleteAsync($"/api/rooms/{roomId}/participants/{participantId}");
+            return response.IsSuccessStatusCode;
+        }
+        catch (Exception ex)
+        {
+            _logger?.LogError(ex, "离开房间失败: {RoomId}, {ParticipantId}", roomId, participantId);
+            return false;
+        }
+    }
+}
diff --git a/samples/Audio3A.Web/_Imports.razor b/samples/Audio3A.Web/_Imports.razor
index 36d5e79..a239221 100644
--- a/samples/Audio3A.Web/_Imports.razor
+++ b/samples/Audio3A.Web/_Imports.razor
@@ -9,4 +9,5 @@
 @using Audio3A.Web
 @using Audio3A.Web.Layout
 @using Audio3A.Web.Services
+@using Audio3A.Web.Components
 @using AntDesign
diff --git a/samples/Audio3A.Web/wwwroot/appsettings.json b/samples/Audio3A.Web/wwwroot/appsettings.json
index 5e14ca6..2ba2903 100644
--- a/samples/Audio3A.Web/wwwroot/appsettings.json
+++ b/samples/Audio3A.Web/wwwroot/appsettings.json
@@ -1,3 +1,4 @@
 {
-  "ApiBaseUrl": "https://localhost:7063"
+  "ApiBaseUrl": "https://localhost:7063",
+  "UseMockApi": false
 }
diff --git a/samples/Audio3A.Web/wwwroot/js/audioCall.js b/samples/Audio3A.Web/wwwroot/js/audioCall.js
index 0bcdec6..0069de2 100644
--- a/samples/Audio3A.Web/wwwroot/js/audioCall.js
+++ b/samples/Audio3A.Web/wwwroot/js/audioCall.js
@@ -6,6 +6,23 @@ let analyser = null;
 let isMuted = false;
 let isActive = false;
 
+// 用于波形数据采集
+let scriptProcessor = null;
+let inputWaveformBuffer = [];
+let processedWaveformBuffer = [];
+const WAVEFORM_SAMPLE_SIZE = 200; // 波形数据点数量
+
+// 用于音频录制
+let inputAudioRecorder = null;
+let processedAudioRecorder = null;
+let inputAudioChunks = [];
+let processedAudioChunks = [];
+let isRecording = false;
+
+// 录制配置常量
+const RECORDING_TIMESLICE_MS = 100; // MediaRecorder 数据收集间隔（毫秒）
+const DOWNLOAD_CLEANUP_DELAY_MS = 100; // 下载后清理延迟（毫秒）
+
 export function initialize(dotNetReference) {
     dotNetRef = dotNetReference;
     console.log('Audio call module initialized');
@@ -33,6 +50,23 @@ export async function startCall(roomId, enable3A) {
         localStream = await navigator.mediaDevices.getUserMedia(constraints);
         console.log('Microphone access granted, tracks:', localStream.getAudioTracks().length);
         
+        // 设置音频录制器（原始输入）
+        try {
+            inputAudioRecorder = new MediaRecorder(localStream, {
+                mimeType: 'audio/webm;codecs=opus'
+            });
+            
+            inputAudioRecorder.ondataavailable = (event) => {
+                if (event.data.size > 0) {
+                    inputAudioChunks.push(event.data);
+                }
+            };
+            
+            console.log('Input audio recorder initialized');
+        } catch (e) {
+            console.warn('Could not initialize input audio recorder:', e);
+        }
+        
         // 创建音频上下文用于分析音频级别
         audioContext = new (window.AudioContext || window.webkitAudioContext)();
         console.log('AudioContext created, state:', audioContext.state);
@@ -40,8 +74,58 @@ export async function startCall(roomId, enable3A) {
         const source = audioContext.createMediaStreamSource(localStream);
         analyser = audioContext.createAnalyser();
         analyser.fftSize = 256;
+        
+        // 创建 ScriptProcessor 用于采集波形数据
+        // 注意：ScriptProcessor 已被弃用，但在这里我们用它来演示
+        // 生产环境应该使用 AudioWorklet
+        // TODO: 迁移到 AudioWorklet API 以获得更好的性能
+        scriptProcessor = audioContext.createScriptProcessor(2048, 1, 1);
+        
         source.connect(analyser);
-        console.log('Audio analyser connected');
+        analyser.connect(scriptProcessor);
+        scriptProcessor.connect(audioContext.destination);
+        
+        // 创建处理后音频的录制器（连接到 destination）
+        try {
+            const destStream = audioContext.createMediaStreamDestination();
+            scriptProcessor.connect(destStream);
+            
+            processedAudioRecorder = new MediaRecorder(destStream.stream, {
+                mimeType: 'audio/webm;codecs=opus'
+            });
+            
+            processedAudioRecorder.ondataavailable = (event) => {
+                if (event.data.size > 0) {
+                    processedAudioChunks.push(event.data);
+                }
+            };
+            
+            console.log('Processed audio recorder initialized');
+        } catch (e) {
+            console.warn('Could not initialize processed audio recorder:', e);
+        }
+        
+        // 处理音频数据
+        scriptProcessor.onaudioprocess = function(e) {
+            if (!isActive || isMuted) return;
+            
+            const inputData = e.inputBuffer.getChannelData(0);
+            const outputData = e.outputBuffer.getChannelData(0);
+            
+            // 采样输入波形数据
+            collectWaveformData(inputData, inputWaveformBuffer, 'input');
+            
+            // 复制数据到输出（这里我们没有真正的3A处理，所以输出=输入）
+            // 在实际应用中，这里应该是经过3A处理后的数据
+            for (let i = 0; i < inputData.length; i++) {
+                outputData[i] = inputData[i];
+            }
+            
+            // 采样处理后的波形数据（这里模拟，实际上应该是3A处理后的）
+            collectWaveformData(outputData, processedWaveformBuffer, 'processed');
+        };
+        
+        console.log('Audio analyser and processor connected');
 
         isActive = true;
 
@@ -62,6 +146,14 @@ export async function startCall(roomId, enable3A) {
 export function endCall() {
     isActive = false;
 
+    // 停止录制
+    stopRecording();
+
+    if (scriptProcessor) {
+        scriptProcessor.disconnect();
+        scriptProcessor = null;
+    }
+
     if (localStream) {
         localStream.getTracks().forEach(track => track.stop());
         localStream = null;
@@ -74,6 +166,8 @@ export function endCall() {
 
     analyser = null;
     isMuted = false;
+    inputWaveformBuffer = [];
+    processedWaveformBuffer = [];
 
     console.log('Call ended');
 }
@@ -125,3 +219,155 @@ function monitorAudioLevel() {
         requestAnimationFrame(monitorAudioLevel);
     }
 }
+
+// 采集波形数据
+function collectWaveformData(audioData, buffer, type) {
+    // 下采样到固定数量的点
+    const step = Math.floor(audioData.length / WAVEFORM_SAMPLE_SIZE);
+    const samples = [];
+    
+    for (let i = 0; i < WAVEFORM_SAMPLE_SIZE; i++) {
+        const index = i * step;
+        if (index < audioData.length) {
+            // 转换为 0-255 范围
+            const normalized = Math.abs(audioData[index]);
+            samples.push(Math.min(255, Math.floor(normalized * 255)));
+        } else {
+            samples.push(0);
+        }
+    }
+    
+    // 每隔一定帧数发送波形数据
+    if (!collectWaveformData.counter) collectWaveformData.counter = {};
+    if (!collectWaveformData.counter[type]) collectWaveformData.counter[type] = 0;
+    collectWaveformData.counter[type]++;
+    
+    // 每 10 帧发送一次波形数据（约每秒几次）
+    // TODO: 考虑使用时间节流而不是帧数节流，以获得更一致的更新率
+    if (collectWaveformData.counter[type] % 10 === 0) {
+        if (dotNetRef && !isMuted) {
+            try {
+                const uint8Array = new Uint8Array(samples);
+                if (type === 'input') {
+                    dotNetRef.invokeMethodAsync('NotifyInputWaveform', Array.from(uint8Array));
+                } else if (type === 'processed') {
+                    dotNetRef.invokeMethodAsync('NotifyProcessedWaveform', Array.from(uint8Array));
+                }
+            } catch (err) {
+                console.error(`Failed to send ${type} waveform:`, err);
+            }
+        }
+    }
+}
+
+// 开始录制音频
+export function startRecording() {
+    if (!isActive || isRecording) {
+        console.warn('Cannot start recording: isActive=' + isActive + ', isRecording=' + isRecording);
+        return false;
+    }
+    
+    try {
+        // 清空之前的录音数据
+        inputAudioChunks = [];
+        processedAudioChunks = [];
+        
+        // 开始录制
+        if (inputAudioRecorder && inputAudioRecorder.state !== 'recording') {
+            inputAudioRecorder.start(RECORDING_TIMESLICE_MS);
+        }
+        
+        if (processedAudioRecorder && processedAudioRecorder.state !== 'recording') {
+            processedAudioRecorder.start(RECORDING_TIMESLICE_MS);
+        }
+        
+        isRecording = true;
+        console.log('Recording started');
+        return true;
+    } catch (e) {
+        console.error('Failed to start recording:', e);
+        return false;
+    }
+}
+
+// 停止录制音频
+export function stopRecording() {
+    if (!isRecording) {
+        return false;
+    }
+    
+    try {
+        if (inputAudioRecorder && inputAudioRecorder.state === 'recording') {
+            inputAudioRecorder.stop();
+        }
+        
+        if (processedAudioRecorder && processedAudioRecorder.state === 'recording') {
+            processedAudioRecorder.stop();
+        }
+        
+        isRecording = false;
+        console.log('Recording stopped');
+        return true;
+    } catch (e) {
+        console.error('Failed to stop recording:', e);
+        return false;
+    }
+}
+
+// 下载输入音频
+export function downloadInputAudio(filename) {
+    if (inputAudioChunks.length === 0) {
+        console.warn('No input audio data to download');
+        return false;
+    }
+    
+    try {
+        const blob = new Blob(inputAudioChunks, { type: 'audio/webm' });
+        downloadBlob(blob, filename || 'input-audio.webm');
+        console.log('Input audio downloaded');
+        return true;
+    } catch (e) {
+        console.error('Failed to download input audio:', e);
+        return false;
+    }
+}
+
+// 下载处理后音频
+export function downloadProcessedAudio(filename) {
+    if (processedAudioChunks.length === 0) {
+        console.warn('No processed audio data to download');
+        return false;
+    }
+    
+    try {
+        const blob = new Blob(processedAudioChunks, { type: 'audio/webm' });
+        downloadBlob(blob, filename || 'processed-audio.webm');
+        console.log('Processed audio downloaded');
+        return true;
+    } catch (e) {
+        console.error('Failed to download processed audio:', e);
+        return false;
+    }
+}
+
+// 辅助函数：下载 Blob
+function downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.style.display = 'none';
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    
+    // 清理
+    setTimeout(() => {
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }, DOWNLOAD_CLEANUP_DELAY_MS);
+}
+
+// 检查是否正在录制
+export function isCurrentlyRecording() {
+    return isRecording;
+}
diff --git a/samples/Audio3A.Web/wwwroot/js/waveform.js b/samples/Audio3A.Web/wwwroot/js/waveform.js
new file mode 100644
index 0000000..a133141
--- /dev/null
+++ b/samples/Audio3A.Web/wwwroot/js/waveform.js
@@ -0,0 +1,129 @@
+// 波形可视化 JavaScript 模块
+const waveformData = new Map();
+
+export function initWaveform(canvas, width, height, color, backgroundColor) {
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    // 存储配置
+    waveformData.set(canvas, {
+        color: color,
+        backgroundColor: backgroundColor,
+        width: width,
+        height: height,
+        data: new Array(200).fill(0) // 默认200个数据点
+    });
+
+    // 绘制初始背景
+    drawWaveform(canvas);
+}
+
+export function updateWaveform(canvas, dataArray) {
+    const config = waveformData.get(canvas);
+    if (!config) return;
+
+    // 更新数据
+    config.data = Array.from(dataArray);
+    drawWaveform(canvas);
+}
+
+export function updateWaveformFromBytes(canvas, byteArray) {
+    const config = waveformData.get(canvas);
+    if (!config) return;
+
+    // 将 byte array 转换为归一化的 float array
+    const normalized = Array.from(byteArray).map(b => b / 255.0);
+    config.data = normalized;
+    drawWaveform(canvas);
+}
+
+function drawWaveform(canvas) {
+    const config = waveformData.get(canvas);
+    if (!config) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const { width, height, data, color, backgroundColor } = config;
+
+    // 清除画布
+    ctx.fillStyle = backgroundColor;
+    ctx.fillRect(0, 0, width, height);
+
+    // 绘制中心线
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(0, height / 2);
+    ctx.lineTo(width, height / 2);
+    ctx.stroke();
+
+    // 绘制波形
+    if (data.length === 0) return;
+
+    const sliceWidth = width / data.length;
+    const halfHeight = height / 2;
+
+    // 绘制填充区域
+    ctx.fillStyle = color + '40'; // 添加透明度
+    ctx.beginPath();
+    ctx.moveTo(0, halfHeight);
+
+    for (let i = 0; i < data.length; i++) {
+        const x = i * sliceWidth;
+        const value = Math.max(0, Math.min(1, data[i])); // 限制在 0-1 之间
+        const y = halfHeight - (value * halfHeight);
+        
+        if (i === 0) {
+            ctx.moveTo(x, y);
+        } else {
+            ctx.lineTo(x, y);
+        }
+    }
+
+    // 镜像到下半部分
+    for (let i = data.length - 1; i >= 0; i--) {
+        const x = i * sliceWidth;
+        const value = Math.max(0, Math.min(1, data[i]));
+        const y = halfHeight + (value * halfHeight);
+        ctx.lineTo(x, y);
+    }
+
+    ctx.closePath();
+    ctx.fill();
+
+    // 绘制波形线
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+
+    for (let i = 0; i < data.length; i++) {
+        const x = i * sliceWidth;
+        const value = Math.max(0, Math.min(1, data[i]));
+        const y = halfHeight - (value * halfHeight);
+        
+        if (i === 0) {
+            ctx.moveTo(x, y);
+        } else {
+            ctx.lineTo(x, y);
+        }
+    }
+
+    ctx.stroke();
+
+    // 绘制镜像线
+    ctx.beginPath();
+    for (let i = 0; i < data.length; i++) {
+        const x = i * sliceWidth;
+        const value = Math.max(0, Math.min(1, data[i]));
+        const y = halfHeight + (value * halfHeight);
+        
+        if (i === 0) {
+            ctx.moveTo(x, y);
+        } else {
+            ctx.lineTo(x, y);
+        }
+    }
+
+    ctx.stroke();
+}
diff --git a/samples/Audio3A.WebApi/.dockerignore b/samples/Audio3A.WebApi/.dockerignore
new file mode 100644
index 0000000..e7b690f
--- /dev/null
+++ b/samples/Audio3A.WebApi/.dockerignore
@@ -0,0 +1,25 @@
+**/.classpath
+**/.dockerignore
+**/.env
+**/.git
+**/.gitignore
+**/.project
+**/.settings
+**/.toolstarget
+**/.vs
+**/.vscode
+**/*.*proj.user
+**/*.dbmdl
+**/*.jfm
+**/azds.yaml
+**/bin
+**/charts
+**/docker-compose*
+**/Dockerfile*
+**/node_modules
+**/npm-debug.log
+**/obj
+**/secrets.dev.yaml
+**/values.dev.yaml
+LICENSE
+README.md
diff --git a/samples/Audio3A.WebApi/Dockerfile b/samples/Audio3A.WebApi/Dockerfile
new file mode 100644
index 0000000..7cf5d4f
--- /dev/null
+++ b/samples/Audio3A.WebApi/Dockerfile
@@ -0,0 +1,40 @@
+# 使用官方 .NET 8 SDK 镜像进行构建
+FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build
+WORKDIR /src
+
+# 复制解决方案和项目文件
+COPY ["Audio3A.sln", "./"]
+COPY ["src/Audio3A.Core/Audio3A.Core.csproj", "src/Audio3A.Core/"]
+COPY ["src/Audio3A.RoomManagement/Audio3A.RoomManagement.csproj", "src/Audio3A.RoomManagement/"]
+COPY ["samples/Audio3A.WebApi/Audio3A.WebApi.csproj", "samples/Audio3A.WebApi/"]
+
+# 恢复依赖
+RUN dotnet restore "samples/Audio3A.WebApi/Audio3A.WebApi.csproj"
+
+# 复制所有源代码
+COPY . .
+
+# 构建项目
+WORKDIR "/src/samples/Audio3A.WebApi"
+RUN dotnet build "Audio3A.WebApi.csproj" -c Release -o /app/build
+
+# 发布项目
+FROM build AS publish
+RUN dotnet publish "Audio3A.WebApi.csproj" -c Release -o /app/publish /p:UseAppHost=false
+
+# 使用 ASP.NET Core 运行时镜像
+FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS final
+WORKDIR /app
+
+# 设置环境变量
+ENV ASPNETCORE_URLS=http://+:80
+ENV ASPNETCORE_ENVIRONMENT=Production
+
+# 暴露端口
+EXPOSE 80
+
+# 复制发布的文件
+COPY --from=publish /app/publish .
+
+# 设置入口点
+ENTRYPOINT ["dotnet", "Audio3A.WebApi.dll"]