How to set up audio/video in an app

Hello,

I am trying to set up a mediation app for kids and I am struggling big time understanding how to put an audio player and video player together.

I am finding the https://docs.appgyver.com/reference/flow_functions/audio confusing and I was wondering if there is a video somewhere explaining how to put it together?

I want to be able to add tracks into a database and have it read an ‘audio player page’ in the app.

Any help would be great!

Kelcy

A full tutorial for an audio player is on the roadmap, but if you have the URL for your audio, you should be able to just execute Play audio with the URL to start playing it, and then Stop audio to stop it.

What kind of UI are you looking to build?

After spending about a week on Appgyver I did find the play/stop functions but it’s still not working. So I am missing something.

I’m going to attach screenshots. Basically I have the database linked to Airtable, when you click on each image, they go to a description page and then hitting play goes to the audio player page. I am using an audio URL. So I need it to read the database Audio URL as a single data collection based on whichever one is clicked. This happens when pressing play/stop.

I did get it to read the background in the container for that page so I think the data is set up. It’s a flow function in the logic part.

I am hoping that makes sense …

Hi @kelcy, do you still have these issues? If so, have you tested to use the Play/Stop audio on some static URL from your data? If it works there, it might be easier to pinpoint the issue in logic. And if it doesn’t work, it would show that the flow function would not be able to use the type of URL your backend provides (that might be issue in the flow function and not the backend’s fault also)

If you need more help, could you tell me more about the logic you’ve used in your app (perhaps with screenshots from Composer)?

1 Like

Hi Kelcy,
i am about to setting up a similar app like you and i am wondering how audio files can be embedded. Your app already looks quite good :slight_smile: and i wanted to ask if you can maybe send me a screenshot or some guideline how to embed an audio file.

It would be a big help to me.

Best regards

Hi! Just to help you get started, audio files are played through play/stop audio flow functions, which you can find here.

Hi @Tomi_Laakso, I’ve only just got round to looking at this again.

I can get it to play audio from a URL now.

I am however a little confused on how to set up an audio player with buttons for play, pause, the time bar etc.

Thank you for your reply. This is what I already did but still, it is not working.
I am wondering if dropbox is not a supported provider?! You know more about it?

Sorry @Franziska_Klimt, I don’t know much further than that. I haven’t used DropBox as a link for it.

The link I used is an upload from my Wix website.

Hopefully someone else has set up the audio player before and we can get some insight!

Hi Kelcy, thank you for your response. You wrote that your audio file was working/playing when you clicked on it? Because when I tap on my icon, there is no sound at all. :confused:

We don’t have any ready-made components for this, but I guess it would be possible by using the existing flow functions :thinking: I think I might try to make a component like that and perhaps a video about it at some point if I have time, but it won’t be until next week the earliest, probably longer, as I’m packed with other work. I’ll let you know.

How I would do it is by using page variables to keep state on whether the audio is playing, and the get playback info flow function etc. to determine the length of the audio and so forth.

1 Like

@Mevi that would be amazing!! An audio component would help so much.

It’s one of the last things I need to figure out before I can launch the app so I am happy to wait till you have a moment to put it together :slight_smile:

1 Like

Did you ever get around to this? :slight_smile:

Hi! I got quite far actually, but there were some missing features that prevented finishing the component. There’s a thread of me explaining what I did for it though that you can use to help you make your own here