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

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

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

Gumroad

Gumroad Homepage Rebuild

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)

Adding audio files on Webflow can be tricky. Here is a way to have as many audio files as you want which will play/pause every time you click a button. Follow these steps:

* It only works on published sites not on the Webflow builder **

1. Add an embed block on your project with as many audio tags as you want. You just have to change the unique "id" of each one. Example: <audio id="player1" loop src="your-song.mp3"></audio><audio id="player2" loop src="your-song2.mp3"></audio>

2. Add a button for each audio tag with a unique "id" (on the "Element Settings" section). Example: button1, button2

3. Copy the code on "Settings > Before body tag" on this project with the "id"s that you added on your players and buttons.

That's it! If you have any questions feel free to comment.

Sign up for the lesson: https://www.webflowtips.com/b/how-to-add-multiple-songs-on-the-same-page

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

13 of 50
--
Resources: 
Photos: Unsplash 
Songs: Pixabay

Multiple audio players

Multiple Songs / Audio (Same Page)

Updates to Dropbox are complete and you can clone this project again. Now, you can hear the sound. Thank you for your patients.

Using custom code to control unmuting and muting sound. Video independent of the sound file loading from a cloud server ( Dropbox ). By default all audio URLs end with d1=0, if left with default settings sound wont play change to d1=1.

Custom Code :

<audio src="https://youraudiosource.com" class="audio">

// The audio HTML element
const audio = document.querySelector('audio');

let playing = false;

// Check if document is ready
$(document).ready(function(){
	// Clicking the play_btn
	$('.play_btn').click(function(){
  	if (playing == true) {
    	audio.pause();
      playing = false;
			// Setting the button text
      $(this).html("Play");
    } else {
    	audio.play();
      playing = true;

			// Setting the button text
      $(this).html("Pause");
    }
  });
});

sound-test

Audio unmute/mute Javascript control

My updated Homepage 2023 

Hey Webflowers. How is it going?. As a big fan and constant user of Webflow, I love the almost unlimited possibilities for Webdesign.
The rest is up to you !!!
I am a Mallorca / Spain based -  Creative, digital pro, experienced human, multilingual musican,& networker. Open for new oportunities. Thanks.

NavUnger

Nav Unger / homepage 2023

Audio-centric website built with CMS and custom javascript audio sliders. Javascript was also used to create audio timer and local storage functions. Finsweet Attribute library was used for filtering and nested CMS.

Meditation Sounds

Meditation Sounds Audio Website

Brass Hands

Partnering with the Slang Gang on their website refresh was so fun to better communicate with their audience and gain more emotional attachment. They are changing the game with the first customizable virtual phone agent. Christine Soules really smashed it with the illustrations.

Slang

Slang AI

This is my new music project.
Hooves - Acordeon, Guitar & Sounds. 
Alternative, borderless, homemade, world music with Mediterranean style.

Finally, I managed to host and run my music direct on Webflow CMS. 
I found a quite simple way to do this by integrating the Green-audio- player.
https://github.com/greghub/green-audio-player
You can find a great video from Jonas Arleth about integrating Audio players in Webflow here: https://youtu.be/NRsnsmmYPYs

Duplicate your Mp3 and then change the ending of the filename from .mp3 to .txt 
Then upload the .txt file to the web flow assets panel. 
And it works just fine. Have a look.  
Greetings from Mallorca


Hooves

MP3 Audio integration in CMS

Hub for spatial audio, including a CMS based sounddesign project portfolio, a webshop for digital goods, a CMS based equipment rental page and custom JS translation solution.

HEAR VR NOW

Spatial Audio Hub

My first web design (ever!) and my first creation with Webflow. Have really been enjoying the learning process.

This project is for a local radio show on KFBK. I worked with one of the hosts of the show to create a design of his liking. He wanted something a little bit old fashioned.

* I implemented an Audio player and connected it to the CMS. 
* I also fashioned up a "Next" and "Previous" function that is tied to the CMS. This is displayed when you view a past broadcast.

I welcome any feedback!