Designing a Music Player

[tobi]

Hey,
Can anyone tell me how to use slider or any other component as a music player slider?

I want to make something like this

Thanks,

[sirfrancisdrake]

hi @tobi,
i think you can put 2 row one inside the other. The bigger has a light color, the one inside has a darker color. The bigger has a width fixed, the smaller has the width that change with the time elapsed listening you favourite song!

[tobi]

I will try

Thanks for reply

[tobi]

Can you help me with a screenshot of blocks

[sirfrancisdrake]

Create a row (main) for the player maybe 90% width of the screen. Inside you add a row (tottime) 90% of main. inside tottime you add a row (elapsedtime) which width is proportional to elapsed time.
should works. Differentiate it by colors and align them LEFT

[sirfrancisdrake]

sorry actually unable

[tobi]

What do you mean by tottime

[sirfrancisdrake]

if you select a song to play, raw called “tottime” should be in width proportional to the lenght of the song. The row “elapsedtime” represent the time while playing the song so its width will start from 0 reaching 100% of the “tottime” when the song is finished. Hope to have some time this eve to help you…
.

[domhnallohanlon]

Hey @tobi

Just to expand a little on what @sirfrancisdrake has recommended, we have a tutorial the demonstrates how to do this here:

How to create a progress bar

Overview At the end of this tutorial you will be able to create a custom progress bar for your apps, just like the thin yellow bar that you can see scrolling across the bottom of the screen here. [progress_bar] Remix this app If you want jump straight in and get a copy of this project yourself then just click on this remix link 1. Increment and Show Percent For this example the CounterLabel.Text starts at 0 and increases with each button press. To set the width of the ProgressLab…

Although you could probably just as easily use the Slider component.

We also have this Playlist tutorial:

Music App with Playlist, Loop, Shuffle tracks

Loop Through a Playlist The first thing you’ll need for your music app is two variables. The currentTrackNumber variable keeps track of which song is playing right now The listOfTracks is your playlist where you’ll store your songs [playlist_01] The next thing you need is to make the Play button load up the first track [playlsit_02] To help you imagine what’s going on here, you can think of it being like a juke box selecting a record. You’re queuing up something to play, but it’s not re…

And finally, you might get some inspiration from this weekend design challenge:

WDC #1 (Weekend Design Challenge)

Hi Thunkers - we’re excited to announce the first weekend design challenge. Between now and Monday you are encouraged to design and share you UI designs for a Music Player App This is purely a design challenge, so your app does not need to function. You can use Photoshop, Pixlr, Figma etc for your design if you really want to, but ideally you’ll use Thunkable. The inspiration for this challenge comes from the Spotify app, so your UI should include: Play/…

[sirfrancisdrake]

2019… is it still valid?

[carlinmclellan]

Hi Tanish,
Did you work out how to create the time elapsed bar for your music player? I have been looking everywhere to try and figure this out!

[domhnallohanlon]

Are you working from a set playlist @carlinmclellan (i.e one where you know all the tracks and their durations?)

[carlinmclellan]

Hi Dom

Yep a set playlist.

[domhnallohanlon]

Thanks @carlinmclellan - so can you create a list with track durations and use that for your progress bar? (Or are there thousands or millions of songs in your playlist that might make this impractical?)

[carlinmclellan]

Yep it’s just for 7 songs.

I just am struggling to work out how to block that out.

Are you able to show me an example of what that would look like in the blocks?

Thanks heaps - Really get a lot out of your youtube videos by the way!

Carlin

[domhnallohanlon]

It’s basically the opposite of this tutorial:

How to create a progress bar

Overview At the end of this tutorial you will be able to create a custom progress bar for your apps, just like the thin yellow bar that you can see scrolling across the bottom of the screen here. [progress_bar] Remix this app If you want jump straight in and get a copy of this project yourself then just click on this remix link 1. Increment and Show Percent For this example the CounterLabel.Text starts at 0 and increases with each button press. To set the width of the ProgressLab…

Only you’re counting down instead of counting up.

Sure take a look and let me know how you get on with it!

[tobi]

No. Not Yet!

[muneer]

@carlinmclellan you can do it with the web viewer easily.

[Update]
This is a quick demo just to prove the concept

https://x.thunkable.com/projectPage/60250d9ec0d1251227b520dc

Because you said you only have 7 songs, I created a list of 3 audio files just to prove it works. I created 3 html files each to start a different sound file (of course you can use the Post extension of the web viewer) every time you select a file from the list I assign the corresponding html file to the web viewer to display it.

Happy Thunking

[carlinmclellan]

@muneer Thank you so much, I really appreciate it!!! I’ve been stuck with this project for months and your help has really made a big difference.

[dheena2020]

Well I already Designed it and Coded You Can take it if you want or change every code to design can I show the link for The project: Thunkable happy to help