[F/OS] Lyrics Viewer - Play Lyrics for songs in Music Players

🎼 Lyric Viewer

Lyrics Player for Music Apps ( lrc ).

This extension is based on this library : https://github.com/Lauzy/LyricView
All the credits goes to the developer of this particular library. This library has a lot of customization options and every inch of it can be customized.

You can use this extension in your Music Player to allow the user to see the lyrics syncing with the audio ( similar to subtitles for movies in short ). For now, you can load lrc files from assets or from file path.

📽 Demo Videos ( Thanks to @oseamiya for their online player template )

See below video to see all the options enabled / set to default

Showcasing all features


🧰 Core Functions / Events

Event

component_event

Event fired when the play button in Indicator is clicked.

position ~ player position ( millis )
content ~ current lyric line ( string )

Example Usage

blocks(5)

Functions

component_method(1)

Adds the Lyric Viewer to the given component.

view ~ Any Arrangement

blocks(1)

Loads lrc file from either assets or from file path

file Name ~ player position ( string ~ file name in assets )
file Path ~ current lyric line ( string ~ absolute file path )

component_method(2)

Use this block to Update to player position.

position ~ player position ( millis )

Example usage on where you Update time and other things

blocks(2)

blocks(3)

Pauses or Resumes the Auto Scroll when lyric plays.

auto

blocks(4)

Shows and hides the Indicator ( explained later )

image

Their procedure names are self explanatory.

GetLinesCount ~ number of lines in the lyrics

isLyricEmpty ~ returns true if the lyrics is empty or not loaded

Line Position
Line position is the line number of the lyric line. There’s a function to get line position by player position and use in other functions.

GetLinePositionByTime ~ time ( player position ) ~ Returns line position by time.

GetContentByLinePosition ~ linePosition ~ Returns lyric line content by line position.

GetTimeByLinePosition ~ linePosition ~ Returns player position ( millis ) by line position.

component_method(3)

Block to parse time properly.

posiiton ~ time ( millis )


🎨 Customization

This extension has a lot of customization properties. I’ll explain them on how where they will take effect on. Hats off to the developer for making every inch customizable. I’ll break them into several parts with visual representation so it’d be easier to understand.

General Text

image

Text is more like global and applies to all the text except Indicator properties.

→ Text Alignment
Text Alignment of Lyrics ( Accepts )

component_set_get

component_set_get(1)

component_set_get(2)


→ Text Color
Text color of lyrics ( Int )
TextColor

→ Font Size
Font size of lyrics ( float )

→ Custom Type Face
Name of custom typeface from assets ( e.g roboto.ttf )

→ Line Spacing
Spacing height between lyric lines ( float )

→ Touch Delay
Touch delay of lyrics ( Int )


Current Playing Line

Current Line Color

→ Current Lyric Line Color
Color of the current lyric ( Int )

→ Current Lyric Line Bold
Make the current lyric bold ( boolean ~ True or False )


Indicator

image
Indicator will become visible when the user scrolls away from the current playing lyrics.
Note : This can be disabled using the functions

→ Indicator Touch Delay
Delay of indicator touch ( Int )

→ Indicator Text
Indicator Text
Just the time of the player

  • → Indicator Text Color ( Int )

  • → Indicator Text Size ( float )

→ Indicator Margin
Indicator Margin
Indicator Margin ( float )

→ Indicator Line

  • → Indicator Line Width ( float )

  • → Indicator Line Icon Gap
    Indicator Icon Gap
    Gap between play icon and line ( float )

  • → Indicator Line Color ( Int )
    Color of the indicator line

→ Current Indicating Line
IndicatingLineText
The lyric line below the Indicator.
Note : This is Indicating line.

  • → Current Indicating Line Color ( int )
  • → Current Indicating Line Bold ( boolean ~ True or False )

→ Indicator Play Icon
The icon which triggers the event. It has a default icon.

  • → Icon Width ( float )
  • → Icon Height ( float )
  • → Indicator Play Icon ( from assets e.g play.png )

Empty Text

This will become visible when there’s no lyrics.

→ Empty Content ( Text )
The text which will be set to.

→ No Lyric Text Size ( float )

→ No Lryric Text Color ( Int )


📂 Downloads

Extension ( v1.1 ) : com.jaxparrow.lyricviewer.aix (26.3 KB)

If you’re checking for older versions, Github Releases

Test App & Project

Test App ( Everything set to Default ) : GDrive

Test App ( Customized ) : GDrive

Test Project ( Aia ) : GDrive


ℹ️ Open-source and credits

This extension is open-sourced and you’re free to contribute and make this extension even more better.

The library which this extension is based on :

Thanks for @oseamiya for their Music Player Project / Guide

Thanks to @Shreyash for his super Rush.

Extension documentation inspired from Yusuf Cihan.


If you have any questions, feel free to ask in the reply section.
29 Likes

That’s Awesome Extension I just Can’t Believe superb

:+1::+1::+1:

2 Likes

Wow that’s Interesting extension.
I would like to implement in one of my music app

1 Like

Woderfull!
Can we place online url ?

1 Like

No, I’ll add if possible or you/anyone can make a fork of the extension and create a PR.

Thanks for your replies

Wow​:open_mouth:, Wonderful extension!!!

1 Like

Great extension, but it doesn’t seem to work with Companion.

2 Likes

Thanks for you reply.

This crashes on companion due to asset loading. I’ve used the normal way to get the assets and I wanted to mention this in the first post. I’ll find a way to load them in a way that works well in Kodular or anyone who interested can make a PR.

Extension Update ( v1.1 )

  • Companion Crash Fix
    ( AI2 Way of loading assets )

Download ( v1.1 )

com.jaxparrow.lyricviewer.aix (26.3 KB)

Update can be found directly in first post ( won’t take you to Github Releases )

2 Likes

Nice work but -


Why are you trying to get drawable through this much process ai2 has a built in function with MediaUtil -
http://3nportal.com/AIBridge/API/com/google/appinventor/components/runtime/util/MediaUtil.html
and same goes for other places used
though this is not something that useful but still.

2 Likes

Actually, I’ve used this and other methods too. I was testing and it couldn’t load asset in companion / couldn’t get extension’s assets. So, I used this way of getting the assets ( in all the other places too ).

Although it should work but if it does not then its fine.

1 Like

@Jaxparrow Very Useful extension I will also try in my music app

1 Like

Very interesting.

It will ,certainly, serve to improve many music player apps.

2 Likes