Skip to main content

Comment jouer un son au clic ou au survol

Tutoriel jQuery : Effet de survol (Avril 2024)

Tutoriel jQuery : Effet de survol (Avril 2024)
Anonim

L'une des caractéristiques des applications informatiques est qu'il y a un retour lorsque vous faites quelque chose. Le type de feedback le plus courant est le son. L'ordinateur clique lorsque vous sélectionnez des objets, émet un bip lorsqu'il y a des erreurs et émet d'autres bruits pour vous alerter. Mais les pages Web n'ont pas ce type de commentaires. Cela les fait paraître terne ou non réactif.

Heureusement, il est facile de changer cela. À l'aide d'attributs et de sons HTML dynamiques, vous pouvez créer une page Web qui ressemble davantage à une application.

Ajouter du son lorsqu'un client clique sur quelque chose

Ce script ajoute des effets sonores lorsqu'un client clique sur quelque chose en utilisant l'attribut et lorsqu'un client survole quelque chose en utilisant l'attribut. Veillez à les tester dans différents navigateurs, car tous les navigateurs Web ne gèrent pas la souris ni les attributs de clic des éléments autres que les liens.

Placez le script suivant dans l'en-tête de votre document HTML:

Placez le son dans une étendue vide

JavaScript place un élément EMBED dans un élément SPAN vide lors du lancement du script. Donc, vous devez ajouter la balise SPAN suivante quelque part dans le CORPS de votre page HTML, de préférence vers le haut du document:

Appeler le script avec un attribut

La dernière chose à ajouter est un élément sur lequel vous souhaitez générer le son par clic ou par survol. Appelez le script avec l'un de ces attributs. Remplacez UrlToSoundFile par l'URL complète du fichier audio que vous souhaitez lire:

Cliquez ici pour entendre un son<> onmouseover = "playSound ('UrlToSoundFile');" > Passez la souris sur ce texte pour entendre un son

Voici l'intégralité du document HTML, jouant le son d'un bluejay. Le fichier son est stocké dans le même répertoire que la page HTML:

Exemple de lecture d'un son sur Click ou MouseOver

Cliquez ici pour entendre un oiseau chanter

<> onmouseover = "playSound ('zbluejay.wav');" > Ou vous pouvez placer votre souris sur ce paragraphe pour entendre le même son d'oiseau.