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

Questions about Thunkable
1

Hi everyone… :wave: 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!

2

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?

3

Thank you @tatiang , you answered my question again.

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

lagu
lagu454×572 71.7 KB

so that the user can directly select it or play it

4

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.

5

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.

6

Yes and yes, both of those are true.

7

Haha thanks for knowledge, Mr. @tatiang

8

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

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
9

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