RTC Engine
  • Overview
  • Web
    • Demo のクイックスタート
    • SDK クイックスタート
    • 基本機能
      • 画面共有
      • ライブブロードキャスト
      • メディアデバイス
      • 音量
      • エンコーディング構成ファイルの設定
      • ネットワーク品質の検出
      • 検出能力
    • 高度な機能
      • AI ノイズ低減の有効化
      • ミキシングを有効にします
      • ウォーターマークを有効にします
      • Enable Virtual Background
      • 美顔とエフェクトの有効化
      • データメッセージ
      • キャプチャーとレンタリングのカスタマイズ
    • インターフェースリスト
    • リリース説明
    • 対応するプラットホーム
    • Web に関するよくあるご質問
      • 複数人でのビデオ通話を最適化
      • 制限付き自動再生の処理
      • ファイアウォール制限への対応
      • その他
  • Android
    • Run Sample Code
    • Integration
    • インテグレーション
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. ビデオ品質の設定
      • 10. ビデオの回転
    • Advanced Features
      • ネットワーク品質のテスト
      • キャプチャーとレンタリングのカスタマイズ
      • オーディオキャプチャーと再生のカスタマイズ
    • 顧客インターフェース
      • Overview
      • TRTCCloud
      • TRTCStatistics
      • TRTCCloudListener
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • タイプ定義
      • 廃棄インタフェース
      • エラーコード
    • ソリューション
      • リアルタイムコーラス (TUIKaraoke)
        • クイックインテグレーション
        • 実施ステップ
        • 曲の同期
        • 歌詞の同期
        • 音声同期
        • ミクスストリーミングソリューション
        • TRTCKaraoke 関連インターフェース
        • よくあるご質問
    • リリース説明
  • iOS
    • Run Sample Code
    • Integration
    • インテグレーション
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. ビデオ品質の設定
      • 10. ビデオの回転
    • Advanced Features
      • ネットワーク品質のテスト
      • キャプチャーとレンタリングのカスタマイズ
      • オーディオキャプチャーと再生のカスタマイズ
    • 顧客インターフェース
      • Overview
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • タイプ定義
      • 廃棄インタフェース
      • ErrorCode
    • ソリューション
      • クイックインテグレーション
      • 実施ステップ
      • 曲の同期
      • 歌詞の同期
      • 音声同期
      • ミクスストリーミングソリューション
      • TRTCKaraoke 関連インターフェース
      • よくあるご質問
    • リリース説明
  • macOS
    • Run Sample Code
    • Integration
    • インテグレーション
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. パソコンサウンドの共有
      • 10. ビデオ品質の設定
      • 11. ビデオの回転
    • Advanced Features
      • ハードウェアデバイスのテスト
      • ネットワーク品質のテスト
      • キャプチャーとレンタリングのカスタマイズ
      • オーディオキャプチャーと再生のカスタマイズ
    • 顧客インターフェース
      • Overview
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • タイプ定義
      • 廃棄インタフェース
      • ErrorCode
      • リリース説明
    • リリース説明
  • Windows
    • Run Sample Code
    • Integration
    • インテグレーション
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. ビデオ品質の設定
      • 10. ビデオの回転
    • Advanced Features
      • ハードウェアデバイスのテスト
      • ネットワーク品質のテスト
      • キャプチャーとレンタリングのカスタマイズ
      • オーディオキャプチャーと再生のカスタマイズ
    • 顧客インターフェース
      • Overview
      • ITRTCCloud
      • ITRTCStatistics
      • TRTCCloudCallback
      • ITXAudioEffectManager
      • ITXDeviceManager
      • タイプ定義
      • 廃棄インタフェース
      • エラーコード
    • リリース説明
  • Electron
    • インテグレーション
      • 1. インターフェースの例
      • 2. SDK のインポート
      • 3. ルームに入る
      • 4. オーディオ・ビデオストリームのサブスクリプション
      • 5. オーディオ・ビデオストリームのリリース
      • 6. ルームからの退出
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. パソコンサウンドの共有
      • 10. ビデオ品質の設定
      • 11. ビデオの回転
    • 顧客インターフェース
      • Overview
      • エラーコード
  • Flutter
    • インテグレーション
      • 1. インターフェースの例
      • 2. SDK のインポート
      • 3. ルームに入る
      • 4. オーディオ・ビデオストリームのサブスクリプション
      • 5. オーディオ・ビデオストリームのリリース
      • 6. ルームからの退出
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. パソコンサウンドの共有
      • 10. ビデオ品質の設定
      • 11. ビデオの回転
    • 顧客インターフェース
      • Overview
      • エラーコード
  • Unity
    • インテグレーション
      • 1. インターフェースの例
      • 2. SDK のインポート
    • 顧客インターフェース
      • Overview
      • エラーコード
  • QT
    • インテグレーション
      • 1. SDK のインポート
  • Overview
    • Overview
  • 概念
  • Features
  • 性能統計
  • 価格
    • 無料時間
    • RTC-Engine パッケージ
    • サブスクリプションパッケージ期間の課金説明
    • 従量課金
      • 音声・ビデオ時間の課金説明
      • クラウド録画の課金説明
      • ミックストランスコーディングとCDNへのリレーの課金説明
  • よくあるご質問
    • 初心者のよくあるご質問
    • マイグレーションガイド
      • Twilio Video から TRTC への移行
      • 課金
      • Features
      • UserSig
      • ファイアウォール制限
      • インストールパッケージを削減する方法
      • TRTCCalling Web 関連
      • オーディオ・ビデオの品質
      • その他
