Writing HTML | Riguardo A | FAQ | Riferimenti | Tag | Lezioni | indietro | avanti |

29c. Suono della [web] Music

"Leggere solo del testo su una web page fa' così tanto... 1994!
voglio     sentirlo
c     a     n     t     a     r     e    !!"

Obiettivi

Dopo questa lezione sarai in grado di:

Lezione

media type: digital audio
cosa fa meglio: eventi storici, narrazioni, elementi d'atmosfera, sottofondi, attirare il pubblico
elementi da considerare giudizio commenti
"difficoltà" o barriera per creazione media bassa alta
----		 L'hardware necessario per digitalizzare suoni incluso maggior parte nuovi computer e puo' essere complicato come un microfono. Programmi gratuiti o economici utilizzabili per riprodurre e modificare suono, e molti siti propongono file audio scaricabili.
"ampiezza" di audience che puo' vedere il media ristretta ampia
----		 I sistemi piu' recenti hanno incluse abilita' per il play back di suoni, come in molti web browser. Molte persone avranno il loro volume disattivato.
consumo di banda basso alto
----		 Puo' essere importante, ma e' minore rispetto ai video. Piccoli filesper effetti sonori ed alcuni formati (MIDI) sono progettati per essere leggeri. Esistono opzioni per lo "stream" del contenuto ma possono richiedere server speciali.

Il suono è uno dei sensi piu' cruciali per i sensi umani per captare informazioni e puo' essere molto efficace nei siti web.

In ogni caso, in molti siti, la maggior parte dei suoni disponibili sono versioni storpiate di marce, sigle televisive famose, stilizzati Beethoven che si caricano al contempo della pagina. Quando un designer aggiunge immagini insignificanti ad un lavoro, e' chiamato "Eye Candy"; l'uso del suono per molti web site si rifà al "Ear Candy".

"Quindi, Signor Sotutto, quando va bene il suono?" Buona domanda. L'audio puo' essere molto utile per richiamare momenti storici (dialoghi, eventi speciali, notizie, etc). Spesso e' una alternativa piu' leggera (in consumo banda) al video per i casi in cui prevale il dialogo. Ovviamente, puo' essere usato per imparare musica ed acustica, per confrontare le rese di opere classiche, o solo per intrattenimento-- la rete puo' fungere da radio. Il suono può essere usato per creare una atmosfera.

Come per i video, il suono deve essere convertito da analogico a digitale, da onde sonore che viaggiano attraverso l'aria, a rappresentazioni numeriche di frequenze d'onda. Puo' essere semplice come parlare ad un microfono collegato al retro del tuo computer, ma anche sofisticato come registrare in uno studio sonoro. Alla fine, si ottiene un file da computer che puo' essere riprodotto attraverso le casse e, ancora attraversare l'aria per raggiungere le orecchie.

I sound file sono disponibili in vari formati, che creano un altro piano di confusione nella zuppa alfabetica. Alcuni dei formati comuni sono WAVE (WAV), AIFF, AU, MIDI, MP3 etc. Una panoramica esaustiva delle differenze tra loro va oltre il nostro tutorial, e dovremo solo accettare che si possa avere un file sonoro sul computer, inviabile via web e che quindi riproducibile ancora.

Un formato interessante e' il MIDI, in quanto generalmente produce i file di dimensioni minori. Piuttosto che digitalizzare le onde sonore in se stesse, in formato MIDI i suoni sono rappresentati come caratteri testuali indicanti le note in diversi tipi di strumenti e quando sono riprodotti, il computer usa una libreria inclusa per capire le note designate. In piu' i dati inviati sono molto piccoli. I suoni MIDI tendono ad avere un effetto "giocattolo" e non sono ricchi come quelli di un CD.

Molti siti offrono suoni in formato RealAudio in cui i file di suono scorrono da uno speciale server al tuo web browser. Questo e' il puo' efficiente per quelle stazioni chiamate "web radio", siti che offrono dispacci in tempo reale, etc (come World Radio Network, RadioTower, Broadtcast.com, NPR, CNN). Dato che richiede un equipaggiamento speciale, RealAudio non fa parte di questo corso.

