Nous utilisons juste ce dont on a besoin pour le fonctionnement du site. Pour plus d'infos lire notre politique de confidentialité.
icon-cookie

Jouer un fichier audio après un clic dans Webflow

Thibaut Legrand
Thibaut Legrand
July 21, 2022
Logo Webflow avec un homme chantonnant et des icônes de musique

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.

dropbox fichier audio

É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>
code audio source webflow

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".

copier lien fichier audio dropbox

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

dropbox lien audio ?dl=0
dropbox lien audio ?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'.

Classe élément image webflow

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.

Vous méritez un site Webflow qui fait l'effet " Wahouu " !

Prenez contact avec nous aujourd'hui. L'équipe fantastique de Digidop est prête pour vous aider à construire un site web qui répond à vos besoins 🚀

Site digidop.fr sur un écran d'ordinateur avec un badge de recommandations et des réactions