Create custom audio player bind with collections

Ask us anything
#1

Hi,

I was wondering how to integrate an audio player into Weweb that dynamically fetch records from a collection.

Considering this answer of how to integrate a map via a function I was wondering if I could do the same to pass a parameter but I’m not sure…
Then comes the question of styling the audio action buttons (play, pause, duration length bar…)

Can you help ? :slight_smile:

#2

Hey @MaxenceP :wave:

Do you have any idea of the audio library you would like to use?

#3

It’s not really a library more a simple HTML element like:

< audio controls
        src="/media/cc0-audio/t-rex-roar.mp3">
    </audio>

where I can bind the src with files of my collection and then design the element with my own CSS.

#4

We don’t have this element in the toolkit, but I’ll add it in our roadmap asap!

2 Likes
#5

Hey @MaxenceP :wave:

I’ve seen a smart using do it with a turnaround!

Simply use a custom HTML element, and use CONCATENATE or a JavaScript string interpolation to bind it as a source, like so :point_down:

CleanShot 2022-03-08 at 22.18.23
CleanShot 2022-03-08 at 22.18.231253×747 100 KB

Hope this helps!

2 Likes