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:

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!

4 Likes
6

Hi, @Quentin. Wondering if you might be able to help me also. I can add an audio file like the above, but wondering if there is a way to trigger the audio, so that it starts playing when other events happen on the page, like the end of the countdown. I tried to add custom JS in a workflow to make a sound play but does not seem to work.

7

You can try with a javascript action in a workflow.
You need to get the audio element and then use the method play.

You can share the code you tried if you need help with it.

8

@dorilama, I used this code in the workflow and I think it’s working. fingers crossed

var audio = new Audio(‘URL’);
audio.play();

Thanks for your help.

1 Like