RTC Engine
  • 产品概述
  • Web
    • 跑通 Demo
    • SDK 快速启动
    • 基础功能
      • 屏幕分享
      • 直播
      • 媒体设备
      • 音量
      • 设置编码配置文件
      • 检测网络质量
      • 检测能力
    • 高级功能
      • 启用 AI 降噪
      • 启用混音
      • 启用水印
      • Enable Virtual Background
      • 启用美颜和特效
      • 数据消息
      • 自定义采集和渲染
    • 接口列表
    • 发布说明
    • 支持平台
    • Web 常见问题
      • 优化多人视频通话
      • 处理自动播放受限
      • 应对防火墙限制
      • 其他
  • Android
    • Run Sample Code
    • 集成
      • 2. 导入 SDK
      • 3. 进入房间
      • 4. 订阅音视频流
      • 5. 发布音视频流
      • 6. 退出房间
      • 7. 检测网络质量
      • 8. 开启屏幕共享
      • 9. 设置视频质量
      • 10. 旋转视频
    • 测试网络质量
    • 自定义采集和渲染
    • 自定义音频采集和播放
    • 客户端API
      • 产品概述
      • TRTCCloud
      • TRTCStatistics
      • TRTCCloudListener
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • 类型定义
      • 废弃接口
      • 错误码
    • 解决方案
      • 实时合唱 (TUIKaraoke)
        • 快速集成
        • 实施步骤
        • 歌曲同步
        • 歌词同步
        • 语音同步
        • 混流解决方案
        • TRTCKaraoke 相关接口
        • 常见问题
    • 发布说明
  • iOS
    • Run Sample Code
    • 集成
      • 2. 导入 SDK
      • 3. 进入房间
      • 4. 订阅音视频流
      • 5. 发布音视频流
      • 6. 退出房间
      • 7. 检测网络质量
      • 8. 开启屏幕共享
      • 9. 设置视频质量
      • 10. 旋转视频
    • 测试网络质量
    • 自定义采集和渲染
    • 自定义音频采集和播放
    • 客户端API
      • 产品概述
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • 类型定义
      • 废弃接口
      • ErrorCode
    • 解决方案
      • 快速集成
      • 实施步骤
      • 歌曲同步
      • 歌词同步
      • 语音同步
      • 混流解决方案
      • TRTCKaraoke 相关接口
      • 常见问题
    • 发布说明
  • macOS
    • Run Sample Code
    • 集成
      • 2. 导入 SDK
      • 3. 进入房间
      • 4. 订阅音视频流
      • 5. 发布音视频流
      • 6. 退出房间
      • 7. 检测网络质量
      • 8. 开启屏幕共享
      • 9. 共享电脑声音
      • 10. 设置视频质量
      • 11. 旋转视频
    • 测试硬件设备
    • 测试网络质量
    • 自定义采集和渲染
    • 自定义音频采集和播放
    • 客户端API
      • 产品概述
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • 类型定义
      • 废弃接口
      • ErrorCode
      • 发布说明
    • 发布说明
  • Windows
    • Run Sample Code
    • 集成
      • 2. 导入 SDK
      • 3. 进入房间
      • 4. 订阅音视频流
      • 5. 发布音视频流
      • 6. 退出房间
      • 7. 检测网络质量
      • 8. 开启屏幕共享
      • 9. 设置视频质量
      • 10. 旋转视频
    • 测试硬件设备
    • 测试网络质量
    • 自定义采集和渲染
    • 自定义音频采集和播放
    • 客户端API
      • 产品概述
      • ITRTCCloud
      • ITRTCStatistics
      • TRTCCloudCallback
      • ITXAudioEffectManager
      • ITXDeviceManager
      • 类型定义
      • 废弃接口
      • 错误码
    • 发布说明
  • Electron
    • 集成
      • 1. 接口示例
      • 2. 导入 SDK
      • 3. 进入房间
      • 4. 订阅音视频流
      • 5. 发布音视频流
      • 6. 退出房间
      • 7. 检测网络质量
      • 8. 开启屏幕共享
      • 9. 共享电脑声音
      • 10. 设置视频质量
      • 11. 旋转视频
    • 客户端API
      • 产品概述
      • 错误码
  • Flutter
    • 集成
      • 1. 接口示例
      • 2. 导入 SDK
      • 3. 进入房间
      • 4. 订阅音视频流
      • 5. 发布音视频流
      • 6. 退出房间
      • 7. 检测网络质量
      • 8. 开启屏幕共享
      • 9. 共享电脑声音
      • 10. 设置视频质量
      • 11. 旋转视频
    • 客户端API
      • 产品概述
      • 错误码
  • Unity
    • 集成
      • 1. 接口示例
      • 2. 导入 SDK
    • 客户端API
      • 产品概述
      • 错误码
  • QT
    • 集成
      • 1. 导入 SDK
  • 产品概述
    • 产品概述
  • 概念
  • 产品特性
  • 性能统计
  • 价格中心
    • 免费时长
    • RTC-Engine 套餐
    • 订阅套餐时长计费说明
    • 现收现付
      • 音视频时长计费说明
      • 云端录制计费说明
      • 混流转码与旁路转推计费说明
  • 常见问题
    • 入门常见问题
    • 迁移指南
      • Twilio Video 到 TRTC 的迁移
      • 计费
      • 产品特性
      • UserSig
      • 防火墙限制
      • 如何缩减安装包
      • TRTCCalling Web 相关
      • 音视频质量
      • 其他
