Ecrire le HTML | A Propos | FAQ | Alumni | Kudos | Références | Tags | Leçons | précédent | suivant |

29c. Le Son du web

"Ne lire que du texte sur une page web est si.... si... 1994 !
Je     veux     l'entendre    
c       h       a       n       t       e       r       !!"

Objectifs

Après cette leçon, vous pourrez :

Leçon

type de média : son digital
ce qu'il fait bien : évènements historiques, narration, bruits environnementaux, musique de fond, attirer l'attention
problème à considérer évaluation commentaires
inconvénient pour la création du média faibleimportant
----		 Le matériel nécessaire pour digitaliser le son est souvent intégré dans la plupart des ordinateurs récents et peut se résumer à un simple micro. De petits utilitaires gratuits ou peu chers peuvent être utilisés pour éditer et modifier le son, et plusieurs sites permettent de télécharger des fichiers audio.
"largeur" de l'audience pouvant voir le média petite grande
----		 La majorité des ordinateurs récents ont la possibilité de jouer du son et cette fonctionnalité est incluse dans la plupart des navigateurs web. Beaucoup de gens gardent leurs haut-parleurs éteints.
Consommation de bande passante faible forte
----		 Peut être assez grande mais moins importante que la vidéo. Les fichiers d'effet sont souvent petits et quelques formats de fichiers son (MIDI) sont développés pour avoir une taille restreinte. Des options existent pour "fluidifier" le contenu mais elles peuvent nécessiter des serveurs spéciaux.

Le son est un des sens les plus importants pour recevoir de l'information et peut être utilisé très efficacement dans les sites web.

Pourtant, lors de vos visites sur différents sites web, les choses que vous entendez le plus couramment sont de piètres reproductions de musique martiale, des thèmes de séries télé vaguement familiers ou la musique de Beethoven jouée sur un Bontempi pendant le chargement d'une page web. Quand un concepteur insère des images inutiles sur son site, on appelle cela "Attrape-l'oeil" ; utiliser du son dans un site web s'appelle un "Attrape-Oreille".

"Alors, M. (ou Mme) Le (ou La) Tétu(e), quand doit-on mettre du son ?" Bonne question. L'audio peut être très utile pour reproduire des moments d'histoire (discours, évènements spéciaux, nouvelles, etc). C'est souvent une alternative moins coûteuse en bande passante que la vidéo quand le contenu est en majorité de la parole (e.g. cours magistral). De toute évidence, il peut être utilisé pour apprendre la musique et l'acoustique, pour comparer des interprétations d'oeuvres classiques ou simplement divertir -- le web peut se transformer en radio. Le Son peut servir à créer une ambiance (musique douce pour la lecture d'un poème).

Comme la vidéo, le son doit être converti d'analogique en digital, d'ondes audio qui se propagent dans l'air en représentations numériques des fréquences d'ondes. Cela peut être aussi simple que de parler dans un micro branché au dos de votre ordinateur, jusqu'à des enregistrements digitaux haut de gamme dans un studio professionnel. Au final, vous vous retrouvez avec un fichier qui sera dirigé vers un haut-parleur pour finir par voyager, de nouveau, dans l'air jusqu'à vos oreilles.

Les fichiers son existent en différents formats, créant encore une fois une soupe d'acronymes. Quelques-uns des formats de fichiers les plus connus sont les WAVE (WAV), AIFF, AU, MIDI, MP3 etc. Une explication détaillée de leurs différences dépasse ce didacticiel et nous devrons accepter le fait qu'un fichier son puisse voyager sur Internet pour être écouté à l'autre bout.

Un des formats, le MIDI, est particulièrement intéressant car il permet de créer les fichiers les plus petits. Plutôt que de digitaliser les ondes, les sons en format MIDI sont convertis en caractères représentant plus ou moins les notes sur différents types d'instruments. Quand on les décode, l'ordinateur utilise une bibliothèque de sons pour jouer la note voulue. De ce fait, les données envoyées sont très petites. Les sons MIDI ressemblent un peu à des sons de "jouets" et sont loin d'être aussi riches que ceux d'un CD audio.

