How to Create Karaoke App with ZEGOCLOUD SDK

Are you ready to create your very own free karaoke app? It’s easier than you think with the right tools and resources! Whether you’re a seasoned developer or just starting out, there are plenty of options available to help you bring your karaoke app idea to life. In this article, we’ll explore the step-by-step guides on how to create a Karaoke app using ZEGOCLOUD Live Audio Room Kit SDK.

How to Create Karaoke Apps with ZEGOCLOUD SDK

The Live Audio Room Kit SDK, included in UIKits, is a complete set of tools for developers who want to make real-time audio applications, like online meetings or music performances. It has a lot of features for building and managing audio rooms, such as support for multiple audio streams, echo cancellation, and APIs for integrating with other systems.

Why Live Audio Room Kit SDK for Karaoke Apps

Here are just a few reasons why the Live Audio Room Kit SDK is a great choice for making karaoke apps:

1. Live audio mixing: The Live Audio Room Kit SDK allows users to mix multiple audio sources in real-time, including music, voice, and sound effects.

2. Low latency: With low latency audio processing, the Live Audio Room Kit SDK ensures smooth and seamless audio playback for all users.

3. Cross-platform compatibility: The Live Audio Room Kit SDK can be integrated into iOS, Android, and web applications, making it easy to create a karaoke app that works across multiple platforms.

4. Real-time audio effects: Users can add real-time audio effects to their audio streams, such as echo, reverb, and pitch shifting, to enhance their singing experience.

5. Voice activity detection: The Live Audio Room Kit SDK includes voice activity detection, which allows the app to automatically mute non-active users and reduce background noise.

6. Audio recording: The Live Audio Room Kit SDK allows users to record their singing performances and save them for later playback or sharing.

7. User management: The Live Audio Room Kit SDK includes features for managing user accounts, including authentication, authorization, and access control.

Preparation

ZEGOCLOUD developer account.- Sign up
Install Flutter on your computer.
To test your karaoke app, you’ll need an Android or iOS device with audio and internet access.
Once you’ve got all the necessary tools, navigate to the ZEGOCLOUD Administration Console. From there:

create a new project and save the generated AppID and AppSign for later use.
Finally, don’t forget to enable the In-app Chat service through the console to allow users to communicate with each other while singing.

Live Audio Room SDK Integration

If you’re looking to create a karaoke app using the Live Audio Room Kit SDK, here’s what you need to do:

Add the ZegoUIKitPrebuiltLiveAudioRoom to your project directory by running the following code in the project’s root directory:

flutter pub add zego_uikit_prebuilt_live_audio_room

Next, import the SDK by adding the following line of code to your main.dart file:

import 'package:zego_uikit_prebuilt_live_audio_room/zego_uikit_prebuilt_live_audio_room.dart';

Using the Live Audio Room Kit for Free Karaoke App

In order to access the Live Audio Room Kit, you will need to have both your userID and username ready. The live audio room in which you wish to take part can be identified by it, which you will require in order to join.

class LivePage extends StatelessWidget {
  final String roomID;
  final bool isHost;

  const LivePage({Key? key, required this.roomID, this.isHost = false}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ZegoUIKitPrebuiltLiveAudioRoom(
        appID: yourAppID, // Fill in the appID that you get from ZEGOCLOUD Admin Console.
        appSign: yourAppSign, // Fill in the appSign that you get from ZEGOCLOUD Admin Console.
        userID: 'user_id',
        userName: 'user_name',
        roomID: roomID,
        config: isHost
            ? ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
            : ZegoUIKitPrebuiltLiveAudioRoomConfig.audience(),
      ),
    );
  }
}

Configure project (Android)

Integrating the SDK into your Flutter project is an important step in adding the necessary functionality to your app. In order to do this correctly, you’ll need to take the following steps:

Open the file located at your_project/android/app/build.gradle and set the compileSdkVersion to 33.
Open the AndroidManifest.xml file in the app/src/main folder of your project and add the following permissions:

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />

Create a file called proguard-rules.pro in the android > app folder of your project. This file will prevent SDK class name obfuscation. Add the following line to the file:

-keep class .zego. { *; }

Finally, add the following configuration code to the release section of the your_project/android/app/build.gradle file:

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

Configure project (for iOS)

Here’s what you need to do to set up your iOS project so that it has the right permissions and doesn’t use Bitcode:

Go to the your_project/ios directory and open the podfile. Add the following code to the post install do |installer| portion of your program to grant it access to the camera and microphone:

# Start of the permission_handler configuration
target.build_configurations.each do |config|
config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
'$(inherited)',
'PERMISSION_CAMERA=1',
'PERMISSION_MICROPHONE=1',
]
end

# End of the permission_handler configuration

This will allow your app to request access to the camera and microphone when necessary.

Next, go to the Info.plist file in the your_project/ios/Runner directory. Add the following lines of code to the dict section to provide descriptions for the camera and microphone permissions that will be displayed to the user when they are requested:

<key>NSCameraUsageDescription</key>
<string>We need camera access to connect to a live</string>
<key>NSMicrophoneUsageDescription</key>
<string>We need microphone access to connect to a live</string>

This will give the user more information about why the app needs access to these resources.

Finally, open the Runner.xcworkspace file in the your_project > iOS directory to disable Bitcode. Follow the instructions in the images provided below.

Disabling Bitcode will allow your app to be more efficient and potentially improve performance. By following these steps, you can easily configure your iOS project to add the necessary permissions and disable Bitcode.

Run a Demo

Conclusion

In conclusion, it is possible to create karaoke apps for free using the ZEGOCLOUD SDK. By following the steps outlined in the text, you can build a karaoke app that allows users to sing along to their favorite songs and share their performances with others.

How to Make Karaoke Video
How to Make a TV Karaoke App