RTC Engine
このページは現在英語版のみで提供されており、日本語版も近日中に提供される予定です。ご利用いただきありがとうございます。

歌詞の同期

1.1 Implementation process

In the lyrics synchronization solution, the actions of the three different roles are as follows:
Main Singer
Chorus
Audience
NTP time calibration
Enable black frame insertion
Send SEI messages
Local lyrics synchronization
Update lyrics control
NTP time calibration
Local lyrics synchronization
Update lyrics control
NTP time calibration
Receive SEI messages
Update lyrics control
Among them, the main singer and chorus update the lyrics progress locally based on the synchronized song playback progress; the audience end needs to receive SEI messages containing the latest lyrics progress sent by the main singer end to update the local lyrics progress.





Timing diagram






The synchronization of lyrics timing can mainly be divided into three parts: NTP time synchronization, enabling black frame compensation, and local and remote lyrics synchronization. The code implementation of NTP time synchronization has been provided in the Song Synchronization document. The following will provide specific code implementation for the latter two parts.

Key code implementation

1. Enable Black Frame Insertion

// In pure audio mode, the main instance (vocal instance)
// needs to enable black frame padding to carry SEI messages.
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];
Note:
The experimental interface enableBlackStream needs to be called after entering the room;
On Android, the value type of the enable parameter is Boolean, and on iOS it is Integer;
The receiving end needs to call startRemoteView(userId, null) after receiving onUserVideoAvailable(userId, true).

2. Sending Song Progress through SEI Message

TXAudioMusicProgressBlock progressBlock = ^(NSInteger progressMs, NSInteger durationMs) {
// current ntp time
NSInteger ntpTime = [TXLiveBase getNetworkTimestamp];
// Notify the song progress, users will scroll the lyrics here.
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];
};
Note:
The frequency at which the lead singer sends SEI messages is determined by the frequency of background music playback event callbacks, which is usually 200ms;
The reason for not directly using CMD messages to send song progress is that the signaling transmitted through the SEI channel can be transmitted with the video frame to the live CDN, which has better compatibility for viewers who pull the CDN stream.

3. Synchronization of Local and Remote Lyrics

// local lyrics synchronization
TXAudioMusicProgressBlock progressBlock = ^(NSInteger progressMs, NSInteger durationMs) {
...
// TODO Update the logic of the lyrics control.
// Determine whether it is necessary to seek the lyrics control
// based on the latest progress and the error of the local lyrics progress.
...
};

// remote lyrics synchronization.
- (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]]) {
// Parsing error.
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 Update the logic of the lyrics control.
// Determine whether it is necessary to seek the lyrics control
// based on the received latest progress and the error of the local lyrics progress.
...
}
Note
If reusing the TUIKaraoke component's lyric control, please refer to the code logic in the TUIKaraoke TRTCLyricView section to synchronize the progress of the lyric control.