keyboard/keyBoard/Class/AiTalk/V/KBVoiceInputBar_使用说明.md

KBVoiceInputBar 使用说明

📦 组件概述

KBVoiceInputBar 是一个封装好的底部语音输入栏组件，包含：

• ✅ 毛玻璃背景（带渐变 mask）
• ✅ 状态标签（显示当前状态）
• ✅ 录音按钮（支持长按、波形动画）
• ✅ 代理回调（开始/结束/取消录音）

---

🎨 UI 结构

┌─────────────────────────────┐
│  毛玻璃背景（渐变透明）        │
│  ┌─────────────────────┐    │
│  │   状态标签           │    │
│  │  "按住按钮开始对话"   │    │
│  └─────────────────────┘    │
│  ┌─────────────────────┐    │
│  │   录音按钮           │    │
│  │  [按住说话]          │    │
│  └─────────────────────┘    │
└─────────────────────────────┘

---

📝 使用方式

1. 导入头文件

#import "KBVoiceInputBar.h"

2. 在 VC 中声明属性

@interface YourViewController () <KBVoiceInputBarDelegate>
@property (nonatomic, strong) KBVoiceInputBar *voiceInputBar;
@end

3. 初始化和布局

- (void)setupUI {
    // 创建语音输入栏
    self.voiceInputBar = [[KBVoiceInputBar alloc] init];
    self.voiceInputBar.delegate = self;
    self.voiceInputBar.statusText = @"按住按钮开始对话";
    
    [self.view addSubview:self.voiceInputBar];
    [self.voiceInputBar mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.equalTo(self.view);
        make.bottom.equalTo(self.view);
        make.height.mas_equalTo(150); // 根据实际需要调整
    }];
}

4. 实现代理方法

#pragma mark - KBVoiceInputBarDelegate

- (void)voiceInputBarDidBeginRecording:(KBVoiceInputBar *)inputBar {
    NSLog(@"开始录音");
    inputBar.statusText = @"正在聆听...";
    
    // TODO: 开始录音逻辑
    // 1. 检查登录状态
    // 2. 连接语音识别服务
    // 3. 开始录音
}

- (void)voiceInputBarDidEndRecording:(KBVoiceInputBar *)inputBar {
    NSLog(@"结束录音");
    inputBar.statusText = @"正在识别...";
    
    // TODO: 结束录音逻辑
    // 1. 停止录音
    // 2. 发送音频数据
    // 3. 等待识别结果
}

- (void)voiceInputBarDidCancelRecording:(KBVoiceInputBar *)inputBar {
    NSLog(@"取消录音");
    inputBar.statusText = @"已取消";
    
    // TODO: 取消录音逻辑
    // 1. 停止录音
    // 2. 清理资源
}

---

🔧 API 说明

属性

属性	类型	说明
delegate	id<KBVoiceInputBarDelegate>	代理对象
statusText	NSString *	状态文本（显示在按钮上方）
enabled	BOOL	是否启用（禁用时按钮不可点击）

方法

方法	说明
- (void)updateVolumeRMS:(float)rms	更新音量（用于波形动画）
- (void)setRecording:(BOOL)recording	设置录音状态

代理方法

方法	说明
- (void)voiceInputBarDidBeginRecording:	开始录音
- (void)voiceInputBarDidEndRecording:	结束录音
- (void)voiceInputBarDidCancelRecording:	取消录音

---

💡 使用示例

示例 1：更新状态文本

// 开始录音
self.voiceInputBar.statusText = @"正在聆听...";

// 识别中
self.voiceInputBar.statusText = @"正在识别...";

// AI 思考中
self.voiceInputBar.statusText = @"AI 正在思考...";

// 完成
self.voiceInputBar.statusText = @"完成";

示例 2：更新音量波形

// 在录音过程中，定时更新音量
- (void)onVolumeUpdate:(float)rms {
    [self.voiceInputBar updateVolumeRMS:rms];
}

示例 3：禁用/启用按钮

// 禁用（比如未登录时）
self.voiceInputBar.enabled = NO;

// 启用
self.voiceInputBar.enabled = YES;

示例 4：手动设置录音状态

// 开始录音
[self.voiceInputBar setRecording:YES];

// 结束录音
[self.voiceInputBar setRecording:NO];

---

🎯 完整示例（集成 Deepgram）

