JavaScript  »  Articoli  »  HTML5 e JavaScript 

Precaricare l'audio prima della riproduzione

Una volta generato l'elemento audio si deve definire la strategia di precaricamento. Le specifiche HTML5 per l'elemento <audio> definiscono tre valori per la proprietà preload:

• none: indica allo user agent che l'autore non si aspetta che l'utente abbia bisogno della risorsa multimediale o che il web server ha bisogno di minimizzare il traffico non necessario.
  Ipotizzando, come scenario di utilizzo, un blog di podcast con un file audio per ogni post, questa opzione si rivela particolarmente utile perché riduce la banda necessaria al caricamento iniziale. Una volta che l'utente, attraverso i controlli predefiniti o con i metodi JavaScript load() e play(), avvia la riproduzione del file, il browser comincerà a scaricare il flusso audio.
• metadata: indica allo user agent che l'autore non si aspetta che l'utente abbia bisogno della risorsa multimediale, ma che è accettabile che vengano scaricati i metadati della risorsa (dimensioni, durata ecc.).
  L'opzione è raccomandata se si sta progettando un player audio e si ha necessità di ricavare le informazioni di base del file, ma senza avviare la riproduzione.
• auto: indica allo user agent di considerare, senza rischio per il server, prima le esigenze dell'utente, fino a scaricare l'intera risorsa.
  Questo approccio è probabilmente il migliore se si sta progettando un gioco poiché permette, prima di avviare il gioco stesso, di caricare tutti i file audio.

Si noti che se si imposta la proprietà src dell'elemento audio attraverso istruzioni programmate, il browser imposterà la proprietà preload, se non altrimenti specificato, ad auto. Per questo motivo, se lo scenario d'uso implica l'utilizzo di un valore differente, bisogna essere sicuri di specificarlo nel codice prima di impostare il tag src.

Si può analizzare l'impatto sulla rete di queste tre opzioni visualizzando la pagina di esempio e usando i Developer Tools F12 (scheda Rete) di Internet Explorer. Per finalità di debug si possono simulare le nuove chiamate e disabilitare la cache locale spuntando la voce Aggiorna sempre dal server dal menu Cache.

Figura 3: Disabilitare la cache con i Developer Tools F12

Ecco il comportamento della rete nei casi indicati:

Figura 4: Rete con preload=none
(clic per ingrandire)

Figura 5: Rete con preload=metadata
(clic per ingrandire)

Figura 6: Rete con preload=auto
(clic per ingrandire)

La proprietà preload è utile per la fase di inizializzazione, ma è necessario sapere quando il browser ha effettivamente terminato di caricare la risorsa ed è pronto a riprodurla. Si può ottenere questa informazione intercettando l'evento canplaythrough. Questo evento è chiamato dallo user agent quando valuta che, avviata la riproduzione, il file multimediale potrebbe essere riprodotto alla stessa velocità fino alla fine, senza doversi fermare per riempire di nuovo il buffer.

var audio = document.createElement("audio");
audio.src = "audio/sample.mp3";
udio.addEventListener("canplaythrough", function () {
		alert('The file is loaded and ready to play!');
	}, false);

Riproduci l'esempio

Altri articoli

Altre guide

Altre newsletter