RTC Engine

歌词同步

1.1 实现流程

歌词同步方案中,三种不同角色的动作如下:
主唱
合唱
观众
NTP 校时
开启补黑帧
发送 SEI 消息
本地歌词同步
更新歌词控件
NTP 校时
本地歌词同步
更新歌词控件
NTP 校时
接收 SEI 消息
更新歌词控件
其中,主唱及合唱根据同步后的歌曲播放进度,在本地更新歌词进度;观众端则需要接收由主唱端发送的,包含最新歌词进度的 SEI 消息来更新本地的歌词进度。




时序图




歌词同步时序主要可以分为三个部分:NTP 校时、开启补黑帧、本地及远端歌词同步。NTP 校时的代码实现在 歌曲同步 中已经给出,下面将针对后两个部分给出具体的代码实现。

关键代码实现

1. 开启补黑帧

// 纯音频模式下,主实例(人声实例)需要开启补黑帧以携带 SEI 消息
NSDictionary *jsonDic = @{
@"api": @"enableBlackStream",
@"params":
@{
@"enable": @(1)
}
};
NSData *jsonData = [NSJSONSerialization dataWithJSONObject:jsonDic options:NSJSONWritingPrettyPrinted error:nil];
NSString *jsonString = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];
[trtcCloud callExperimentalAPI:jsonString];
说明:
该实验性接口 enableBlackStream 需要在进房之后调用;
在 Android 端,enable 参数的值类型为布尔型,在 iOS 端为整型;
接收端需要在收到 onUserVideoAvailable(userId, true) 时调用 startRemoteView(userId, null)。

2. 通过 SEI 消息发送歌曲进度

TXAudioMusicProgressBlock progressBlock = ^(NSInteger progressMs, NSInteger durationMs) {
//当前 ntp 时间
NSInteger ntpTime = [TXLiveBase getNetworkTimestamp];
//通知歌曲进度,用户会在这里进行歌词的滚动
NSDictionary *progressMsg = @{
@"bgmProgressTime":@(progressMs),
@"ntpTime":@(ntpTime),
@"musicId": @(musicId),
@"duration": @(durationMs),
};
NSData *jsonData = [NSJSONSerialization dataWithJSONObject:progressMsg options:NSJSONWritingPrettyPrinted error:nil];
NSString *jsonString = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];
[trtcCloud sendSEIMsg:[jsonString dataUsingEncoding:NSUTF8StringEncoding] repeatCount:1];
};
说明:
主唱发送 SEI 消息的频率由背景音乐播放事件回调的频率决定,一般为 200ms;
不直接使用 CMD 消息发送歌曲进度的原因:SEI 通道传输的信令可以伴随视频帧一直传输到直播 CDN 上,对于拉取 CDN 流的观众具有更好的兼容性。

3. 本地及远端歌词同步

// 本地歌词同步
TXAudioMusicProgressBlock progressBlock = ^(NSInteger progressMs, NSInteger durationMs) {
...
// TODO 更新歌词控件逻辑:
// 根据最新进度和本地歌词进度误差,判断是否需要 seek 歌词控件
...
};

// 远端歌词同步
- (void)onRecvSEIMsg:(NSString *)userId message:(NSData *)message {
NSError *err = nil;
NSDictionary *dic = [NSJSONSerialization JSONObjectWithData:message options:NSJSONReadingMutableContainers error:&err];
if (err || ![dic isKindOfClass:[NSDictionary class]]) {
// 解析出错
return;
}
NSInteger bgmProgressTime = [[dic objectForKey:@"bgmProgressTime"] integerValue];
NSInteger ntpTime = [[dic objectForKey:@"ntpTime"] integerValue];
int32_t musicId = [[dic objectForKey:@"musicId"] intValue];
NSInteger duration = [[dic objectForKey:@"duration"] integerValue];
...
// TODO 更新歌词控件逻辑:
// 根据接收到的最新进度和本地歌词进度误差,判断是否需要 seek 歌词控件
...
}
说明:
如果复用 TUIKaraoke 组件的歌词控件,请参照 TUIKaraoke TRTCLyricView 部分的代码逻辑同步歌词控件进度。