歌词逐字逐行

更新时间: 2022/11/11 04:01:02

网易云信提供歌词组件(NELyricKit),实现歌曲播放的同时,同步解析并显示歌词。根据歌词文件的类型,分为逐行展示和逐字展示两种模式。

功能介绍

歌词组件包括歌词解析和歌词 UI 两个模块。

歌词逐字逐行.png

歌词组件的业务触发逻辑如下图所示。

uml diagram

集成歌词组件

 implementation("com.netease.yunxin.kit.karaoke:karaokekit-lyric-ui:1.2.0")

实现歌词展示与同步

  1. 初始化歌词解析模块
// NELyricTypeYrc yrc格式
// NELyricTypeQrc qrc格式
NELyric lyric = NELyric.initWithContent(String content, NELyricType type);
  1. 初始化UI模块
 
 <com.netease.yunxin.kit.karaokekit.lyric.ui.widget.NELyricView
        android:id="@+id/lyricView"
        android:layout_width="match_parent"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        app:layout_constraintLeft_toLeftOf="parent"
        // 每行歌词之间的行间距,单位dp
        app:lineSpace="10dp"
        // 高亮歌词的文字前景色
        app:highLightTextColor="#4BF4FF"
        // 高亮歌词的文字背景色
        app:highLightBgTextColor="@android:color/white"
        // 高亮歌词的文字大小,单位sp
        app:highLightTextSizeSp="20sp"
        // 默认歌词的文字颜色
        app:defaultTextColor="#99ffffff"
        // 默认歌词的文字大小,单位sp
        app:defaultTextSizeSp="18sp"
        android:layout_height="90dp"
        android:layout_marginTop="90dp"
        app:layout_constraintTop_toTopOf="parent" />

  1. 设置整首歌的 UI。
lrcView=findViewById(R.id.lyricView);
lrcView.loadWithLyricModel(lyric);
  1. 房主在加入房间后,开始播放伴奏之后,将会触发伴音文件播放进度回调,在回调中调用 NELyricViewupdate 接口,传入当前播放时间戳,刷新歌词。
  2. 观众在加入房间后将会收到主播发来的SEI信息,SEI信息代表着主播当前的播放进度,在收到SEI的回调函数中观众调用 NELyricViewupdate 接口,传入当前播放时间戳,刷新歌词。

示例代码

public void update(long currentTimeMillis);

如果想自己控制UI刷新的频率,可以自己实现定时器来调用 lyricView 的 update 接口,比如每30ms刷新一次播放进度。

实现歌词展示与同步(不含 UI)

  1. 初始化歌词解析模块
// NELyricTypeYrc yrc格式
// NELyricTypeQrc qrc格式
NELyric lyric = NELyric.initWithContent(String content, NELyricType type);
  1. 房主在加入房间后,开始播放伴奏之后,将会触发伴音文件播放进度回调,回调中携带当前的播放进度。
  2. 观众在加入房间后将会收到主播发来的SEI信息,SEI信息代表着主播当前的播放进度,。
  3. 同步更新歌词进度。
    1. 根据回调的时间戳,在 NELyriclineModels 中找到对应行。

    2. 如果是逐字歌词,则再从对应行中找到对应字 NELyricWord

  4. UI 根据获取到的行与字信息显示歌词。

组件核心类文件介绍

文件名 说明
NELyric 歌词解析入口
NELyricLine 歌词行
NELyricWord 歌词字
NELyricView 歌词 UI
此文档是否对你有帮助?
有帮助
去反馈
  • 功能介绍
  • 集成歌词组件
  • 实现歌词展示与同步
  • 实现歌词展示与同步(不含 UI)
  • 组件核心类文件介绍