Si vous voulez un moyen rapide et facile d’ajouter de la musique à votre site Web, l’utilisation du codage HTML est un moyen de l’accomplir tant que vous êtes conscient des limites. Étant donné que tous les navigateurs ne reconnaissent pas les mêmes formats audio et que les navigateurs plus anciens ne reconnaissent pas les améliorations HTML5, vous devrez savoir comment gérer ces problèmes de navigateur pour atteindre votre objectif.
Table des matières
Utilisation du code HTML pour ajouter de la musique via un éditeur de texte
Si vous codez votre site Web sur le long terme et utilisez un éditeur de texte, tel que le Bloc-notes, vous aurez besoin de connaître plus de code que si vous utilisiez des éditeurs HTML, tels que Dreamweaver. En supposant que vous ayez déjà une connaissance pratique du code HTML de base, vous souhaiterez suivre les étapes suivantes pour ajouter facilement de la musique à n’importe quelle page de votre site Web:
-
Tout d’abord, décidez si vous souhaitez que la musique soit lue lorsque la page Web se charge ou uniquement lorsque le visiteur clique sur un lien.
-
Pour accueillir la plupart des navigateurs et se conformer aux normes HTML5, vous devez créer deux fichiers audio: un .mp3 et un .ogg. La version mp3 est reconnue par presque tous les navigateurs, tandis que la version .ogg est pour les anciennes versions de Firefox et Opera.
-
Téléchargez les fichiers musicaux sur votre serveur via un programme, tel que FileZilla, ou via le panneau de configuration de votre site. La plupart des panneaux de contrôle ont une fonctionnalité appelée Gestionnaire de fichiers qui vous permet de télécharger des fichiers, d’extraire des dossiers compressés et même de modifier des fichiers. C’est une bonne idée d’avoir un dossier spécifique dans lequel vous stockez les fichiers musicaux. Vous pouvez simplement intituler cette « musique » ou « audio » si vous le souhaitez.
-
Une fois que vous avez téléchargé la musique, vous êtes prêt à gérer le code HTML.
Comment intégrer de la musique
Il existe plusieurs méthodes différentes que vous pouvez utiliser pour intégrer la musique, selon que vous avez décidé de démarrer la musique au chargement de la page, de démarrer si l’utilisateur l’initie ou de ne démarrer que lorsque le visiteur clique sur un lien.
Code de base (non HTML5)
Ces méthodes ont été utilisées avant l’introduction par HTML5 de la balise
- méthode: Cette balise HTML est utilisée pour un élément non HTML. L’utilisation de ce code permettra la lecture du fichier de musique lorsque la page est chargée. La balise est placée à l’intérieur de la balise du HTML de votre page.
- : Cette balise HTML peut également être utilisée comme conteneur pour un élément non HTML. L’utilisation de ce code permet la lecture du fichier de musique lorsque la page est chargée. Tout comme la balise , celle-ci est placée dans le HTML de votre page.
Un problème potentiel lié à l’utilisation de l’une ou l’autre de ces balises est que la musique peut ne pas être lue dans certaines situations, car différents navigateurs prennent en charge différents formats audio. Par exemple, si le navigateur d’un utilisateur ne prend pas en charge le fichier, tel qu’un fichier mp3, un plug-in est requis pour que la musique fonctionne. Si ce plug-in n’est pas installé sur la machine de l’utilisateur, l’audio ne sera pas lu.
Balise HTML5
La balise
Votre navigateur ne prend pas en charge ce format audio.
Vous devez inclure les deux formats de fichiers pour accueillir un plus large éventail de navigateurs. La balise
Mélangez l’ancien avec le nouveau
En utilisant les balises
Options à l’intérieur de la balise
Vous contrôlez le moment où la musique est activée en ajoutant ou en omettant un ou plusieurs attributs.
- Jouez en charge: Si vous souhaitez que la musique soit lue lors du chargement de la page, ajoutez l’attribut lecture automatique.
- Boutons Lecture / Arrêt / Pause: Pour afficher les boutons de contrôle, incluez l’attribut les contrôles.
- Boucle sans fin: Si vous voulez que la musique soit en boucle sans fin, incluez l’attribut boucle.
- En sourdine: Pour forcer l’utilisateur à réactiver le son pour l’entendre, incluez l’attribut en sourdine.
Affichage des notes musicales sur votre page
Il peut arriver que l’affichage des notes de musique sur votre page soit une très bonne idée. Par exemple, si vous enseignez des riffs de guitare, votre page peut inclure une vidéo montrant comment doigter les notes ainsi que la «partition» qui apprend au visiteur à lire la musique. Il existe plusieurs façons d’afficher les notes de musique en HTML, et en voici trois.
Utilisez le code HTML pour la note
Créer une image à partir d’une police
Utilisez une police qui comprend des notes de musique ou une police qui se concentre uniquement sur les notes pour ses caractères.
Utiliser un programme
Les programmes de compilation comme VexFlow font tout le gros du travail en vous permettant d’écrire les notes au format lettre (a, b, c, etc.), puis le programme compile votre travail et génère un fichier image que vous pouvez afficher sur votre page Web . Lilypond est une autre option basée sur un programme.
Les meilleures pratiques
Le goût de la musique est très personnel, donc ce que vous pensez être génial peut sembler douloureux à quelqu’un d’autre. Étant donné que le goût musical est si subjectif, il est généralement préférable de donner à l’utilisateur autant de contrôle que possible sur la musique. Ainsi, même si vous avez la possibilité de démarrer la musique lorsque la page se charge ou de faire une boucle audio à l’infini, donner aux utilisateurs des commandes pour le faire eux-mêmes peut les garder sur la page plus longtemps, surtout si la musique est une musique de fond qui ajoute peu, voire rien , au contenu. Placer de la musique sur la page devrait viser à améliorer l’expérience utilisateur.
Lisez plus d’astuces sur le design web ici, et n’oubliez pas de partager l’article sur Facebook !