Basic audio player

Anvil Q&A
1

Hey everyone,

I’ve been trying to get a basic audio player working on my Anvil App, but no luck. I tried Robert’s implementation from Simple Audio Player - #5 by robert and all the code makes sense, but it just doesn’t produce any sound. I then tried the code presented here as simple as possible and it also doesn’t work. Here is a clone of my App

https://anvil.works/build#clone:ZAT2OKRUEY6365TM=V5HHEFQO4PRCDZAPFWRXOZKH

Thank you.
Regards,
Stephan

2

Hi @smuts1989! I’ve moved your post to a new topic since we try to avoid reviving old threads, and your issue might be different.

1 Like
3

The good news is that there isn’t anything wrong with your code! The problem is the Chrome is blocking the unencrypted audio file (your app worked fine for me on Safari). You’ll need to host the audio you want to use somewhere that uses https instead of http.

2 Likes
4

Hi Brooke,

Thank you very much for the help. I got it working by hosting on an HTTPS server!

Regards,
Stephan

1 Like
5

Hi all,

I was hoping someone could further help me on this project. I’m trying to get the audio player to load the url from the database into the HTML-based audio player on the repeating panel. I’m having trouble with 2 things:

  1. Getting the audio player to function on the repeating panel - it functions without a repeating panel, but then I don’t know how to link the database items to it.
  2. Loading the audio when the page loads. At this point you need to click the button for the audio to load in the audio player.

The final goal is the list the items in the database on the front page, but the tricky part is the audio link. Ideally I want (Audio - Transcription - Translation) with the audio being playable from the HTML player.
If anyone can help or point me in the right direction, I would be very grateful. Here is the current App I’m using:

https://anvil.works/build#clone:AJISIT4SK6AL5ZXY=ZUQ74ADC3WDWWRNCWNTEJDZQ

Regards,
Stephan

6

Hey everyone,

I have figured out how to create an HTML and JS based audio player, bind the data to the repeating panel and display all the database rows on the page. I thought I would share my code here for anyone who faces the same problems (took me while to figure out). Enjoy!
https://anvil.works/build#clone:F453DLBGXTO53XUO=6JFUBGYOIIEQT4QSHBPEUGVS

Regards,
Stephan

2 Likes