003 • No-code sound effect
August 18, 2023
Share
Quick implementation
Copy the component
Paste it into your project
Customize it with the component properties.
Quick tutorial
Insert -> MP3
Set Audio Component inside Button Component as follows:
Source: Add URL or Upload audio
Position: Absolute, Pin Top
Width/Height: Relative - 100%
Playing: Yes
Progress / Track / Player: Color opacity 0%
Paly/Pause / Track / Time: Hide
Play on hover:
Button Primary variant - Audio Component - Visible: No
Button Primary variant (Hover) - Audio Component - Visible: Yes
Play on click:
Button Primary variant - Audio Component - Visible: No
Button Primary variant (Hover) - Audio Component - Visible: No
Add new Button variant - Audio Component - Visible: Yes
Interaction: Primary variant -> New variant - Tap, delay: 0
Interaction: New variant -> Primary variant - Appear, delay: {~duration of your audio)
What can you build?
There are numerous of websites that use sound effects to enhance the user experience. Here I give you a few that came to mind immediately:
-> rauno.me
-> marco.fyi
-> henryheffernan.com
Questions?
Newsletter
Thanks
for
watching!
Sign
up
to
newsletter
and
receive
updates
on
new
Framer
tips
& freebies.