王心凌与谭维维合唱《山海》

“他明白,他明白,我给不起,于是转身向山里走去。”

《浪姐3》二公舞台王心凌和谭维维合唱的《山海》燃炸全场,引得屏幕前的粉丝也跟着王心凌一起飙高音。

如果能开发一个在线K歌应用,就能与王心凌线上合唱实现追星自由。

如何快速实现合唱功能?即构科技提供了实时合唱一站式解决方案和技术实现流程。

目前行业内普遍采用的合唱方案为“串行合唱”。在“串行合唱”方案中,合唱各方串行加入,伴奏由主唱端混入。从本质上来说,这是一种“伪实时合唱”。

·主唱体验缺失:副唱、听众合唱同步效果良好,但主唱无法实时听到副唱的歌声

·合唱人数有限制:三人或以上的合唱实现复杂,延迟高,难以真正落地

为了突破这两个限制,同时不影响副唱和听众端的体验,即构对方案架构进行了重构,克服了多个技术挑战,实现了合唱者之间的实时互动,也满足了三人及以上的合唱需求。

本文将分享如何基于ZEGO SDK轻松实现在线K歌房,适合想极速搭建在线 K 歌房的开发者。也适合想清晰听到王心凌歌声的男粉们。近期即构七周年庆全线产品1折起,有需要的开发者可点击详情了解:https://www.zego.im/activity/2100005

在线K歌技术方案

通过 ZEGO Express SDK,可极速搭建含 正版曲库 的在线 KTV 场景:

在线K歌场景下实时合唱方案

针对实时合唱的场景,ZEGO 提供了一站式解决方案,让开发者极速搭建能够真正进行“合唱”的在线 K 歌房。

各端在连麦的基础上同时播放歌曲伴奏,然后上麦进行合唱,双人模式下主唱和副唱可以互相听到对方声音,多人模式下合唱者之间都能听到彼此声音,几乎感受不到延迟,达到了真正意义上的实时合唱。

在媒体流方面,合唱者互相进行推拉流,同时会由一名合唱者推出歌曲伴奏,其他合唱者在本地播放伴奏,经过 NTP 进行时间同步。另外,歌曲伴奏和所有合唱者的声音都通过 ZEGO RTC 进行混流服务处理形成一条流,观众只需拉一条流即可听到各端同步的声音,完美实现多人合唱的效果。

该方案的优点在于:

  • 降低了端到端的时延。
  • 提供了用户中途加入合唱的解决方案。
  • 精准同步不同端之间的伴奏、歌词、人声。
  • 改善各端设备性能和本地时间不精准的情况,降低网络环境造成的时延影响。

实时合唱方案技术实现流程

1 概述

搭建一个完整的在线 KTV 需要实时语音(RTC)、点歌(歌曲的获取与分享)、歌词展示等基础能力,并通过以上基础能力实现合唱、麦位管理、房间管理、歌词展示与同步等业务系统。

2 基本流程介绍

以下介绍实现一个完整在线 KTV 的基本流程,可帮助您从整体上理解在线 KTV 的核心业务。

2.1 基础业务模块

在线 KTV 整体方案包含房间管理、麦位管理、点歌系统、合唱同步管理、歌词同步管理 5 个业务模块,基本业务流程如下:

在线 K 歌房内的用户有多种角色,包括房主、合唱者、观众。

角色 描述
房主 创建 KTV 房间并推送人声、伴奏到远端,并发起混流任务。房主会自动上麦并固定为麦上首位。
合唱者 合唱者可以点歌,或者与其他合唱者进行合唱。
观众 进入 KTV 房间后,拉取播放房间内的混流。

不同角色在本方案中的基本实现流程如下:

房主

  1. 房主创建并加入房间。
  2. 发起混流任务(包括房主的人声流、房主伴奏流以及所有合唱者的人声流)。
  3. 通过发送 SEI 信息同步房间内所有人的歌曲播放进度。
  4. 房主退出房间,房间内所有成员自动退房。
    房主创建及离开 RTC 房间,均需由业务服务器创建房间获取对应的 roomID 和 userID 后,然后通过调用 Express 接口 loginRoom 登录房间和 logoutRoom 接口退出房间。

房主通过调用 Express 相关接口进行点歌、下载歌曲和歌词、播放歌曲和发送 SEI 信息等操作,中间则由业务服务器监听房间内歌曲、麦位的信息变更,并通知房间内所有成员。歌词下载完毕后,通过歌词 UI 组件进行逐行或者逐字歌词的展示。

合唱者

  1. 观众获取房间列表并加入房间后,上麦成为合唱者。
  2. 推送自己的人声流,拉取所有合唱者的人声流,但不拉取混流。
  3. 接收并解析房主发送的 SEI 信息,校准本端播放器进度和歌词。
    观众加入 RTC 房间上麦成为合唱者,通过获取由业务服务器创建房间对应的 roomID 和 userID 后,然后通过调用 Express 接口 loginRoom 登录房间。

