Play an audio file after a click in Webflow

In our Webflow tutorial of the day, we will learn with code to play an audio when we click on a specific element of a page of our website.

Step 1: Host your file online

The first step of this tutorial will be to find an online hosting for your audio file (mp3, avi, etc.). You can use Dropbox for example (even the free version) and import your audio into your space.

Step 2: Add audio in Webflow

2.1 Add a code

You will then go to your Webflow project and more specifically to the page in which you want to play a click audio.

Dans les paramètres de la page, dans le custom code "Inside <head> tag", vous allez insérer le code suivant :

<audio id ="audio" src="lien-audio"></audio>

2.2 Replace the source with the audio link

Instead of the audio-link in the source, you will paste the link of your hosted file.

If you are using dropbox, just go to the settings of your file and click on "Copy link".

Moreover, for a dropbox file, at the end of the URL, you will have to replace "?dl=0" by "?dl=1".

Step 3: Add the code to play the audio on click

After inserting the audio source, we will add a javascript code that will allow us to play our audio when we click on a specific element of our project.

3.1 Insert a new code

Il faudra alors copier-coller le code suivant dans le custom code "Inside <head> tag" et le personnaliser :

<script>
window.onload=function(){
  const audioElement = document.getElementById('audio');
  const playAudio = document.querySelector('.classe-element-cliquable');
  playAudio.addEventListener('click', function() {
    audioElement.play();
  });
}
</script>

3.2 Customize the code

Depending on your project, you must change the '.class-element-clickable' by the name of the class of the element that will serve as a trigger for the audio. In our example, it will be '.estimator_content-top-image'.

Then, you can change the name of the constants (audioElement and playAudio) if you wish, but you must remember to change the name each time it appears in the code (here twice for the first constant and twice for the second constant).

In our example, we changed the name of the second constant (playAudio to hellodigidop).

code to play audio when an element is clicked on webflow

Step 4: Publish your Webflow project

Of course, the code is not played directly in the designer, so you will have to publish your project and test it on the live version to hear the audio when your element is clicked.

Now you can add some life to your website with custom audio files that will launch when certain elements are clicked. If you want to stand out from your competitors, Digidop offers you to have a Webflow site that converts with the wow effect.