# How to display mp3 in data viewer list or data viewer grid

**URL:** https://community.thunkable.com/t/how-to-display-mp3-in-data-viewer-list-or-data-viewer-grid/2163183
**Category:** Questions about Thunkable X
**Created:** [December 3, 2022, 2:43pm UTC](https://community.thunkable.com/t/how-to-display-mp3-in-data-viewer-list-or-data-viewer-grid/2163183 "2022-12-03T14:43:30Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![him\_isme](https://avatars.discourse-cdn.com/v4/letter/h/45deac/32.png) [@him\_isme](https://community.thunkable.com/u/him_isme)
#### Post date: [December 3, 2022, 2:43pm UTC](https://community.thunkable.com/t/how-to-display-mp3-in-data-viewer-list-or-data-viewer-grid/2163183/1 "2022-12-03T14:43:30Z")

</div>

Hi everyone… 👋 i want to raise a question.

I want to create a music player app, where the mp3 files is stored in a google sheet in the form a URL from the hosting service. In my app, I want to display the song in the form of a menu list.

Well… the question is, can I get those songs from Google Sheet onto the Data\_Viewer\_List/Data\_Viewer\_Grid? Actually, I’ve tried it, but both components can only display text and images. Am I missing something? Is there a way for the songs to be displayed like a menu list?

Thank’s for the attentions!

---

<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: [December 3, 2022, 2:59pm UTC](https://community.thunkable.com/t/how-to-display-mp3-in-data-viewer-list-or-data-viewer-grid/2163183/2 "2022-12-03T14:59:59Z")

</div>

What **exactly** are you wanting to display? Can you provide a screenshot or sketch of an example?

Normally, you would display the name of the song which you can do with a DVL/DVG synced to a column of names in a Google Sheet. When you say “display the song,” I’m not sure what you mean because how do you display audio?

---

<div class="post-metadata">

### Author: ![him\_isme](https://avatars.discourse-cdn.com/v4/letter/h/45deac/32.png) [@him\_isme](https://community.thunkable.com/u/him_isme)
#### Post date: [December 3, 2022, 3:18pm UTC](https://community.thunkable.com/t/how-to-display-mp3-in-data-viewer-list-or-data-viewer-grid/2163183/3 "2022-12-03T15:18:12Z")

</div>

Thank you @tatiang , you answered my question again.

my point is to display the title of the song\the music like this

 ![lagu](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/0/d096b9a2ebc666bc0a36e07b4d9a8769fd7f2522.png)

so that the user can directly select it or play it

---

<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: [December 3, 2022, 3:44pm UTC](https://community.thunkable.com/t/how-to-display-mp3-in-data-viewer-list-or-data-viewer-grid/2163183/4 "2022-12-03T15:44:29Z")

</div>

There’s no way to embed a sound file in a screen. You can do what you want using clones but if you’re new to Thunkable, you may find that to be a difficult task at first. The idea would be to create a row or group component with a button for the title and a button for the band name and then clone that row/group to make the list of choices you have in your screenshot, and then populate the buttons’ text from your Google Sheet.

If you don’t want to use clones, then your best option is to allow the user to click the title of a song in a DVL/DVG and then use a separate button (or screen) to handle playback using the URL. That is, you select the song and then you click _again_ to play it. This isn’t ideal but it is possible to set up.

---

<div class="post-metadata">

### Author: ![him\_isme](https://avatars.discourse-cdn.com/v4/letter/h/45deac/32.png) [@him\_isme](https://community.thunkable.com/u/him_isme)
#### Post date: [December 4, 2022, 6:05am UTC](https://community.thunkable.com/t/how-to-display-mp3-in-data-viewer-list-or-data-viewer-grid/2163183/5 "2022-12-04T06:05:44Z")

</div>

Okay, so there is no way to display mp3 files into DVL/DVB, it can only display text and image files only, right? We have to make a sound/play button on the screen, then enter the URL of the song into the block of the button.

I hope I could add new songs to the app via Google Sheet without having to **unpacking** the app and create the play buttons again.

---

<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: [December 4, 2022, 6:41am UTC](https://community.thunkable.com/t/how-to-display-mp3-in-data-viewer-list-or-data-viewer-grid/2163183/6 "2022-12-04T06:41:54Z")

</div>

Yes and yes, both of those are true.

---

<div class="post-metadata">

### Author: ![him\_isme](https://avatars.discourse-cdn.com/v4/letter/h/45deac/32.png) [@him\_isme](https://community.thunkable.com/u/him_isme)
#### Post date: [December 4, 2022, 8:19am UTC](https://community.thunkable.com/t/how-to-display-mp3-in-data-viewer-list-or-data-viewer-grid/2163183/7 "2022-12-04T08:19:14Z")

</div>

Haha thanks for knowledge, Mr. @tatiang

---

<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: [December 4, 2022, 6:33pm UTC](https://community.thunkable.com/t/how-to-display-mp3-in-data-viewer-list-or-data-viewer-grid/2163183/8 "2022-12-04T18:33:46Z")

</div>

Here’s a demo of what I mean by cloning the components:

[https://x.thunkable.com/copy/1d761ccc031c11ee638db4c8b54e8ca6](https://x.thunkable.com/copy/1d761ccc031c11ee638db4c8b54e8ca6)

(See the first screen called “Music Player scr”)

Unfortunately, the songs are not playing for some reason.

**Problems with this demo:**

1. No sound playback (!)
2. Group’s height is “undefined”
3. Changing the value of `app variable separating margin` has no effect on the position of the cloned groups

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)
#### Post date: [March 4, 2023, 6:33pm UTC](https://community.thunkable.com/t/how-to-display-mp3-in-data-viewer-list-or-data-viewer-grid/2163183/9 "2023-03-04T18:33:58Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