合唱者通过调用 Express 相关接口下载歌曲和歌词、播放歌曲、接收和解析房主发送的 SEI 信息、同步伴奏/歌词等操作,中间则由业务服务器监听房间内歌曲、麦位的信息变更,并通知房间内所有成员。歌词下载完毕后,通过歌词 UI 组件进行逐行或者逐字歌词的展示。

观众

  1. 观众获取房间列表并加入房间。
  2. 监听房间歌曲变化,并加载歌词。
  3. 拉取房主发送的混流。
  4. 解析房主发送的 SEI 信息同步歌词。
    观众加入 RTC 房间,通过获取由业务服务器创建房间对应的 roomID 和 userID 后,然后通过调用 Express 接口 loginRoom 登录房间。

观众通过调用 Express 相关接口下载歌词、拉取混流、接收和解析房主发送的 SEI 信息等操作,中间则由业务服务器监听房间内歌曲、麦位的信息变更,并通知房间内所有成员。歌词下载完毕后,通过歌词 UI 组件进行逐行或者逐字歌词的展示。

2.2 重要业务模块

以下对房间管理、点歌(获取与分享歌曲)、合唱、歌词展示四个重要模块进行简单介绍。

房间管理

在线 KTV 中,一般不同的用户会在一个房间内进行 K 歌,并且还提供了一个当前的房间列表,这两部分共同构成了我们的房间管理系统,我们需搭配业务服务器和 Express SDK 来实现这个功能。

房主需在业务服务器创建房间获取对应的 roomID 和 userID 后,再创建 RTC 房间,然后通过调用 Express 接口 loginRoom 登录房间和 logoutRoom 接口退出房间。

API 调用时序可参考下图:

点歌(获取与分享歌曲)

点歌系统是在线 KTV 中关键部分,使用 Express SDK 提供的点歌能力,通过获取正版曲库中的音乐资源,并分享给房间内的其他用户进行合唱。详情请参考 点歌(获取和分享歌曲)

点歌操作可以在榜单列表或者歌曲搜索结果进行。所点的歌曲将会进入已点队列,按照点歌时间逐首依次播放。

点歌人使用 songID 请求歌曲资源会触发一次计费,房间内其余人使用 token 请求歌曲资源则不会触发计费。

API 调用时序可参考下图:

合唱

在线 KTV 房间中的用户在合唱的过程中,人声和伴奏都要保持多端同步。

  • 对于合唱者而言,歌曲的各端同步主要通过 SEI 消息实现。SEI 携带当前播放歌曲的 songID 以及歌曲播放进度 progress等,用于多端同步播放的信息。SEI 的发送时间间隔可以与播放器进度回调的时间间隔保持一致。
  • 对于观众而言,歌曲和人声的同步通过Express SDK 提供的精准混流功能实现。

流管理是多人实时合唱中非常重要的一部分。房主、合唱者、观众的推拉流策略需要互相配合以达到较好的合唱效果。

通过 Express SDK 的精准网络时间获取接口,以及麦上其他合唱者约定合唱的精确时间,来进行播放伴奏和合唱,达到各合唱者之间的高度同步。详情请参考 合唱同步实现流程

API 调用时序可参考下图:

合唱

  • 流管理

  •  

歌词展示

我们提供了开箱即用的歌词 UI 组件,开发者可与 Express SDK(含版权音乐功能)搭配使用,快速展示歌词效果。详情可参考 歌词展示与同步

集成ZEGO SDK

1 准备环境

在开始集成 ZEGO Express SDK 前,请确保开发环境满足以下要求:

  • Android Studio 2020.3.1 或以上版本。
    Android Studio 版本编号系统的变更请参考 Android Studio 版本说明

  • Android SDK 25、Android SDK Build-Tools 25.0.2、Android SDK Platform-Tools 25.x.x 或以上版本。

  • Android 4.4 或以上版本,且支持音视频的 Android 设备。

  • Android 设备已经连接到 Internet。

2 项目准备

2.1 创建项目

进入即构官网,在【ZEGO控制台】创建项目,并申请有效的 AppID,这一步很关键,appid为应用的唯一标识,如身份证号,是应用的身份证明,用于明确你的项目及组织身份。zego提供的服务也是基于APP ID;

App ID的获取方式很简单,只需3~5分钟,在即构官网-我的项目-创建即可。创建的项目信息可用于SDK的集成和配置;

2.2 Token 鉴权

  • 登录房间时必须 使用 Token 鉴权 ,可参考 Token 鉴权教程
  • 为了方便开发阶段的调试,开发者可直接在 ZEGO 控制台获取临时 Token(有效期为 24 小时) 来使用,详情请参考 控制台(新版) - 项目管理 中的 “项目信息”。

3 集成 SDK

3.1 项目设置

开始集成前,可参考如下步骤设置你的项目;

如已有项目,本步骤可忽略。

如需新建项目,可按照以下步骤创建你的新项目:

1.打开 Android Studio,选择 “File > New > New Project” 菜单。

2.填写项目名及项目存储路径。

3.其它按照默认设置,单击 “Next”,最后单击 “Finish” 完成新工程创建。

3.2 导入 SDK

