# Designing a Music Player

**URL:** <https://community.thunkable.com/t/designing-a-music-player/577450>\
**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:** 15\
**Page:** 2

<div class="post-metadata">

**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:** [March 1, 2021, 3:56pm UTC](https://community.thunkable.com/t/designing-a-music-player/577450/22 "2021-03-01T15:56:40Z")

</div>

Glad that helped you.

---

<div class="post-metadata">

**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 5, 2021, 1:35am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/23 "2021-03-05T01:35:29Z")

</div>

The using the webviewer is working well on my phone however I have just tested it on my iPad and the sizing is wrong - It hasn’t scaled and so the buttons are too small. Do you have any idea on how to get around this?

---

<div class="post-metadata">

**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:** [March 5, 2021, 8:34am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/24 "2021-03-05T08:34:55Z")

</div>

Can you send me some screenshots to help see the problem.

Whatever it is, there is always a solution.

---

<div class="post-metadata">

**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 6, 2021, 1:22am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/25 "2021-03-06T01:22:15Z")

</div>

That’s a good way of thinking… There is always a solution.

I was able to do a bit of tweaking to get it to resize a bit better on the iPad. To be honest I really don’t know HOW it is working, but it seems to be a fair bit better now. My concern though is that when it is viewed on different sized devices the resizing will be buggy in some cases.

For the webviewer when I made the width 200% and placed it inside a column, it seemed to retain its dimensions on my phone, and also was big enough on the iPad.  
In Advanced I turned off ScalesPageToFit  
 ![Screen Shot 2021-03-06 at 12.16.59 PM.png](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/a/2a2d5321cb87a3b8b40be4e6ac2ae904e1751491.png)

I’m hosting the files on my personal website. Using the Wix audio player. I’m not sure if there’s a better way I could be hosting the files?  
This is what the layout of the website looks like.

 ![Screen Shot 2021-03-06 at 12.17.50 PM.png](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/6/668725b1d87d403f258bc7184cad02c048a253a2.png)

So possibly it will be fine, but would be good to hear if you have any suggestions for how I could be doing things better.

I haven’t really been able to get my head around MediaDB and hosting files through Firebase but I know that I’ll need to figure that out sooner or later.

---

<div class="post-metadata">

**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 6, 2021, 1:22am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/26 "2021-03-06T01:22:31Z")

</div>

Thanks again for your help.

![Screen Shot 2021-03-06 at 12.16.59 PM.png](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/a/2a2d5321cb87a3b8b40be4e6ac2ae904e1751491.png)

 ![Screen Shot 2021-03-06 at 12.17.50 PM.png](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/6/668725b1d87d403f258bc7184cad02c048a253a2.png)

---

<div class="post-metadata">

**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:** [March 6, 2021, 9:27am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/27 "2021-03-06T09:27:23Z")

</div>

In situations that I need to adjust the size of one of the component, I would read the `computed height` and `computed width` and from these two I will decide how the size of my component would be in relation to these numbers.

This way the view of your app will fit all screen sizes, if you feel it necessary.

---

<div class="post-metadata">

**Author:** ![sheena\_g85o](https://avatars.discourse-cdn.com/v4/letter/s/c5a1d2/32.png) [@sheena\_g85o](https://community.thunkable.com/u/sheena_g85o)\
**Post date:** [May 5, 2021, 10:07am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/28 "2021-05-05T10:07:25Z")

</div>

Hi i need help with the same

---

<div class="post-metadata">

**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:** [May 5, 2021, 11:29am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/29 "2021-05-05T11:29:30Z")

</div>

Use it and change on it to meet your needs.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [May 5, 2021, 3:45pm UTC](https://community.thunkable.com/t/designing-a-music-player/577450/30 "2021-05-05T15:45:26Z")

</div>

Hi @sheena_g85o, welcome to Thunkable! When you post a question, make sure to include details about what you need help with, what your question is, what you’ve already tried (screenshots are really helpful!), and what happens when you preview your blocks.

---

<div class="post-metadata">

**Author:** ![sheena\_g85o](https://avatars.discourse-cdn.com/v4/letter/s/c5a1d2/32.png) [@sheena\_g85o](https://community.thunkable.com/u/sheena_g85o)\
**Post date:** [May 6, 2021, 12:39pm UTC](https://community.thunkable.com/t/designing-a-music-player/577450/31 "2021-05-06T12:39:00Z")

</div>

Hi , thank u for such a prompt reply. I want to add a slider to my music player app to control the time frame of my song. . I know you have added the webviewer in your app and then added a URL . I want to learn how to do the same but by without adding a webviewer.  
I am attaching a link.  
[https://x.thunkable.com/projects/60797605b3785100123dfa81/f01a1633-a6ae-4a76-bbbc-f58eb458d76c/designer](https://x.thunkable.com/projects/60797605b3785100123dfa81/f01a1633-a6ae-4a76-bbbc-f58eb458d76c/designer)

Please see screen 1

 ![Screenshot 2021-05-06 at 6.07.29 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/c/4c47c189841b72e494d7ade4130a791996d5498c.png)

---

<div class="post-metadata">

**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:** [May 6, 2021, 2:44pm UTC](https://community.thunkable.com/t/designing-a-music-player/577450/32 "2021-05-06T14:44:00Z")

</div>

Thunkable does not have a block that can give you the duration of the music file. This is the main reason I made it through a Web Viewer.

---

<div class="post-metadata">

**Author:** ![sheena\_g85o](https://avatars.discourse-cdn.com/v4/letter/s/c5a1d2/32.png) [@sheena\_g85o](https://community.thunkable.com/u/sheena_g85o)\
**Post date:** [May 6, 2021, 2:59pm UTC](https://community.thunkable.com/t/designing-a-music-player/577450/33 "2021-05-06T14:59:49Z")

</div>

Ok , but how did u create it through the Web Viewer.  
The url that you have pasted in the Web viewer is exactly what .

---

<div class="post-metadata">

**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:** [May 6, 2021, 3:04pm UTC](https://community.thunkable.com/t/designing-a-music-player/577450/34 "2021-05-06T15:04:20Z")

</div>

I created my own HTML files that has sound components and the Web Viewer is just opening my HTML files.

---

<div class="post-metadata">

**Author:** ![sheena\_g85o](https://avatars.discourse-cdn.com/v4/letter/s/c5a1d2/32.png) [@sheena\_g85o](https://community.thunkable.com/u/sheena_g85o)\
**Post date:** [May 6, 2021, 3:34pm UTC](https://community.thunkable.com/t/designing-a-music-player/577450/35 "2021-05-06T15:34:57Z")

</div>

Ok now the big problem i have in front of me is i don’t k kw how to create the html file with the sound component

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 11:29am UTC](https://community.thunkable.com/t/designing-a-music-player/577450/36 "2024-11-08T11:29:06Z")

</div>

Closed on November 8, 2024, 11:29am UTC



[Previous page](https://community.thunkable.com/t/designing-a-music-player/577450.md?page=1)
