HarmonyOS鸿蒙Next下逐句歌词&逐字歌词组件

HarmonyOS鸿蒙Next下逐句歌词&逐字歌词组件

效果图

逐行歌词	逐字歌词

逐句歌词&逐字歌词

每行开头带时间戳的就是逐句歌词

[00:08.598]I will run I will climb I will soar
[00:12.753]I'm undefeated
[00:16.540]Jumping out of my skin pull the chord
[00:20.732]Yeah I believe it
[00:23.703]The past is everything we were don't make us who we are
[00:31.500]So I'll dream until I make it real and all I see is stars
[00:38.744]It's not until you fall that you fly
[00:43.630]When your dreams come alive you're unstoppable
[00:47.498]Take a shot chase the sun find the beautiful
[00:51.558]We will glow in the dark turning dust to gold
[00:55.473]And we'll dream it possible
[01:03.043]Possible

这种就属于逐字歌词之一，每个单词、文字都带时间戳

逐句歌词&逐字歌词组件库：lyric-view

安装

ohpm install [@jackiehou](/user/jackiehou)/lyric-view

解析逐句歌词&逐字歌词

import { LrcLine,  parseLyrics} from '[@jackiehou](/user/jackiehou)/lyric-view'

@Entry
@ComponentV2
struct SamplePageV2 {
  @Local lrcLines: LrcLine[] = []
    
  async aboutToAppear() {
    this.lrcLines = parseLyrics(lrcString)
  }
}

基础用法，推荐使用状态管理V2

import { LrcLine, LrcPosition, LrcView, parseLyrics} from '[@jackiehou](/user/jackiehou)/lyric-view'

  @Local lrcLines: LrcLine[] = []
  @Local isPlay:boolean = true
  player:media.AVPlayer|undefined
  lrcPosition :LrcPosition = new LrcPosition(() =>this.player?.currentTime ?? 0)

  async aboutToAppear() {
    this.lrcLines = parseLyrics(lrcString)
  }

  build() {
    Column({space:10}) {
      LrcView({
        lrcLines:this.lrcLines,
        isPlay:this.isPlay,
        lrcPosition:this.lrcPosition,
        normalFontColor:$r('sys.color.font_secondary'),
        selectFontColor:$r('sys.color.font_primary'),
        highlightFontColor:$r('sys.color.font_emphasize'),
        onLrcLineClick:(start) =>{
          this.player?.seek(start)
          this.lrcPosition.seekTo(start)
          return true
        },
      })
        .width('100%')
        .layoutWeight(1)

      SymbolGlyph(this.isPlay ? $r('sys.symbol.pause_circle') :$r('sys.symbol.play_circle'))
        .fontSize(50)
        .fontColor([$r('sys.color.font_primary')])
        .onClick(() =>{
          this.isPlay = !this.isPlay
        })
    }
    .height('100%')
    .width('100%')
    .padding(15)
  }

状态管理V1可参考

https://gitee.com/jackiehou/lyric-view/blob/master/entry/src/main/ets/pages/SamplePage.ets

高度只有两行的逐字歌词

LrcView({
  lrcLines: this.lrcLines,
  isPlay: this.isPlay,
  lrcPosition: this.lrcPosition,
  fadingEdgeFraction: 0,//无渐隐效果
  contentStartOffset: 0,
  font: middleFont,
  maxFont: middleFont,
  normalFontColor: $r('sys.color.font_secondary'),
  selectFontColor: $r('sys.color.font_primary'),
  highlightFontColor: $r('sys.color.font_emphasize'),
  isSingleLine: true,//短行歌词效果
  enableScroll: false//禁用滑动
})
  .width('100%')
  .height(middleFont.lineHeight * 2 + 10)

效果图示例代码&仓库地址

https://gitee.com/jackiehou/lyric-view