# Designing a Music Player **URL:** \ **Category:** Questions about Thunkable X\ **Created:** [May 19, 2020, 9:04am UTC](https://community.thunkable.com/t/designing-a-music-player/577450 "2020-05-19T09:04:07Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![tobi](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tobi/32/70526_2.png) [@tobi](https://community.thunkable.com/u/tobi)\ **Post date:** [May 19, 2020, 9:04am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/1 "2020-05-19T09:04:07Z")
Hey, Can anyone tell me how to use slider or any other component as a music player slider? ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/9/795b5b41fc846315a7ab338a6d9798d955982614.png) I want to make something like this 👆 👆 Thanks, ---
**Author:** ![sirfrancisdrake](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sirfrancisdrake/32/70212_2.png) [@sirfrancisdrake](https://community.thunkable.com/u/sirfrancisdrake)\ **Post date:** [May 19, 2020, 9:08am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/2 "2020-05-19T09:08:20Z")
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! 🙂 ---
**Author:** ![tobi](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tobi/32/70526_2.png) [@tobi](https://community.thunkable.com/u/tobi)\ **Post date:** [May 19, 2020, 9:56am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/3 "2020-05-19T09:56:09Z")
I will try Thanks for reply 🙂 🙂 ---
**Author:** ![tobi](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tobi/32/70526_2.png) [@tobi](https://community.thunkable.com/u/tobi)\ **Post date:** [May 19, 2020, 10:03am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/4 "2020-05-19T10:03:37Z")
Can you help me with a screenshot of blocks ---
**Author:** ![sirfrancisdrake](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sirfrancisdrake/32/70212_2.png) [@sirfrancisdrake](https://community.thunkable.com/u/sirfrancisdrake)\ **Post date:** [May 19, 2020, 10:05am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/5 "2020-05-19T10:05:31Z")
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 ---
**Author:** ![sirfrancisdrake](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sirfrancisdrake/32/70212_2.png) [@sirfrancisdrake](https://community.thunkable.com/u/sirfrancisdrake)\ **Post date:** [May 19, 2020, 10:06am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/6 "2020-05-19T10:06:33Z")
sorry actually unable ---
**Author:** ![tobi](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tobi/32/70526_2.png) [@tobi](https://community.thunkable.com/u/tobi)\ **Post date:** [May 19, 2020, 10:08am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/7 "2020-05-19T10:08:09Z")
What do you mean by tottime ---
**Author:** ![sirfrancisdrake](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sirfrancisdrake/32/70212_2.png) [@sirfrancisdrake](https://community.thunkable.com/u/sirfrancisdrake)\ **Post date:** [May 19, 2020, 10:15am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/8 "2020-05-19T10:15:31Z")
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… . ---
**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\ **Post date:** [May 19, 2020, 12:40pm UTC](https://community.thunkable.com/t/designing-a-music-player/577450/9 "2020-05-19T12:40:21Z")
Hey @tobi Just to expand a little on what @sirfrancisdrake has recommended, we have a tutorial the demonstrates how to do this here: [http://community.thunkable.com/t/how-to-create-a-progress-bar/115625?u=domhnallohanlon](http://community.thunkable.com/t/how-to-create-a-progress-bar/115625) Although you could probably just as easily use the [Slider](https://docs.thunkable.com/slider) component. We also have this Playlist tutorial: [http://community.thunkable.com/t/music-app-with-playlist-loop-shuffle-tracks/563054?u=domhnallohanlon](http://community.thunkable.com/t/music-app-with-playlist-loop-shuffle-tracks/563054) And finally, you might get some inspiration from this weekend design challenge: > [@art WDC #1 (Weekend Design Challenge)](http://community.thunkable.com/t/wdc-1-weekend-design-challenge/76905): > > 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 musical_note radio musical_note 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/… ---
**Author:** ![sirfrancisdrake](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sirfrancisdrake/32/70212_2.png) [@sirfrancisdrake](https://community.thunkable.com/u/sirfrancisdrake)\ **Post date:** [May 20, 2020, 7:09am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/10 "2020-05-20T07:09:00Z")
2019… is it still valid? 🙂 ---
**Author:** ![carlinmclellan](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/carlinmclellan/32/77831_2.png) [@carlinmclellan](https://community.thunkable.com/u/carlinmclellan)\ **Post date:** [February 10, 2021, 10:38am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/11 "2021-02-10T10:38:33Z")
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! ---
**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\ **Post date:** [February 10, 2021, 11:33am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/12 "2021-02-10T11:33:51Z")
Are you working from a set playlist @carlinmclellan (i.e one where you know all the tracks and their durations?) ---
**Author:** ![carlinmclellan](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/carlinmclellan/32/77831_2.png) [@carlinmclellan](https://community.thunkable.com/u/carlinmclellan)\ **Post date:** [February 10, 2021, 11:56am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/13 "2021-02-10T11:56:03Z")
Hi Dom Yep a set playlist. ---
**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\ **Post date:** [February 10, 2021, 9:21pm UTC](https://community.thunkable.com/t/designing-a-music-player/577450/14 "2021-02-10T21:21:46Z")
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?) ---
**Author:** ![carlinmclellan](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/carlinmclellan/32/77831_2.png) [@carlinmclellan](https://community.thunkable.com/u/carlinmclellan)\ **Post date:** [February 10, 2021, 10:45pm UTC](https://community.thunkable.com/t/designing-a-music-player/577450/15 "2021-02-10T22:45:01Z")
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 ---
**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\ **Post date:** [February 10, 2021, 11:36pm UTC](https://community.thunkable.com/t/designing-a-music-player/577450/16 "2021-02-10T23:36:30Z")
It’s basically the opposite of this tutorial: > [@How to create a progress bar](https://community.thunkable.com/t/how-to-create-a-progress-bar/115625): > > 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. recycle Remix this app If you want jump straight in and get a copy of this project yourself then just click on this [remix link](https://x.thunkable.com/copy/7b0ea9fa53caf9bd1c3fe7ec3540a970) 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! ---
**Author:** ![tobi](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tobi/32/70526_2.png) [@tobi](https://community.thunkable.com/u/tobi)\ **Post date:** [February 11, 2021, 9:36am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/17 "2021-02-11T09:36:20Z")
No. Not Yet! 🤔 ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [February 11, 2021, 10:20am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/18 "2021-02-11T10:20:05Z")
@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](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 ---
**Author:** ![carlinmclellan](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/carlinmclellan/32/77831_2.png) [@carlinmclellan](https://community.thunkable.com/u/carlinmclellan)\ **Post date:** [March 1, 2021, 9:54am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/20 "2021-03-01T09:54:14Z")
@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. ---
**Author:** ![dheena2020](https://avatars.discourse-cdn.com/v4/letter/d/d6d6ee/32.png) [@dheena2020](https://community.thunkable.com/u/dheena2020)\ **Post date:** [March 1, 2021, 12:47pm UTC](https://community.thunkable.com/t/designing-a-music-player/577450/21 "2021-03-01T12:47:24Z")
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](https://x.thunkable.com/projects/602949c6d565db7cda91e493/9452a335-9930-402f-9a19-303a44fc816b/designer) happy to help [Next page](https://community.thunkable.com/t/designing-a-music-player/577450.md?page=2)