Discover the best sound websites created by professional designers. Get inspired and start planning your perfect sound web design today!

Timothy Ricks

Click anywhere on the page for sound when scrolling

Portfolio Lists

Federico

Based on Curtains.js. Fully customizable in size and shape, responsive (behaves like css cover). Options for autoplay or buttons, transition duration, custom displacement maps or pixel distance, built in easings (no libs). Will add more shaders soon (hopefully).

CHANGELOG
Version1: fixed last image not displaying.

Webgl Image Transition Slider ⟋ webgl

Embacy Agency

A website for a health tech startup Sonde. Made this one to try ourselves in a biotech design style. We made this project cloneable, so you can check out how we done or reuse some cool effects with animation!

Sonde Health

Roem

At Roem, we are addicted to sounds. Based on the Tone JS Library by Yotam Mann, we created this minimal online synth keyboard, applied a DuoSynth sound and added some effects. A nice starting point for ourselves for a bigger project, that we thought would be nice to share with the Webflow Community.

Cloneable - synth audio with playable keyboard

Pablo Stanley

A simple pad with sound effects for your Clubhouse rooms. It uses a lot of custom code, so make sure to inspect that stuff to create your own :)

Clubpad - Clubhouse Soundboard

Matan Assulin

Hey! 🙌 Thanks for landing on this microsite. 🌎 Checkout this cool teleprompter tool 💻 you can use! 🤩 Feel Free 🤝 to edit this text to whatever you'd like and you can send this link out 🔗 to present your writing. 📝 So go ahead and give it a try, 💪 and see how it can help you present your work to the world! 🌍
(credits to @pablostanley for building awesome creative commons code)

telep-microsite-assulin

Sam Charpentier

With tools of the past we create sounds of the future. Devoted to find the perfect balance between precision and unexpected, we dedicate ourselves to excellence. Our craft is at the service of your brand, whether that be your new campaign, a product, a service or your new bedroom pop EP, we take no shortcuts in making you stand out from the crowd. Founded in Montreal in 2018 and now working with many brands and artists around the world, HOMY Studio is not only a recording studio, it’s a music house, it’s a tastemaker, it’s a family (: Welcome HOMY

Homy Studio

Teel

Trona is a new Oaxaca/Japanese-inspired cocktail bar in Austin, Texas that invites you to embark on a journey of genuine hospitality and meaningful social experiences.

Our goal was to create a website experience that was as powerful, immersive, and exhilarating as the bar itself.

Dive in, make a reservation, and immerse yourself in the world of Trona.

Trona

Howler.js Audio

ThreeSixtyEight

We hijacked our Monday all-hands meeting to reveal the location of our 2021 company retreat. Every team member had to complete an interactive Webflow puzzle to unlock the location - and now we want to share that experience with you.

Complete the experience by Friday, 9/24 for a chance to join a Q&A with the design team who created it. Winners will be notified the week of October 6.

Light The Fire Within Us

SketchzLab

A new logo, new image and new website for our little web design service. We went through several iterations for this finalized design. We came across a few obstacles along the way during the design and development process which resulting in removing a lot of ideas implemented. The major issue with the fallback is performance drop caused by complex interactions, hidden heavy content elements, overlapping bugs, etc.

Eventhough the end result is not as expected, but it came out fine. (Well, at least it works.) Also, along the process, we discovered several bugs, do's and dont's, the possibilities, and new ideas. It has been fun creating this site.

If anyone has feedback or inquiry, feel free to drop me a message. =)

Lastly, have fun building websites.

SketchzLab Official Site - Renewal

Jordan Gilroy

Portfolio site for AR specialists, Simone.

Simone

Webflowtips

I have seen many projects lately which add sound effects to buttons so I wanted to share how to do it.

Each of the sounds needs their own code. You can find the code in each embed.

To add them to your project:

1. Add a class to the div where you want the sound to play when clicked.
2. Add an embed and paste the code in your project.
3. Change the code to match your class name and the mp3 address where you hosted your audio file.

****Important****

- Do not link to the audio files on the clonable. Make sure to host the audio file in your server. These files will be removed and they won’t work in the near future.
- You need to publish the project to hear the sounds

Sounds by:

soundbible.com
Mixit.co

Sign up for the lesson: www.webflowtips.com/b/how-to-add-audio-sounds-to-buttons

If you have any questions feel free to comment.

P.S Like or follow if this was useful for you 🙂 🙌

