Create custom audio player bind with collections

[MaxenceP]

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 ?

[Quentin]

Hey @MaxenceP

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

[MaxenceP]

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.

[Quentin]

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

[Quentin]

Hey @MaxenceP

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

Hope this helps!