Hello Dvelopers…
I create a Online Music Player with Lyrics.
Lyrics Data is taken from airtable.
I wish to add Auto Scrolling Lyrics feature in it with Music Player Thumb Position,
Can anybody have any idea about this project creation,
I will be thankfull for your kind attention.
Thanks.
use animation component
or
Scroll handler extension
https://aix.colintree.cn/en/extensions/ScrollArrangementHandlers.html
i’ll suggest to use Scroll handler extension with respect to time.
I used above extension but it works in Pixl and only for 100 Pixl.
Scrolling is working only for 100 Pixl.
How to code Scrolling Arrangement with Slider Max Value or Thumb Position.
what is slider tool extension for?
This is advanced of Slider.
slider extension is to take thumb position from user also and seek player to that time.
i need player time to pixl conversion now…
so now what you have to do build a logic for this so i am dividing tutorial into parts. there are total 3 parts. -
Suppose you are displaying lyrics in vertical arrangement
So every lyric has different length means some are of 80 words, some 150 words whereas some as of 120.
i wanna say due to different length of lyrics we get different height for vertical arrangement.
So first of all you have to store active height of that vertical arrangement where we are displaying lyrics.
so in this part we have to understand that how much we have to scroll in 1 second.
Now suppose height is 240pixel and you stored it i variable(Named lyricheight)
Now we have to focus on time length of music suppose its of 2 min therefore mean 120sec.
so now as we no we can conclude that height is 240px and time 120sec it mean in 1 sec we have to scroll by 2px.
As we got that we have to scroll it by 2px every second
Now take clock and set it to 1000ms and in when clock.timer set timer enable to false and then do scroll by 2px .after that agar enable timer.
and in the end of music just stop the timer.
you are scrolling lyrics till the end of song.
ok i try…
thanks dear to write so much.
I wrote it because it’s little tricky topic
But the way topic is nice
Create variable DecimalPX initialize in to 0.
Now in clock.timer
you have 2 if condition and that is
First in which we check about music ends or not {
if it is true then you have to scroll it by 54px else you are stopping the clock
}
and Second condition will be
if DecimalPX is greater than or equal to 1 then
scroll arrangement by 1px and
set DecimalPX to DecimalPX - 1
else add .78 every time.
hope you understand…
we can’t Use above method becoz if user seek by using thumb position than above method fails.
calculation should be 100% accurate if not than scrooling lyrics with time not correct.
main issue is point 1
for issue 1
store music length in variable(Let name be MusicLen suppose its stores in second valur not in millisecond) and instead of checking music end just check if MusicLen is greater than than 0 then do scrolling by calculated pixel and set MusicLen to MusicLen - 1
and when we seek music then disable clock time and get value that how much it is seeked and then MusicLen to MusicLen - SeekedTIme. and scroll vertical arrangement by Seekedtime * 54.78 and then again enable the clock timer.
for issue 2 i want to tell that in the end only less than 1px will be left to br scrolled
that mean if height is 200px then till end it will only scroll till 199px.
one more thing vertical scroll arrangement height is automatic…
i am using
will this autocorrect and take its value.
take a variable(named lyricheight and initialize it to 0 ) and and when you set lyrics to label then after that set lyricheight to vertical arrangement height.
and in below block
instead of vertical scroll arrangement height use lyricheight variable.
Please see my blocks…what is wrong thing…
Result :- Scrolling is working very slow (very small value of pixl)
You just have your answer… look at your blocks yourself…
what is duration of songDurationClock