#import "YourViewController.h"
#import "KBVoiceInputBar.h"
#import "DeepgramStreamingManager.h"

@interface YourViewController () <KBVoiceInputBarDelegate, DeepgramStreamingManagerDelegate>
@property (nonatomic, strong) KBVoiceInputBar *voiceInputBar;
@property (nonatomic, strong) DeepgramStreamingManager *deepgramManager;
@end

@implementation YourViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self setupUI];
    [self setupDeepgram];
}

- (void)setupUI {
    self.voiceInputBar = [[KBVoiceInputBar alloc] init];
    self.voiceInputBar.delegate = self;
    [self.view addSubview:self.voiceInputBar];
    [self.voiceInputBar mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.bottom.equalTo(self.view);
        make.height.mas_equalTo(150);
    }];
}

- (void)setupDeepgram {
    self.deepgramManager = [[DeepgramStreamingManager alloc] init];
    self.deepgramManager.delegate = self;
    self.deepgramManager.serverURL = @"wss://api.deepgram.com/v1/listen";
    self.deepgramManager.apiKey = @"your_api_key";
    [self.deepgramManager prepareConnection];
}

#pragma mark - KBVoiceInputBarDelegate

- (void)voiceInputBarDidBeginRecording:(KBVoiceInputBar *)inputBar {
    inputBar.statusText = @"正在连接...";
    [self.deepgramManager start];
}

- (void)voiceInputBarDidEndRecording:(KBVoiceInputBar *)inputBar {
    inputBar.statusText = @"正在识别...";
    [self.deepgramManager stopAndFinalize];
}

- (void)voiceInputBarDidCancelRecording:(KBVoiceInputBar *)inputBar {
    inputBar.statusText = @"已取消";
    [self.deepgramManager cancel];
}

#pragma mark - DeepgramStreamingManagerDelegate

- (void)deepgramStreamingManagerDidConnect {
    self.voiceInputBar.statusText = @"正在聆听...";
}

- (void)deepgramStreamingManagerDidUpdateRMS:(float)rms {
    [self.voiceInputBar updateVolumeRMS:rms];
}

- (void)deepgramStreamingManagerDidReceiveInterimTranscript:(NSString *)text {
    self.voiceInputBar.statusText = text.length > 0 ? text : @"正在识别...";
}

- (void)deepgramStreamingManagerDidReceiveFinalTranscript:(NSString *)text {
    self.voiceInputBar.statusText = @"识别完成";
    NSLog(@"最终识别结果：%@", text);
    
    // TODO: 处理识别结果
}

@end

---

🎨 自定义样式

修改毛玻璃效果

// 在 KBVoiceInputBar.m 中修改
UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark]; // 改为深色

修改按钮样式

// 在 KBVoiceInputBar.m 的 recordButton 懒加载中修改
_recordButton.normalTitle = @"点击说话";
_recordButton.recordingTitle = @"正在录音...";
_recordButton.tintColor = [UIColor systemBlueColor];

修改高度

// 在布局时调整
[self.voiceInputBar mas_makeConstraints:^(MASConstraintMaker *make) {
    make.height.mas_equalTo(200); // 调整为 200
}];

---

📌 注意事项

1. 代理必须设置：否则无法接收录音事件
2. 高度建议：推荐高度 150-200，根据实际需要调整
3. 状态文本：及时更新 statusText 提升用户体验
4. 音量更新：定时调用 updateVolumeRMS: 显示波形动画
5. 禁用状态：未登录或其他情况下记得禁用按钮

---

🚀 优势

1. ✅ 开箱即用：无需关心内部实现细节
2. ✅ 高度封装：毛玻璃背景、按钮、状态标签一体化
3. ✅ 易于集成：只需实现 3 个代理方法
4. ✅ 样式统一：与 KBAiMainVC 保持一致
5. ✅ 易于扩展：可以轻松添加更多功能

---

📂 文件位置

• 头文件：keyBoard/Class/AiTalk/V/KBVoiceInputBar.h
• 实现文件：keyBoard/Class/AiTalk/V/KBVoiceInputBar.m
• 依赖：KBAiRecordButton（已存在）

---

🔗 相关组件

• KBAiRecordButton：录音按钮（支持长按、波形动画）
• DeepgramStreamingManager：语音识别管理器
• VoiceChatStreamingManager：语音聊天管理器