Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et commentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

INSERER DU CONTENU AUDIO EN HTML

Un problème de formats

Pour insérer du contenu audio dans un document HTML, nous allons utiliser l’élément HTML audio.

Le problème, c’est que la prise en charge de l’audio par le HTML est assez récente (cela date du HTML5).

Ainsi, tandis qu’il existe différents formats audio (tout comme il existe différents formats d’image), aucun de ces formats n’est reconnu de façon universelle par les vieilles versions des principaux navigateurs.

Il va donc nous falloir insérer plusieurs fois la même piste audio sous différents formats afin d’être sûr d’avoir une bonne prise en charge de notre fichier par les navigateurs principaux utilisés par vos visiteurs.

Pour information, voici ci-dessous la liste des formats audio principaux supportés par l’élément HTML audio et leur prise en charge ou non par les dernières versions des navigateurs les plus utilisés :

Navigateur MP3 Ogg Wav
Chrome Oui Oui Oui
Safari Oui Non Oui
Firefox Oui (seulement depuis la version 21) Oui Oui
Internet Explorer Oui Non Non
Opera Oui Oui Oui

Comme vous pouvez le voir, les dernières versions des navigateurs les plus connus supportent toutes le mp3. Cependant, je vous conseille d’utiliser au moins deux formats pour vos visiteurs utilisant d’anciennes versions, afin encore une fois de maximiser la compatibilité.

Utilisation de l’élément HTML audio et de ses attributs

Pour commencer, vous allez devoir vous munir d’une piste audio. Dans l’idéal, vous devrez enregistrer cette piste sous deux formats différents, disons mp3 et ogg.

Nous allons très simplement enregistrer cet audio dans le même dossier que notre fichier HTML, afin encore une fois de faciliter la création de lien avec celui-ci. Dans mon cas, les deux versions de mon fichier s’appellent « magic.mp3 » et « magic.ogg »

L’élément audio possède un attribut obligatoire : l’attribut controls qui ne possède qu'une valeur (que nous ne sommes donc pas strictement obligé de préciser car celle-ci est implicite). Celui-ci va tout simplement afficher les contrôles de base (lecture, pause, retour au début et volume) de notre piste audio.

Afin de laisser le choix au navigateur d’utiliser le fichier qu’il souhaite, nous allons utiliser en plus de l’élément audio un élément source (représenté sous forme de balise orpheline) avec son attribut src.

De plus, nous allons écrire un texte dans notre élément audio qui ne sera affiché que si aucun fichier audio n’a pu être lu.

Insertion de contenu audio en HTML

Nous avons pu insérer de l’audio dans notre fichier HTML

Comme vous pouvez le voir, c’est rudimentaire, mais ça fonctionne.

On peut ensuite ajouter d’autres fonctionnalités à notre fichier audio en rajoutant des attributs facultatifs à l’élément audio :

  • L’attribut preload va nous permettre de charger le fichier en même temps que la page web. Cet attribut possède trois valeurs : auto, metadata et none. Auto va faire charger tout le fichier audio en même temps que la page web tandis que metadata ne va charger que les données méta du fichier audio en même temps que la page web ;
  • L’attribut autoplay va automatiquement lancer le fichier audio dès que celui-ci est prêt ;
  • L’attribut loop va faire se répéter le fichier en boucle ;
  • L’attribut muted va mettre le son du fichier sur 0.

Notez que seul l’attribut preload a absolument besoin d'une valeur, car tous les autres ne possèdent qu’une valeur qui est donc utilisée par défaut.

Cependant, c'est une bonne pratique de toujours préciser une valeur pour un attribut même lorsque celle-ci est évidente, et je vous recommande donc de le faire.

Les attributs facultatifs de l’élément HTML audio

Chapitre précédent

Chapitre suivant