Sounds

Add sound functionality to your webflow site, and play/pause, and add controls

Required Script*

Copy this <script> and paste into the Body or Head of your page

<script async src="https://cdn.jsdelivr.net/gh/manuelogomigo/flowscriipt/sound-and-control/script.js"></script>

Required Attributes*

I want this DIV to be the wrapper of my sound

Add this attribute to the parent div wrapping your sounds

Name

ct-audio-element

Value

wrapper

I want this Div or Link Block to be pause and playsound when clicked

Add this attribute to the div inside your wrapper

Name

ct-audio-trigger

Value

click

Optional: I want to hide and show pause and play icons

I want this to be the Pause Icon

Name

ct-audio-control

Name

pause-icon

I want this to be the Play Icon

Name

ct-audio-control

Name

play-icon

I want this Sound URL to play when clicked trigger is clicked

Name

ct-audio-url

Value

your url.mp3

You can also connect the URL to your CMS

I want this Div or Link Blockto mute sound when clicked

Name

ct-audio-mute

Value

Optional: I want to hide and show mute and unmute icons

I want this to be the Mute Icon

Name

ct-audio-control

Name

mute-icon

I want this to be the Unmute Icon

Name

ct-audio-control

Name

unmute-icon

Optional Attributes*

I want this Audio to loop when it ends

Name

ct-audio-loop

Value

Add this to the audio click trigger.

I want to show Total and Current duration of the sound,

I want to show the Current Duration of the sound

Name

ct-audio-time

Name

current

I want to show the Total Duration of the sound

Name

ct-audio-time

Name

total

I want to show Progress line as sound progress.

I want to this Div to be the line as it progress

Name

ct-audio-progress

Name

line

I want this Div to be the progress line wrapper

Name

ct-audio-time

Name

total

I want to add Volume tracker in sound.

I want to set this Div to be the volume wrapper

Name

ct-audio-volume

Name

wrapper

I want this Div to be the volume tracker

Name

ct-audio-volume

Name

track

Optional: I want to add an Handle to the tracker

I want to set this Div to be the volume wrapper

Name

ct-audio-volume

Name

handle

Optional: I want to add an Volume Value of the sound

I want to set this Text or Text Span to be the volume value.

Name

ct-audio-volume

Name

value

I want to have more than one time on same page

You can add more than one Time in the same page, just follow the steps for each of them

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.