目前支持的平台架构包括:armeabi-v7a、arm64-v8a、x86、x86_64。

在实现基本的实时音视频功能之前,需确保获取的sdk为最新版本,保证音视频功能体验为最优;

  • 使用 JitPack 自动集成 SDK
    进入项目根目录,打开 “build.gradle” 文件,在 “allprojects” 中加入如下代码。
...
allprojects {
    repositories {
        maven { url 'https://www.jitpack.io' }
        google()
        jcenter()
    }
}

进入 “app” 目录,打开 “build.gradle” 文件,在 “dependencies” 中添加 implementation 'com.github.zegolibrary:express-video:2.+',这样能获取到最新的版本,如果需要下载指定版本,请从 https://jitpack.io/#zegolibrary/express-video 查询具体版本号,并将 2.+ 修改为指定的版本号。

...
dependencies {
    ...
    implementation 'com.github.zegolibrary:express-video:2.+'
}
1.**2.7.0** 版本开始,Zego 将使用 JitPack 代替 JCenter 作为 SDK 托管服务器,因此开发者需手动将 `build.gradle` 里的配置变更为 `'com.github.zegolibrary:express-video:2.+'`
2. JCenter **2021-03-31** 之后停止上传新版本 SDK,该服务将于 **2021-05-01 停用**,详情请参考 [Service End for JCenter](https://jfrog.com/blog/into-the-sunset-bintray-jcenter-gocenter-and-chartcenter/)。
3.**1.11.0** 版本开始,依赖的命令从 `implementation 'im.zego:express-engine-video:x.y.z'` 改为 `implementation 'im.zego:express-video:x.y.z'`。使用 **1.11.0 以下** 的版本不受影响,但后续不再从 “express-engine-video” 里更新,建议所有使用旧版本的开发者切换到 **1.11.0 或以上** 的版本进行集成。

4 设置权限

以上步骤集成已完成,为保证SDK运行效果更佳,需要在应用中设置所需的权限,步骤如下:

进入 “app/src/main” 目录,打开 “AndroidManifest.xml” 文件,添加权限。

<!-- SDK 必须使用的权限 -->
<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" />

<!-- App 需要使用的部分权限 -->
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />

<uses-feature
    android:glEsVersion="0x00020000"
    android:required="true" />

<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />

因为 Android 6.0 在一些比较重要的权限上要求必须申请动态权限,不能只通过 “AndroidMainfest.xml” 文件申请静态权限。因此还需要参考执行如下代码,其中 “requestPermissions” 是 “Activity” 的方法。

String[] permissionNeeded = {
    "android.permission.CAMERA",
    "android.permission.RECORD_AUDIO"};

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    if (ContextCompat.checkSelfPermission(this, "android.permission.CAMERA") != PackageManager.PERMISSION_GRANTED ||
        ContextCompat.checkSelfPermission(this, "android.permission.RECORD_AUDIO") != PackageManager.PERMISSION_GRANTED) {
        requestPermissions(permissionNeeded, 101);
    }
}

具体的权限说明如下:

必要性 权限 权限说明 申请原因
必要权限 INTERNET 访问网络权限。 SDK 基本功能都需要在联网的情况下才可以使用。
  ACCESS_WIFI_STATE 获取当前 WiFi 状态权限。 SDK 会根据网络状态的改变执行不同的操作。例如当网络重连的时候,SDK 内部会将网络断开时的状态都恢复,用户不需做额外的操作。
  ACCESS_NETWORK_STATE 获取当前网络状态权限。  
  CAMERA 访问相机权限。 预览和发送视频的时候需要使用该权限。
  RECORD_AUDIO 录制音频权限。 发送音频的时候需要使用该权限。
  BLUETOOTH 连接蓝牙设备权限。 连接蓝牙设备时需要使用该权限。
  MODIFY_AUDIO_SETTINGS 修改音频配置权限。 修改音频设备配置时需要使用该权限。
  WRITE_EXTERNAL_STORAGE 内置 SDK 写权限。 SDK 会将日志和相关配置文件保存在内置 SDK 内。
非必要权限 READ_PHONE_STATE 允许以只读方式访问电话状态,包括当前的呼叫状态。 SDK 会根据当前的呼叫状态,启停音频设备。如监听到当前为呼叫状态,则 SDK 会自动停止使用音频设备,直到通话结束。

其中非必要权限 “android.permission.READ_PHONE_STATE” 仅用于实现 SDK 的打断事件处理,因此只需在 AndroidMainfest.xml 文件中进行声明即可,不需要动态申请(业务方有需求则另外处理)。

5 防止混淆代码

在 “proguard-rules.pro” 文件中,为 SDK 添加 -keep 类的配置,防止混淆 SDK 公共类名称。

1
-keep class **.zego.**{*;}

与王心凌合唱在线K歌房实现了!!!

恭喜,王心凌在线K歌房实时合唱功能已完成,可下载甜心教主的热门歌曲:《爱你》《睫毛弯弯》,或者翻唱的《山海》。实现追星自由,也可与好友一起多人实时合唱畅享线上K歌体验。

获取更多文档、Demo、技术帮助