Help with synchronizing text and audio

[SamLak (Samir Lakehal)]

Dear friends,

I want to make a karaoke like app, I have problem synchronizing text with corresponding sound. First text shows in first loop. highliting text doesn’t not work in second loop. also while playing sound, stoping or pausing player doesn’t work. I show you block I have made for test.

Many thanks for your help.

[solomon_zerihun (:kodular: koder)]

your block seems not get single id and you end up with loop, please try to call single id at a time and increase it while you calling with play btn_1.

[SamLak (Samir Lakehal)]

Dear Solomon,

Thanks for prompt reply I didn’t get what you mean. Indeed only audio player which is playing, text doesn’t highlight in loop. Could you be more specific please.

[solomon_zerihun (:kodular: koder)]

try to not use loop in button_1 to start a player and call single id at a time. if you want to continue on next sound you can set the global variable + 1 in button_1.

[RaYzZz (Gianluca Franco)]

Hi Sam,

In what format do you have the text of the karaoke? Because it can really be handled in many different ways.

What does nachid contain? Is it a list made up of a word plus the moment to highlight it?

[SamLak (Samir Lakehal)]

It is a text of multiple lines, I want to highlight the line while playing the relative audio.

In first loop I got the text well displayed.

In second loop the audio plays but text doesn’t highlight I mean changes color for specefic line indexed in dynamic label.

[RaYzZz (Gianluca Franco)]

I see that you are highlighting by pressing a button, correct?
Or do you intend to automate it later based on the position in the track?

[SamLak (Samir Lakehal)]

I want to automate it. by pressing the button, it starts highlighting the text of the first line and plays audio and so on.

[SamLak (Samir Lakehal)]

I don’t know why dynamic label set background color doesn’t work!

[solomon_zerihun (:kodular: koder)]

Please use timer instead of loop to make your app responsive.

here is the block

[RaYzZz (Gianluca Franco)]

Let’s see if this works for you:

I created a variable called song that contains the song in CSV format (which is a list of lists), where the first element is the lyric line and the second is the time when that line starts (milliseconds).

In Screen.Initialize, I generate simple labels.

When the button is pressed, the song and a timer start.

We also have another variable that keeps track of the current index of song.

In the timer, we check the currentPosition of the track:

• if it is greater than or equal to the index we are evaluating, the corresponding label is highlighted and the previous one is cleared.
• If the index equals the last index of the list, everything stops.
  Otherwise, we move to the next index.

If you have any doubts, feel free to ask.

Karaoke.aia (4.7 MB)

Happy oding!

[SamLak (Samir Lakehal)]

I highly appreciate you help dears, I will let when I am done.

[SamLak (Samir Lakehal)]

Code is working, using a procedure makes app more responsive. Thank you guys for your valuable help.

[SamLak (Samir Lakehal)]

Never late, sorry I did’t mention earlier that your code was also a solution.

Have a nice day

[RaYzZz (Gianluca Franco)]

no problem,
if you need any clarification about the code, feel free to ask me in PM.

Have a nice day and happy oding!