# KBVoiceInputBar 使用说明 ## 📦 组件概述 `KBVoiceInputBar` 是一个封装好的底部语音输入栏组件,包含: - ✅ 毛玻璃背景(带渐变 mask) - ✅ 状态标签(显示当前状态) - ✅ 录音按钮(支持长按、波形动画) - ✅ 代理回调(开始/结束/取消录音) --- ## 🎨 UI 结构 ``` ┌─────────────────────────────┐ │ 毛玻璃背景(渐变透明) │ │ ┌─────────────────────┐ │ │ │ 状态标签 │ │ │ │ "按住按钮开始对话" │ │ │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ 录音按钮 │ │ │ │ [按住说话] │ │ │ └─────────────────────┘ │ └─────────────────────────────┘ ``` --- ## 📝 使用方式 ### 1. 导入头文件 ```objc #import "KBVoiceInputBar.h" ``` ### 2. 在 VC 中声明属性 ```objc @interface YourViewController () @property (nonatomic, strong) KBVoiceInputBar *voiceInputBar; @end ``` ### 3. 初始化和布局 ```objc - (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. 实现代理方法 ```objc #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` | 代理对象 | | `statusText` | `NSString *` | 状态文本(显示在按钮上方) | | `enabled` | `BOOL` | 是否启用(禁用时按钮不可点击) | ### 方法 | 方法 | 说明 | |------|------| | `- (void)updateVolumeRMS:(float)rms` | 更新音量(用于波形动画) | | `- (void)setRecording:(BOOL)recording` | 设置录音状态 | ### 代理方法 | 方法 | 说明 | |------|------| | `- (void)voiceInputBarDidBeginRecording:` | 开始录音 | | `- (void)voiceInputBarDidEndRecording:` | 结束录音 | | `- (void)voiceInputBarDidCancelRecording:` | 取消录音 | --- ## 💡 使用示例 ### 示例 1:更新状态文本 ```objc // 开始录音 self.voiceInputBar.statusText = @"正在聆听..."; // 识别中 self.voiceInputBar.statusText = @"正在识别..."; // AI 思考中 self.voiceInputBar.statusText = @"AI 正在思考..."; // 完成 self.voiceInputBar.statusText = @"完成"; ``` ### 示例 2:更新音量波形 ```objc // 在录音过程中,定时更新音量 - (void)onVolumeUpdate:(float)rms { [self.voiceInputBar updateVolumeRMS:rms]; } ``` ### 示例 3:禁用/启用按钮 ```objc // 禁用(比如未登录时) self.voiceInputBar.enabled = NO; // 启用 self.voiceInputBar.enabled = YES; ``` ### 示例 4:手动设置录音状态 ```objc // 开始录音 [self.voiceInputBar setRecording:YES]; // 结束录音 [self.voiceInputBar setRecording:NO]; ``` --- ## 🎯 完整示例(集成 Deepgram) ```objc #import "YourViewController.h" #import "KBVoiceInputBar.h" #import "DeepgramStreamingManager.h" @interface YourViewController () @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 ``` --- ## 🎨 自定义样式 ### 修改毛玻璃效果 ```objc // 在 KBVoiceInputBar.m 中修改 UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark]; // 改为深色 ``` ### 修改按钮样式 ```objc // 在 KBVoiceInputBar.m 的 recordButton 懒加载中修改 _recordButton.normalTitle = @"点击说话"; _recordButton.recordingTitle = @"正在录音..."; _recordButton.tintColor = [UIColor systemBlueColor]; ``` ### 修改高度 ```objc // 在布局时调整 [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`:语音聊天管理器