Lorsqu’il s’agit de concevoir une page Web fonctionnelle et intéressante, le code et les outils javascript audio peuvent vous aider à ajouter de la musique et des effets sonores de qualité pour donner vie à votre site Web.
Table des matières
Qu’est-ce que Javascript audio?
Depuis que le langage de balisage hypertexte (HTML) est devenu la norme pour la production de pages Web transmises sur Internet, les concepteurs Web recherchent des moyens de lire des sons sur les pages Web d’une manière qui fonctionne sur tous les navigateurs et pour tous les systèmes d’exploitation. Ce concept s’appelle la compatibilité croisée, et c’est le talon d’Achille de la conception Web depuis de nombreuses années. Même aujourd’hui, cela reste un problème de conception Web important.
Internet avant que le Javascript audio ne soit disponible
Avant que les techniques audio Javascript ne deviennent un moyen viable de jouer du son sur une page Web, les méthodes standard utilisées pour lire la musique de fond en utilisant HTML incluaient l’utilisation de la balise « BGSOUND » ou de la balise « EMBED ». Pour qu’une page Web joue automatiquement de la musique, les concepteurs Web doivent taper:
| |
Cela entraînerait la lecture automatique du fichier audio midi au moment où un visiteur Web visitait votre page. Puisque la plupart des concepteurs de sites Web se sont rapidement rendu compte que la majorité des internautes considéraient cela comme très ennuyeux, la balise « EMBED » était utilisée pour présenter un lecteur audio réel dans la page Web elle-même, ce qui donnait au visiteur la possibilité de contrôler le son. Le code d’intégration ressemble à ceci:
La balise « EMBED » a un certain nombre de propriétés qui permettent au concepteur Web de configurer le lecteur intégré de sorte qu’il soit dimensionné de manière appropriée, lance automatiquement la lecture de la musique ou non, ou qu’il soit invisible ou non. Un lecteur intégré invisible qui démarre automatiquement ressemble beaucoup à la balise « BGSOUND ». Pire encore, une telle configuration peut être configurée pour une boucle automatique afin que la musique ne se termine jamais.
Le code Javascript audio introduit la flexibilité
Le problème avec les balises décrites ci-dessus est qu’elles sont statiques. Ils commencent à jouer du son lorsque la page se charge ou lorsque le visiteur clique sur le bouton « play » du lecteur intégré. Cependant, les fonctions audio Javascript ont introduit la possibilité pour les concepteurs Web d’intégrer le son dans une page Web. Avec Javascript, les concepteurs peuvent générer des effets sonores lorsque les utilisateurs passent la souris sur certains liens ou boutons, ou ils peuvent s’assurer d’utiliser la configuration de balise HTML appropriée au navigateur que l’utilisateur utilise actuellement.
Pour la plupart, les concepteurs Web savent que la balise « BGSOUND » est appropriée pour Internet Explorer et que l’approche « EMBED » est la meilleure avec Netscape Navigator et des navigateurs similaires. Javascript permet aux concepteurs Web de vérifier si les utilisateurs utilisent Internet Explorer ou non en utilisant le Javascript suivant qui génère le HTML de la page Web à la volée, en utilisant le code sonore intégré correct en fonction du type de navigateur.
En explorant le code affiché ci-dessus, vous pouvez voir la flexibilité offerte par Javascript. Puisque le fichier audio est maintenant appliqué à une variable, le fichier audio peut être sélectionné dans le script en fonction d’un certain nombre de facteurs, tels que l’heure du jour, la date actuelle ou d’autres variables système.
Utilisation de Javascript pour les effets sonores
Comme mentionné ci-dessus, une autre fonctionnalité fournie par Javascript est la possibilité d’introduire des effets sonores sur une page Web. Vous pouvez demander à la page Web de lire des sons spécifiques selon que l’utilisateur déplace le pointeur de la souris sur un lien, un bouton de menu ou même une image. Vous pouvez fournir des effets sonores pour n’importe quel nombre d’événements Javascript tels que onMouseOver, onClick et plus encore. La première étape pour intégrer une telle fonctionnalité à votre page Web consiste à intégrer un lecteur audio invisible dans votre page Web en copiant le texte suivant dans le code HTML de votre page Web normale.
| Texte du lien |
Comme vous pouvez le voir en examinant le code ci-dessus, le lecteur audio est intégré à la page Web dans un état invisible et ne démarre pas automatiquement le fichier audio. Une fois la page chargée, ce lecteur est chargé avec votre fichier audio et est prêt à être lu. Au moment où l’utilisateur passe la souris sur le clic, la fonction javascript « playSound () » est appelée. C’est la fonction que vous avez entrée dans la section script du code de la page Web.
Lorsque vous appelez la fonction ci-dessus (de n’importe où dans votre page Web), elle activera la fonction « play » du lecteur audio intégré appelé « LinkSound » tel que défini dans votre balise « EMBED ».
Plus d’information
En utilisant Javascript pour les besoins sonores de votre page Web, vous avez la flexibilité de jouer non seulement un son, mais une variété de sons basés sur les actions de l’utilisateur ou les fonctionnalités du système utilisateur. Étant donné que la plupart des utilisateurs ont activé Javascript dans leurs navigateurs ces jours-ci, les chances sont très bonnes que votre script fonctionne pour la grande majorité de vos visiteurs.
Lisez plus d’astuces sur le design web ici, et n’oubliez pas de partager l’article sur Facebook !
