# Creating an audio progress bar

**URL:** <https://community.thunkable.com/t/creating-an-audio-progress-bar/76699>\
**Category:** Questions about Thunkable X\
**Created:** [May 21, 2019, 9:29pm UTC](https://community.thunkable.com/t/creating-an-audio-progress-bar/76699 "2019-05-21T21:29:11Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![greg\_m1993](https://avatars.discourse-cdn.com/v4/letter/g/9e8a1a/32.png) [@greg\_m1993](https://community.thunkable.com/u/greg_m1993)\
**Post date:** [May 21, 2019, 9:29pm UTC](https://community.thunkable.com/t/creating-an-audio-progress-bar/76699/1 "2019-05-21T21:29:11Z")

</div>

Hi,

I can see there are solutions to this problem for the Classic platform, but not for the cross-platform version.

I am creating a simple audio player, and would like to display a progress bar that fills up dependent upon how much of the audio file has been played.

I would expect to see some options on the sound file to say “send max time to the slider element” or something similar, but cannot find anything! Does anyone know how to set this functionality in the cross-platform version? I’m not looking for it to have a seek-bar functionality, just a progress bar.

Thanks!

---

<div class="post-metadata">

**Author:** ![Avram](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/avram/32/13989_2.png) [@Avram](https://community.thunkable.com/u/Avram)\
**Post date:** [May 21, 2019, 10:26pm UTC](https://community.thunkable.com/t/creating-an-audio-progress-bar/76699/2 "2019-05-21T22:26:25Z")

</div>

If you can read audio length and current position in e.g. seconds, then it’s easy. If track\_length = 100%, then progressbar\_position = (current\_position/track\_length)\*100

Example:  
track\_length: 3 min (180 sec) - 100%  
current\_position: 35 sec  
progressbar\_position: (35/180) \* 100 = 0.1944444 \* 100 = 19.4 (19%)

---

<div class="post-metadata">

**Author:** ![greg\_m1993](https://avatars.discourse-cdn.com/v4/letter/g/9e8a1a/32.png) [@greg\_m1993](https://community.thunkable.com/u/greg_m1993)\
**Post date:** [May 22, 2019, 9:36am UTC](https://community.thunkable.com/t/creating-an-audio-progress-bar/76699/3 "2019-05-22T09:36:47Z")

</div>

Yep that’s what I would have thought too, but I can’t find the options on Thunkable X. Do you know if that is included (and I’m just being dumb not being able to find it!)? Whenever I look in the blocks for “Sound1” it only gives options like play, pause, stop and “on load” etc.

Thanks!

---

<div class="post-metadata">

**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 22, 2019, 9:41am UTC](https://community.thunkable.com/t/creating-an-audio-progress-bar/76699/4 "2019-05-22T09:41:35Z")

</div>

Hey @greg_m1993, are your audio files coming from random playlists, or will you know in advance the source (and duration?) of the songs?

---

<div class="post-metadata">

**Author:** ![greg\_m1993](https://avatars.discourse-cdn.com/v4/letter/g/9e8a1a/32.png) [@greg\_m1993](https://community.thunkable.com/u/greg_m1993)\
**Post date:** [May 22, 2019, 10:47am UTC](https://community.thunkable.com/t/creating-an-audio-progress-bar/76699/5 "2019-05-22T10:47:14Z")

</div>

Hey, they’ll be fairly random to be honest. My users will be uploading audio files that have varying duration which will be stored in my AWS database, and then this app will be using an API to get the URL to play them (so will all be different lengths).

---

<div class="post-metadata">

**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 22, 2019, 12:36pm UTC](https://community.thunkable.com/t/creating-an-audio-progress-bar/76699/6 "2019-05-22T12:36:35Z")

</div>

Sounds good 👍. Are you writing this API yourself or is it third-party? Is there any way obtain track length through this??

---

<div class="post-metadata">

**Author:** ![greg\_m1993](https://avatars.discourse-cdn.com/v4/letter/g/9e8a1a/32.png) [@greg\_m1993](https://community.thunkable.com/u/greg_m1993)\
**Post date:** [May 22, 2019, 8:29pm UTC](https://community.thunkable.com/t/creating-an-audio-progress-bar/76699/7 "2019-05-22T20:29:49Z")

</div>

Writing it myself - at the moment it is not stored by default but I may be able to change that. Is this the only way to do it in the X platform?

Alternatively, would you suggest using the classic platform to build?

Thanks!

---

<div class="post-metadata">

**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 22, 2019, 11:22pm UTC](https://community.thunkable.com/t/creating-an-audio-progress-bar/76699/8 "2019-05-22T23:22:54Z")

</div>

Well, the track length is in the track metadata anyway, so if there’s some way to include or expose this via your API then that seems like the best way to proceed.

I don’t think Classic would be a good choice in this particular case, the projects are limited to just 10MB in size, there’s no support for iOS and, most importantly, there’s no `trackDuration` in the sound or player component either.

---

<div class="post-metadata">

**Author:** ![donavan.naidoofnw](https://avatars.discourse-cdn.com/v4/letter/d/8797f3/32.png) [@donavan.naidoofnw](https://community.thunkable.com/u/donavan.naidoofnw)\
**Post date:** [August 21, 2019, 6:50pm UTC](https://community.thunkable.com/t/creating-an-audio-progress-bar/76699/9 "2019-08-21T18:50:27Z")

</div>

Hi Thunkers, I have a list of songs on the firebase storage. Im a newbie to programming. How can I link a button to play 1 of the songs on the data base.

Please help.

---

<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:** [February 9, 2021, 1:06am UTC](https://community.thunkable.com/t/creating-an-audio-progress-bar/76699/10 "2021-02-09T01:06:19Z")

</div>

Hi Donavan,

I am also trying to do this. Did you have any success with it?

---

<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, 12:11pm UTC](https://community.thunkable.com/t/creating-an-audio-progress-bar/76699/11 "2024-11-08T12:11:48Z")

</div>


