Jouer un fichier audio après un clic dans Webflow

Tutoriel

July 21, 2022

3 min

H2 Example

Points clés de l'article

Dans notre tutoriel Webflow du jour, nous allons apprendre grâce à du code à jouer un audio lorsqu'on clic sur un élément spécifique d'une page de notre site web.

Étape 1 : Hébergez votre fichier en ligne

La première étape de ce tutoriel va consister à trouver un hébergement en ligne pour son fichier audio (mp3, avi, etc.). Vous pouvez utiliser par exemple Dropbox (même la version gratuite) et importer votre audio dans votre espace.

Étape 2 : Ajoutez l'audio dans Webflow

2.1 Ajoutez un code

Vous allez ensuite vous rendre dans votre projet Webflow et plus particulièrement dans la page dans laquelle vous souhaitez jouer un audio au clic.

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 Remplacez la source par le lien de l'audio

A la place de lien-audio dans la source, vous allez venir coller le lien de votre fichier hébergé.

Si vous utilisez dropbox, il vous suffit d'aller dans les paramètres de votre fichier et cliquer sur "Copier le lien".

De plus, pour un fichier dropbox, à la fin de l'URL, il faudra venir remplacer "?dl=0" par "?dl=1".

Étape 3 : Ajoutez le code pour jouer l'audio au clic

Après avoir inséré la source de l'audio, nous allons ajouter un code javascript qui va nous permettre de jouer notre audio lorsqu'on clic sur un élément précis de notre projet.

3.1 Insérez un nouveau 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 Personnalisez le code

Suivant votre projet, vous devrez obligatoirement modifier le '.classe-element-cliquable' par le nom de la classe de l'élément qui servira de déclencheur pour l'audio. Dans notre exemple, ce sera '.estimator_content-top-image'.

Ensuite, vous pouvez modifier le nom des constantes (audioElement et playAudio) si vous le souhaitez, mais il faudra bien penser à modifier le nom à chaque fois qu'il apparait dans le code (ici 2 fois pour la première constante et 2 fois pour la deuxième constante).

Dans notre exemple, nous avons modifié le nom de la deuxième constante (playAudio par hellodigidop).

code pour jouer un audio au clic d'un élément sur webflow

Étape 4 : Publier votre projet Webflow

Bien évidemment, le code ne se joue pas directement dans le designer, il faudra donc publier votre projet et tester sur la version live pour entendre l'audio au clic de votre élément.

Voilà, vous pouvez maintenant ajouter un peu de vie à votre site web grâce à des fichiers audio personnalisés qui se lanceront au clic de certains éléments. Si vous souhaitez vous démarquer de vos concurrents, Digidop vous propose d'avoir un site Webflow qui convertit avec l'effet wahou.

Thibaut Legrand

Technical Solutions Architect & Webflow Expert

Articles qui devraient vous intéresser

IA agentique vs IA générative : Comprendre les différences fondamentales et leurs applications

Client-First vs Lumos : Quel framework Webflow choisir en 2025 ?

ChatGPT 4o vs Midjourney : quel est le meilleur outil pour générer des images IA ?

Voir tous les articles

Transformez votre site web en un moteur de croissance.

Nous contacter