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

Click anywhere on the page for sound when scrolling

Portfolio Lists

Uplift Web Design

A powerful audio player plugin for displaying and streaming your audio files. Our audio player supports all the features you'll need to create a robust music powered website. Design your audio player to look how you want and use our attributes to add the functionality.

True Audio Player

Webflow Audio Player

In honor of reaching 10k YouTube subscribers, I want to celebrate by releasing this cloneable.

T.RICKS 2020 Portfolio

Create an astonishing Audio Player in Webflow and make your site playing. Customize it according to your preferences, there's no limit to your design vision. Single track player, multi-tracks, playlist... all you need to play is here.

Webflow Audio Player Cloneable

Audio Player

Javascript Music Player with Three.js

My Social Media:
https://www.linkedin.com/in/fojcikdominik
https://www.instagram.com/_fojciko

Portfolio: https://fojcikdominik.com


Three.js: https://threejs.org

Resources i used for this project:
https://github.com/bradtraversy/vanillawebprojects/tree/master/music-player
https://github.com/santosharron/audio-visualizer-three-js

THREE.JS MUSIC PLAYER

MUSIC PLAYER with THREE.JS

View the tutorial for this project at https://www.youtube.com/watch?v=V7yrAVGsm94

T.RICKS Videos

There are different ways to include audio files into your Webflow project. You cannot host or upload the mp3 file into your Webflow account but many domain provider offer external hosting as well. It's even possible to host it via your Dropbox account.

Tutorial: https://youtu.be/NRsnsmmYPYs

CMS Webflow Audio Player

Audio player in Webflow – how to include audio files into your Webflow project

Simple MP3 audio player that hides the default browser's audio controls. Works seamlessly with Webflow's CMS collections. 

Some coding is inevitable for this to work. And you do need an external server to host your MP3 files. 

It needs some refining, but it's a nice starting point. 

The code before the </body> tag is based on code written by John Scheuer on http://www.dynamicdrive.com/forums/showthread.php?76740-jquery-play-only-the-music-link-that-s-clicked-stop-other-sounds. I adapted some of his html to make it work with the CMS collection tool that Webflow offers.

Basic Audio Player

Basic MP3 Audio Player

Helix is one of the first templates built in Webflow. Here's a video showing how I built it http://tutorials.webflow.com/fast-track-helix (mind the bad audio) :D

Helix

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.

ThreeSixtyEight Retreat

Light The Fire Within Us

Howler.js Audio

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.

Synth sounds with keyboard

Cloneable - synth audio with playable keyboard

Rebuild of https://www.mubasic.com/

Watch the tutorial at https://www.youtube.com/watch?v=HzkI4YyqFvk

Mubasic

Mubasic Test

@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

Here's an audio player that animates while playing the audio. It uses Webflow's CMS.

There is a bit of custom code (JS) needed to make this work.

Audio Waves

Audio Player with visual animation (using CMS)

Beautiful custom Webflow podcast player that works with .mp3. Contains motivational podcasts and art created by MidJourney. 💜

Custom Podcast Player

A simple website to demonstrate how to use Howler JS to start music when entering a website. Also, having the ability to mute and unmute the audio.

https://howlerjs.com/

Feel free to clone and enjoy!

Discover audio websites built by the Webflow community

Discover audio websites built by the Webflow community