Bien des sites offrent des sons en format RealAudio dans lequel les fichiers sons sont envoyés "à la volée" depuis un serveur web spécial jusqu'à votre navigateur web. C'est très efficace pour les soi-disant "stations de radios web" qui offrent des flashes infos, font la promotion d'évènements musicaux, etc (e.g. World Radio Network, RadioTower, Broadtcast.com, NPR, CNN). Comme cela nécessite un équipement spécial, RealAudio ne fait pas partie de ce didacticiel.

Nous devrions également mentionner le MP3, ou MPEG Audio Layer 3, un format particulier d'audio de haute qualité pouvant compresser un fichier son très riche en un fichier bien plus petit. Ce format musical va révolutionner l'industrie. Il existe un grand nombre de sites comme MP3.com offrant de la musique MP3 mais, encore une fois, encoder du son dans ce format particulier requiert du matériel et du logiciel spécifiques (et pose de tortueux problèmes légaux quand on convertit les oeuvres d'autres artistes).

Pour plus d'informations sur l'audio à travers le web, consultez la bibliothèque Virtuelle du Développeur Web pour l'Audio sur le World Wide Web

Pour inclure un fichier son dans une page web, on utilise évidemment le même tag <embed> étudié au cours de la leçon précédente sur la vidéo du web :

 <embed src="muzik.wav" autoplay=true controller=false></embed>

permettant de démarrer un fichier son automatiquement dès que la page web s'ouvre. En cachant la barre de contrôle à l'internaute, la musique démarre comme par magie. Si vous voulez laisser le choix de jouer le son ou pas, vous devez afficher la barre de contrôle et mettre l'option autoplay sur false :

 <embed src="muzik.wav" autoplay=false controller=true></embed>

Encore une fois, si vous utilisez de la musique ou du son dans votre page web, réfléchissez attentivement à la pertinence du contenu et au fait qu'on l'entendra chaque fois qu'on visitera votre page. Ne supposez jamais que l'audio marchera pour tous vos visiteurs (certaines personnes sont sourdes), et envisagez de fournir une alternative écrite ou des indications aux gens qui ne pourraient pas entendre le contenu.

Ajouter de l'Audio

Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez-les maintenant.

Dans cette leçon, nous allons ajouter du contenu audio à la page principale de notre web volcan. Pour ajouter encore à l'importance des Volcans, nous allons utiliser des extraits d'une lettre écrite par un observateur du Vésuve, volcan qui détruisit la ville de Pompei en 79 avant J.C. En plus du texte de la lettre, nous avons un enregistrement audio lu par un acteur désespéré qui prétend être l'écrivain, plus une photo des restes d'une des victimes de l'événement. Ici, nous prévoyons l'information en formats texte, visuel et audio !

Le fichier son que nous allons utiliser est enregistré en format vidéo digitale QuickTime, sans vidéo (seulement la piste son), afin de bénéficier du large support de QuickTime à travers le web et de la compression évoluée disponible dans ce format. De plus, nous pouvons l'enregistrer dans un format qui l'envoie à la volée depuis un serveur web. Le fichier aurait également pu être au format WAV ou AIF.

  1. Allez au Studio d'Enregistrement de la Leçon 29c pour télécharger une copie du fichier son. Enregistrez-le sous pliny.mov dans le répertoire movies.
  2. Allez au Studio d'Images de la Leçon 29c pour télécharger une copie du fichier image que nous utiliserons dans cette leçon. Sauvegardez-le sous bodies.jpg dans le répertoire pictures.
  3. Créez un nouveau fichier HTML dans votre éditeur de texte et sauvegardez-le sous le nom pliny.html
  4. Entrez le code HTML suivant dans votre nouveau fichier 
    
<html>
<head>
<title>Les Mots de Pline</title>
</head>
<BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666>
<h1 align=center>Les Observations de Pline le Jeune</h1>
Pline l'Ancien mourut en 79 avant J.C pendant l'éruption du 
Vésuve. Son neveu, Pline le Jeune s'échappa lors de la destruction
de Pompei et rapporta par écrit l'éruption. 
En lisant la lettre ci-dessous, écoutez la version audio interprétée
par un acteur connu :
<p>
<center>
<embed src="../movies/pliny.mov" width="180" height="16" 
       autoplay="false"  controller="true" 
       pluginspage="http://www.apple.com/quicktime/download/"> 
</embed>

<!-- début du bas de page standard du Web Volcan -->
<SCRIPT LANGUAGE="JavaScript">
<!-- masquer les scripts pour les vieux navigateurs

document.write('<p><hr><FONT FACE="helvetica,arial" size=-1><i>Web Volcan:</i> <B>');
document.write(document.title + '</B><BR>');
document.write('créé par Lorrie Lava, ');
document.write('<A HREF="mailto:lava@pele.bigu.edu?subject=' + document.title + '">');
document.write('lava@pele.bigu.edu</A><br>');
document.write('Etudes Volcaniques, <A HREF="http://www.bigu.edu/">');
document.write('Big University</A><p>');

// ajoute la date de modification seulement si le serveur fournit une date valide
if (Date.parse(document.lastModified) > 0) {
	document.write('<B>Dernière mise à jour : </B>' + document.lastModified + '<BR>');
}
document.write('<B>URL: </B>' + document.location.href + '</FONT><P>');	

// fin de masquage pour les vieux navigateurs -->
</SCRIPT>
<!-- fin de bas de page standard pour le Web Volcan -->
</body>
</html>
    NOTE : nous venons d'écrire une nouvelle page web avec un titre, une introduction, un bas de page et le tag <embed> qui inclut une barre de contrôle afin de permettre au visiteur de jouer un fichier son QuickTime.
  5. Sauvegardez et Chargez ce fichier html dans votre navigateur web. Vérifiez que le fichier son se charge et s'écoute grâce à la barre de contrôle QuickTime.

Maintenant, nous allons ajouter le contenu : le texte de la lettre dans une table HTML, avec une image alignée à droite.

  1. Ajoutez ce code HTML à la fin du tag <embed>..</embed> : 
    
<p>
<table border=0 cellpadding=6 cellspacing=1 width=70%>
<tr>
<td><font size=+1 color=#FF9999>
Les voitures que nous avions emmenées avec nous étaient, 
quoiqu'en pleine campagne, entraînées dans tous les sens, 
et l'on ne pouvait, même avec des pierres, les maintenir à 
leur place. La mer semblait refoulée sur elle-même, 
et comme chassée du rivage par l'ébranlement de la terre. 
Ce qu'il y a de certain, c'est que le rivage était agrandi, 
et que de nombreuses créatures marines étaient restées à sec sur le sable. 
De l'autre côté, une nuée noire et horrible, déchirée par des tourbillons de feu, 
laissait échapper de ses flancs entr'ouverts de longues traînées de flammes, 
semblables à d'énormes éclairs.
Alors, l'ami dont j'ai parlé revint plus vivement encore à la charge : 
" Si votre frère, si votre oncle est vivant, nous dit-il, 
il veut sans doute que vous vous sauviez ; et s'il est mort, 
il a voulu que vous lui surviviez. Qu'attendez-vous donc pour partir ?" 
Nous lui répondîmes que nous ne pourrions songer à notre sûreté, 
tant que nous serions incertains de son sort. 
A ces mots, il s'élance, et cherche son salut dans une fuite précipitée. 
Presqu'aussitôt après, la nuée s'abaisse sur la terre et couvre les flots. 
Elle dérobait à nos yeux l'île de Caprée, qu'elle enveloppait, 
et nous cachait la vue du promontoire de Misène. 
Ma mère me conjure, me presse, m'ordonne de me sauver, de quelque manière que ce soit. 
Elle me dit que la fuite est facile à mon âge ; que pour elle, 
affaiblie et appesantie par les années, elle mourrait contente, 
si elle n'était pas cause de ma mort. 
Je lui déclare qu'il n'y a de salut pour moi qu'avec elle. 
Je lui prends la main, je la force à doubler le pas. 
Elle m'obéÔt à regret, et s'accuse de ralentir ma marche.
<p> La cendre commençait à tomber sur nous, quoiqu'en petite quantité. 
Je tourne la tête, et j'aperçois derrière nous une épaisse fumée qui nous suit 
en se répandant sur la terre comme un torrent. 
"Pendant que nous voyons encore, quittons le grand chemin", dis-je à ma mère, 
"de peur d'être écrasés dans les ténèbres par la foule qui se presse sur nos pas". 
A peine nous étions-nous arrêtés, que les ténèbres s'épaissirent encore. 
Ce n'était pas seulement une nuit sombre et chargée de nuages, 
mais l'obscurité d'une chambre où toutes les lumières seraient éteintes. 
On n'entendait que les gémissements des femmes, les plaintes des enfants, 
les cris des hommes. 
<img src="../pictures/bodies.jpg" alt="corps ensevelis dans la cendre"
width="358" height="135" align="right">
L'un appelait son père, l'autre son fils, l'autre sa femme ; 
ils ne se reconnaissaient qu'à la voix. Celui-ci s'alarmait pour lui-même, 
celui-là pour les siens. 
On en vit à qui la crainte de la mort faisait invoquer la mort même.
Ici, on levait les mains au ciel ; là, on se persuadait qu'il n'y avait plus de dieux, 
et que cette nuit était la dernière, l'éternelle nuit qui devait ensevelir le monde.
Plusieurs ajoutaient aux dangers réels des craintes imaginaires et chimériques. 
Quelques-uns disaient qu'à Misène tel Èdifice s'était écroulé, que tel autre était en feu ;
bruits mensongers qui étaient accueillis comme des vérités.
Il parut une lueur qui nous annonçait, non le retour de la lumière, 
mais l'approche du feu qui nous menaçait. 
Il s'arrêta pourtant loin de nous. L'obscurité revint. 
La pluie de cendres recommença plus forte et plus épaisse. 
Nous nous levions de temps en temps pour secouer cette masse qui nous eût engloutis et étouffés sous son poids. 
Je pourrais me vanter qu'au milieu de si affreux dangers, 
il ne m'échappa ni une plainte ni une parole qui annonçât de la faiblesse ; 
mais j'étais soutenu par cette pensée déplorable et consolante à la fois, 
que tout l'univers périssait avec moi. 
<p> Enfin, cette noire vapeur se dissipa, comme une fumée ou comme un nuage. 
Bientôt après, nous revîmes le jour et même le soleil, 
mais aussi blafard qu'il apparaît dans une éclipse. 
Tout se montrait changé à nos yeux troublés encore. 
Des monceaux de cendres couvraient tous les objets, comme d'un manteau de neige.
Nous retournâmes à Misène. Chacun s'y rétablit de son mieux, 
et nous y passàmes une nuit entre la crainte et l'espérance. 
Mais la crainte l'emportait toujours, car le tremblement de terre continuait. 
La plupart, égarés par de terribles prédictions, aggravaient leurs infortunes et celles d'autrui. 
Cependant, malgré nos périls passés et nos périls futurs, il ne nous vint pas la pensée de nous éloigner, 
avant d'avoir appris des nouvelles de mon oncle.
Vous lirez ces détails ; mais vous ne les ferez point entrer dans votre ouvrage. 
Ils ne sont nullement dignes de l'histoire ; et, si vous ne les trouvez pas même convenables dans une lettre, 
ne vous en prenez qu'à vous seul qui les avez exigés.
Adieu. </td>
</tr>
</table>
<p>
<font size=2>Lettre de Pline le Jeune, texte du 
<a href="http://www.iath.virginia.edu/pompeii/pliny.html">Projet Pompei</a><br>
Images des victimes de Pompei,  
<a href="http://www.geo.mtu.edu/~boris/VESUVIO_79.html">photos 
prises en 1992 par Werner Keller</a>.</font>
<p>
<font size=+2>Si ce récit historique vous montre<br>
l'impact d'un volcan sur la vie humaine, 
<a href="index1.html">continuez ici ...</a></font>
    NOTE : rien de nouveau dans cette section, vous pouvez donc facilement copier et coller dans votre HTML. Notez que nous avons inclus un fichier image dans la table et mis en page le texte pour qu'il se pose autour. Sous la table, on trouve quelques liens vers des sites similaires autant qu'un lien vers notre site principal Web Volcan.
  2. Sauvegardez et Rechargez dans votre navigateur web
  3. La dernière chose à faire est de créer un lien depuis notre site Web Volcan vers cette nouvelle page pour attirer les internautes. Ouvrez le fichier HTML index1.html dans votre éditeur de texte.
  4. Aprés la ligne : 
    qui mourut d'asphyxie après avoir observé la destruction de Pompei par l'éruption du Vésuve en 79 avant J.C
    ajoutez : 
    <a href="pliny.html">"Ecouter" le récit de Pline !</a>
  5. Sauvegardez et Rechargez dans votre navigateur web

Vérifiez Votre Travail

Comparez vos pages web avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur. Comparez votre travail avec le HTML des exemples (cherchez quelque chose comme Source dans le menu Afficher de votre navigateur).

Révision

Revoyons les grandes lignes de cette leçon :

  1. Quels types d'information serait-il intéressant de présenter au format son sur Internet ?
  2. Quelles limites pourrait-il exister à placer du son dans votre page web ?
  3. Quel est le code HTML pour inclure un clip audio dans votre page web ?
  4. Quel est le format HTML pour présenter du son qui tournerait en boucle ?

Informations Supplémentaires

Comme vous l'avez vu dans notre précédente leçon sur la vidéo, le format QuickTime que nous avons utilisé ici pour le fichier son ne marchera peut-être pas pour tout le monde. Vous pouvez utiliser le même code HTML pour jouer du son en format WAVE. Pourtant, souvenez-vous que le QuickTime bénéficie d'une compression très efficace pour réduire la taille d'un fichier son ; notre fichier QuickTime de 360 ko serait près de 10 fois plus gros (3.2 Mo) au format .wav !

Nous n'avons pas inclus le fichier WAVE dans la version téléchargeable du didacticiel, mais vous pouvez le récupérer dans le Studio d'Enregistrement de la Leçon 29c.

Une fois le fichier son récupéré, changez simplement toutes les références HTML de pliny.mov avec le nouveau nom de fichier, pliny.wav. Attention, ca ne marchera peut-être pas aussi bien que la version Quicktime.

Travail Indépendant

Essayez d'ajouter du son à vos propres pages web. Avant l'utilisation de tout fichier son dans une page que vous allez mettre en ligne sur Internet, assurez-vous d'obtenir l'autorisation de la personne qui l'a créé.

Informations Supplémentaires

Vous pouvez toujours créer un lien vers n'importe quel fichier en utilisant notre lien hypertexte bien connu maintenant :

  Essayez mon dernier <a href="new_riff.wav">riff de guitare</a> 
  ou <a href="trumpet.mid">solo de trompette</a>

en supposant qu'on a un fichier WAV et un fichier MIDI avec ces noms-là. Le navigateur web quittera la page où vous vous trouviez et essaiera de charger les sons, du mieux qu'il peut, dans une page vide. Après l'écoute, il vous faudra utiliser le bouton précédent de votre navigateur pour retourner à la page d'origine. L'implémentation n'est pas aussi transparente que quand le fichier est inclus dans une page mais ça marche.

A Suivre....

Reculez et accrochez-vous... Une Onde de Choc (S H O C K W A V E !) arrive

ALLER A.... | Index des Leçons | précédent : "L'Heure du Film !" | suivant : "Shockwave" |

Ecrire le HTML : Leçon 29c : Le Son du Web
©1994-2003 Maricopa Community Colleges

La 'net connection (en anglais) à MCLI est Alan Levine
Suggestions en Français à Bernard Bensoussan

URL: http://www.mcli.dist.maricopa.edu/tut/tut29c.html