TUIKaraoke
is an open-source audio/video UI component. After integrating it into your project, you can make your application support the online karaoke scenario and try out the TRTC capabilities such as karaoke, seat management, gift giving/receiving, and text chat simply by writing a few lines of code. It also supports the Android platform. Its basic features are as shown below:
Chat | Sound Effect Management |
---|---|
![]() |
![]() |
TUIKaraoke
componentGo to GitHub, clone or download the code, copy the Source
, Resources
, and TXAppBasic
folders and the TUIKaraoke.podspec
file in the iOS
directory to your project, and complete the following import operations:
Add the following import commands to your Podfile
:
pod 'TUIKaraoke', :path => "./", :subspecs => ["TRTC"]
pod 'TXLiteAVSDK_TRTC'
pod 'TXAppBasic', :path => "TXAppBasic/"
Open Terminal and run the following installation command in the directory of the Podfile
:
pod install
Configure permission requests for your app in the info.plist
file of your project. The SDKs need the following permissions (on iOS, the mic access must be requested at runtime):
<key>NSMicrophoneUsageDescription</key>
<string>`TUIKaraoke` needs to access your mic.</string>
For more information the relevant APIs, see TRTCKaraoke (iOS).
// 1. Initialize
let karaokeRoom = TRTCKaraokeRoom.shared()
karaokeRoom.setDelegate(delegate: self)
// 2. Log in
karaokeRoom.login(SDKAppID: Int32(SDKAppID), UserId: UserId, UserSig: ProfileManager.shared.curUserSig()) { code, message in
if code == 0 {
// Logged in
}
}
Parameter description:
SDKAppID
is as shown below:SDKAppID
. On the Application Management page in the TRTC console, the SecretKey
is as shown below:SDKAppID
, userId
, and Secretkey
. You can click here to directly generate a debugging userSig
online or calculate it on your own by referring to the TUIKaraoke demo project. For more information, see UserSig.The anchor creates a room through TUIKaraoke.createRoom.
int roomId = "Room ID";
let param = RoomParam.init()
param.roomName = "Room name";
param.needRequest = false; // Whether your consent is required for listeners to speak
param.seatCount = 8; // Number of seats in the room. Set it to `8`
param.coverUrl = "URL of room cover image";
karaokeRoom.createRoom(roomID: Int32(roomInfo.roomID), roomParam: param) { [weak self] (code, message) in
guard let `self` = self else { return }
if code == 0 {
// Room created successfully
}
}
A listener enters the room through TUIKaraoke.enterRoom.
karaokeRoom.enterRoom(roomID: roomInfo.roomID) { [weak self] (code, message) in
guard let `self` = self else { return }
if code == 0 {
// Entered room successfully
}
}
*A listener mics on through TUIKaraoke.enterSeat.
// 1. A listener calls an API to mic on
int seatIndex = 1;
karaokeRoom.enterSeat(seatIndex: seatIndex) { [weak self] (code, message) in
guard let `self` = self else { return }
if code == 0 {
// Mic turned on successfully
}
}
// 2. The listener receives the `onSeatListChange` callback and refreshes the seat list
func onSeatListChange(seatInfoList: [SeatInfo]) {
}
Note:You can implement other seat management operations as instructed in TRTCKaraoke (iOS) or by referring to the TUIKaraoke demo project.
// Play back the music
karaokeRoom.startPlayMusic(musicID: musicID, originalUrl: muscicLocalPath, accompanyUrl: accompanyLocalPath);
// Stop the music
karaokeRoom.stopPlayMusic();
After completing the previous steps, you can implement the basic karaoke features. If your business needs more features such as chat and gift giving, you can integrate the following capabilities:
If you want the text chat feature between anchors and listeners, implement message sending/receiving as follows:
For more information on relevant APIs, see sendRoomTextMsg.
// Sender: Sends text messages
karaokeRoom.sendRoomTextMsg(message: message) { [weak self] (code, message) in
if code == 0 {
// Sent successfully
}
}
// Receiver: Listens for text messages
karaokeRoom.setDelegate(delegate: self)
func onRecvRoomTextMsg(message: String, userInfo: UserInfo) {
debugPrint("Received a message from" + userInfo.userName + ": " + message)
}
You can implement gift giving, receiving, and displaying as follows:
// Sender: Customize `IMCMD_GIFT` to distinguish between gift messages
karaokeRoom.sendRoomCustomMsg(cmd: kSendGiftCmd, message: message) { code, msg in
if (code == 0) {
// Sent successfully
}
}
// Receiver: Listens for gift messages
karaokeRoom.setDelegate(delegate: self)
func onRecvRoomCustomMsg(cmd: String, message: String, userInfo: UserInfo) {
if cmd == kSendGiftCmd {
debugPrint("Received a gift from" + userInfo.userName + ": " + message)
}
}
TUIKaraoke
component support sound effect features such as voice change, tone change, and reverb?Yes. For more information, see the TUIKaraoke demo project.
? If you have any requirements or feedback, contact colleenyu@tencent.com.
Was this page helpful?