Buttons with Sounds / Audio

Needed sound, made sound (module).
Configurable to play on hover or click.


Might add stuffs to it,  just comment if you need anything. Not particularly elegant but 🤷.

Random sounds from soundly.

👀

CHANGELOG
06/04/22 ‖ If first click is on a trigger sound plays directly instead of separating the Audio Context creation from the triggering. Never written something less clear in my life I think :)

How to.
Please host the code yourself if used in production as stuffs might break or I might make weird changes. If you follow the link provided in the page code you'll find yourself in a codesandbox, where there will be a .js.txt file. Download that, put it in wf, get the link and link that as a script. Thanks!

Sound Module ⟋ js

The menu from minmum.studio is super fun so I decided to recreate something similar in Webflow. To create the sound effect I used the same technique used on my previous clonable https://www.webflowtips.com/b/how-to-add-audio-sounds-to-buttons

All the other animations are done entirely in Webflow.  

Two important things:

1. Make sure you publish the project for the sound to work.
2. Remember to host the audio file in your own server. The file used in the clonable will be removed, so if you use it for your own project it probably won’t work :(

Sign up for the lesson: http://www.webflowtips.com/b/how-to-animate-a-menu-button-with-sound-effect

If you have any questions feel free to comment.

P.S Like or follow if this was useful for you 🙂 🙌

 Menu with Sound Effect

Strike Design Studio

@memory-work (http://memory-work.com/) launched a speculative scenario-fiction project called Memory Work an immersive audio experience exploring the futures of women’s labour and economic transformation through prisms of class, gender, immigration, status and race. Listen to the soundscape on the website.

Memory Work

Nick Rillen

Discover a seamless blend of design and development expertise with my latest project. From captivating animations to intricate code, every aspect of this website, from design to development, reflects my dedication to creating a unique digital experience. Explore the intersection of artistry and technology in this meticulously crafted online platform.

Velours Horeca

‪elyakim goldfus‬‏

Feel the nostalgic sensation of typing by pressing the Keyboard key Button. 
✨ Engaging users 
👆 Intuitive button  
🔊 Audio Feedback 
📱 Full Responsiveness

3D Keyboard Button & Sound Effect (Button 16)

1070795817

1274323923

1316201488

1316201489

1462086697

1567550242

1592612642

1726628865

173927913

1771795565

1863160016

1905118106

2032141491

2037807691

2144870841

2213518682

2216482092

2339906037

2351366352

2355632600

https://s3.amazonaws.com/webflow-dev-assets/66fd83b6cc0c8c6ed0e398e6%2Fcontent.json

2401116685

2486364096

gpt-4o

gpt-4.1

gpt-4o-mini

2546957535

2789269995

2857348505

2903381045

User Accounts will no longer be available on January 29, 2026.

Visit Webflow’s Help Center for migration guidance and more info.

3023147062

3026881092

3106924665

3112069432

3120801339

3151661775

3185570968

3243842104

3258716925

3266482432

3289310561

3313039722

3315729993

3387258362

3410497685

3590523401

3591394191

3672367630

3737116140

3801251705

3844506029

3913199261

3934148661

3941255684

4092855684

4103643638

4144203485

4206156914

451433404

489463363

504462606

536101258

622649767

622649768

657188092

665836192

737109165

747504970

772001133

817414265

846847440

882147072

911514507

938734410

1045828939

1049811722

105340574

1087856901

1120744071

1131151533

1157563538

1197475705

1229056119

1234765101

1236803103

1250328847

1259889605

1292405251

1297066426

130043074

1306352991

1312703771

1322655470

1336067073

1350250754

1380813821

1380896143

1406455659

1418395020

1433303746

143629253

1449062533

1455163268

1455742168

1458975701

146940023

1475952185

1483622682

1490715908

1499868407

1501922903

1509255256

1530015515

1534768148

1545754914

1557989767

1568482678

1575119218

1662541974

1665126082

1675015083

1680201874

1680586027

1701648875

173185438

1733571395

1752293186

1753134293

1762715110

1764382991

1803820771

1813965765

1826978162

183596474

1836756734

1839668475

1856326096

1857805694

1861549476

187681422

1894524989

1905757080

1928608458

1931880952

1937559780

1944913766

1951876014

1968719184

Best Sound Websites | Free Examples & Designs

Discover Sound websites
built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Sound websites built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Sound websites
built by the Webflow community