Dovremmo anche menzionare un formato conosciuto come MP3, o MPEG Audio Layer 3, una forma speciale di audio ad alta qualita' che puo' comprimere un file sonoro molto ricco in uno piu' leggero. Puo' essere un formato rivoluzionario per l'industria musicale. Puoi trovare molti siti, come MP3.com che offrono musica MP3, ma ancora, e' necessario uno speciale hardware e software (e tocca strane battaglie legali per i diritti d'autore).

Per altre informazioni sull'audio nel web, vedi Web Developer's Virtual Library per Audio for the WorldWide Web

Per includere un file sonoro in una web page, si usa lo stesso tag <embed> che abbiamo visto nella precedente lezione sui video sul web:

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

che e' il modo classico per scrivere un file sonoro da far girare da solo appena la pagina si apre, con il controller invisibile, alla persona che vede la pagina, dando un senso di magia. Se vuoi dare la scelta se far partire il file o meno, dovresti avere il controller visibile con autoplay settato a false:

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

Ancora, se vai ad usare musica o suoni nella tua pagina, pensa attentamente allo scopo del contenuto e se e' sensato sentirlo ogni volta che si giunge alla pagina. Non dovresti assumere che il suono funzioni per ogni visitatore, (oltre che per i sordi), e quindi considerare un testo alternativo od un suggerimento per persone che non sono in grado di sentire il contenuto.

Aggiungere Audio

Nota: Se non possiedi i documenti di lavoro dalla precedente lezione, scaricane una copia ora.

In questa lezione, andremo ad aggiungere alcuni contenuti audio alla nostra pagina web principale. Per aggiungere un po' di rilievo all'importanza dei vulcani, useremo il contenuto di una lettera scritta da un osservatore del Vesuvio, che nel 79 A.C. distrusse Pompei. Accanto al testo della lettera, abbiamo una registrazione di un attore, piu' una foto di uno dei resti di una vera vittima dell'evento. In questo modo, diamo informazioni scritte, audio, e visive!

I file sonori usati sono realmente salvati in formato QuickTime digital video, senza video, solo colonna sonora, per avvantaggiarci dell'ampio supporto per QuickTime nelle web page e la compressione file avanzata disponibile per questo formato. In piu' possiamo salvarli nel formato che scorre dal server. Il file puo' essere salvato anche come file WAV o AIF.

  1. Vai al Lesson 29c Sound Studio per fare il download di una copia del sound file. Salvala come file chiamato pliny.mov nella tua movies folder.
  2. Vai al Lesson 29 Image Studio per fare il download di una copia di un'immagine che useremo in questa lezione. Salvala come file bodies.jpg nella tua pictures folder.
  3. Crea un nuovo file nel text editor e chiamalo pliny.html
  4. Digita il seguente HTML in questo nuovo file 
    
<html>
<head>
<title>Parole di Plinio</title>
</head>
<BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666>
<h1 align=center>Osservazioni di Plinio il Giovane</h1>
Nel 79 AC, Plinio il Vecchio trovò la morte durante l'eruzione
del Vesuvio. Suo nipote, Plinio il Giovane
scampò alla distruzione di Pompei e lasciò scritto un
racconto dell'eruzione. Come puoi leggere nella lettera seguente
ascoltare in questa versione audio letta da un famoso attore:
<p>
<center>
<embed src="../movies/pliny.mov" width="180" height="16" 
       autoplay="false"  controller="true" 
       pluginspage="http://www.apple.com/quicktime/download/"> 
</embed>

<!-- start of Volcano Web standard footers -->
<SCRIPT LANGUAGE="JavaScript">
<!-- hide  scripts from old browsers

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

// append a modification date only if server provides a valid date
if (Date.parse(document.lastModified) > 0) {
	document.write('<B>ultima modifica: </B>'+ document.lastModified + '<BR>');
}
document.write('<B>URL: </B>' + document.location.href + '</FONT><P>');	

// done hiding from old browsers -->
</SCRIPT>
<!-- end of Volcano Web standard footers -->
</body>
</html>
    NOTA: Abbiamo scritto una nuova pagina con un titolo, alcune righe introduttive, un footer, e il tag <embed> per includere un controllo che permettera' al visitatore di usare un QuickTime sound file.
  5. Salva e Carica questo file nel browser. Verifica che il file funzioni perfettamente.

Ora aggiungeremo alcuni contenuti, il testo della lettera, dentro una tabella HTLM, con una figura allineata a destra.

  1. Aggiungi questo HTML dopo la fine del tag <embed>..</embed>: 
    
<p>
<table border=0 cellpadding=6 cellspacing=1 width=70%>
<tr>
<td><font size=+1 color=#FF9999>
I carri che avevamo fatto venire innanzi 
, nonostante che la superficie fosse perfettamente livellata, sbandano nelle piu' diverse direzioni e non rimanevano fermi al loro posto, neppure se bloccati con pietre. 
Inoltre vedevamo il mare che si riassorbiva in se' stesso e che sembrava quasi fatto arretrare dalle scosse telluriche.
Senza dubbio il litorale era avanzato e teneva imprigionato nelle sue sabbie asciutte molti animali marini. 
Dall'altra parte una nube nera e terrificante, lacerata da vampeggianti soffi di fuoco che si esplicavano in linee sinuose e spezzate, si squarciava emettendo delle fiamme dalla forma allungata; avevano l'aspetto di fulmini ma erano piu' grandi.A questo punto l'amico spagnolo ci incalza: Se tuo fratello, se tuo zio vive, vi vuole incolumi; se e' morto, ha voluto che voi gli sopravviveste. Perciò perchè indugiate a mettervi in salvo?" Gli rispondiamo che noi non avremmo mai accettato di provvedere alla nostra salvezza finche' non avevamo nessuna notizia della sua. Egli non perde altro tempo e si getta in avanti, correndo a piu' non posso e portandosi in salvo. Poco dopo quella nube calo' sulla terra e ricoperse il mare: aveva gia' avvolto e nascosto Capri e portato via ai nostri sguardi il promontorio di Miseno. Allora mia madre a scongiurarmi di fuggire, ma io le risposi che non mi sarei salvato senza di lei e le presi la mano, trascinandola.<P>Incomincia a cadere cenere, ma e' ancora rara. Mi volto indietro: una fitta oscurita' ci incombeva alle spalle, riversandosi a terra, ci veniva dietro come un torrente. "Deviamo, le dico, finche' ci si vede ancora, perche' la calca non ci calpesti nel buio." Avevamo appena fatto in tempo a sederci, che fece buio, ma che non era simile ad una notte nuvolosa o senza luna, ma ad una stanza chiusa senza luci. Cominciammo a sentire i lamenti, i pianti, le grida. alcuni con le grida cercavano di richiamare ed alle grida cercavano di rintracciare, i genitori, i figli, i coniugi. <img
src="../pictures/bodies.jpg" alt="bodies buried in ash"
width="358" height="135" align="right">Si potevano riconoscere solo con le voci; alcuni si lamentavano per le proprie sciagure, altri per quelle dei propri cari, altri avevano così tanta paura della morte da invocarla; molti innalzavano le mani agli dei, ma di piu' avevano perso fiducia negli dei e pensavano che quella sarebbe stata l'ultima notte ed eterna. C'erano persone che aumentavano i pericoli con racconti fasulli. Arrivavano quelli che dicevano che a Miseno la tale costruzione era crollata, che la tal altra era divorata dall'incendio: non era vero, ma la gente ci credeva. Si rischiaro', anche se non sembrava un ritorno al giorno, ma un segno dell'approssimarsi del fuoco. Il fuoco si fermo in realtà piuttosto lontano, ma l'oscurita' e la cenere tornarono, pesanti. Ci alzavamo per togliercela di dosso spesso, altrimenti ne saremmo rimasti coperti e schiacciato sotto il suo peso. Potrei vantarmi di non essermi lasciato prendere da questi gravi pericoli, se non avessi pensato che tutto l'universo stava perendo con me ed io con lui, grande consolazione per la morte.
      <P>Finalmente l'oscurita' si attenuo' ed arrivo' ben presto il giorno genuino e risplendette ance il sole, ma livido, come dopo le eclissi. Ai nostri occhi terrificati, il mondo era cambiato, coperto di cenere come se fosse neve. Tornati a Miseno e ristoratici un poco, trascorremmo una notte tra speranza e timore. Il timore era superiore, alimentato dalle scosse di assestamento e dalle terribili profezie di individui alienati. Rifiutavamo ancora di andarcene senza notizie dello zio, sebbene i pericoli passati e quelli previsti.
      <P>Ti mando questa relazione perche' tu la legga e non perche' la scriva, dato che non s'addice affatto al genere storico; la colpa e' tua se non ti parra' addirsi neppure a quello epistolare. Stammi bene.
 </td>
</tr>
</table>
<p>
<font size=2>Lettera di Plinio il Giovane, testo de
<a href="http://www.iath.virginia.edu/pompeii/pliny.html">Pompeii Project</a><br>
Immagini delle vittime, de
<a href="http://www.geo.mtu.edu/~boris/VESUVIO_79.html">foto scattate nel
1992 da Werner Keller</a>.</font>
<p>
<font size=+2>Se questo resoconto storico ti ha mostrato<br>
l'impatto di un vulcano sulla vita umana,
<a href="index1.html">continua con ...</a></font>
    NOTA: Non c'è nulla di nuovo in questa sezione, e quindi puoi facilmente fare un copia&incolla. Nota che abbiamo incluso un file grafico dentro la tabella e permesso al testo di intrappolarcelo dentro. Sotto la tabella ci sono alcuni link a fonti di materiali inerenti ed un link al nostro sito principale.
  2. Salva ed Aggiorna
  3. L'ultima cosa che faremo sarà costruire un link dalla nostra pagina principale del Volcano Web per portare i nuovi visitatori a questa pagina. Apri il file index1.html nel text editor.
  4. dopo la riga: 
    il quale mori' di asfissia dopo aver osservato la distruzione di
    Pompei a causa dell'eruzione
del 79 A.C. del Vesuvio.
    aggiungi questa riga: 
    <a href="pliny.html">"Ascolta" il racconto di Plinio!</a>
  5. Salva ed Aggiorna

Controlla il Tuo Lavoro

Confronta la tua pagina web con un esempio di come il documento dovrebbe apparire. Se la tua pagina web fosse diversa dall'esempio, o se i link non dovessero funzionare correttamente, controlla il testo che hai digitato nell'editor di testo. Confronta il tuo lavoro con il codice dell'esempio (cerca qualcosa tipo Source nel menu View).

Verifica

Argomenti di verifica per questa lezione:
  1. Quali sono gli esempi di tipi di informazioni che potrebbero essere agevolmente veicolate con un suono in Rete?
  2. Alcune delle limitazioni dell'uso di suoni nelle web page.
  3. Codice per includere un clip audio nelle tue pagine web.
  4. Come scrivere l'HTML per implementare un suono che ciclizzi continuamente?

Pratica Indipendente

Prova ad aggiungere alcuni suoni alle tue pagine personali. Prima di usare qualsiasi suono in una pagina pubblica, assicurati di avere il permesso dell'autore.

Informazioni Aggiuntive

Puoi sempre costruire un link ad ogni media file usando il nostro classico link:

  Prova la mia ultima <a href="new_riff.wav">nenia per chitarra</a> 
  o <a href="trumpet.mid">chiamata per tromba</a>

assumendo che si abbiano un WAV file ed un MIDI file con questi nomi. Il web browser lascera' la pagina a cui era collegato e provera' a caricare i suoni il meglio possibile in una pagina vuota. Dopo aver sentito il suono, dovresti spingere il bottone back per tornare alla pagina da dove eri partito. L'implementazione non e' perfetta, ma funziona.

Prossimamente....

Stai indietro ed aggrappati... una S H O C K W A V E! sta arrivando!

VAI A.... | Indice Lezioni | indietro: "MovieTime!" | avanti: "Shockwave" |

Writing HTML: Lezione 29c: Suono della [web] Music
©1994-1999 Maricopa Community Colleges

The 'net connection at MCLI is Alan Levine
Comments to mailto:alan.levine@domail.maricopa.edu?subject=Writing HTML