A partire da Firefox 3.5, Chrome 3, Opera 10.5 e Safari 4, possiamo sfruttare molte delle nuove funzionalità di HTML 5, incluso il supporto audio nativo senza la necessità di Flash. Come scoprirai, creeremo solo il nuovo
L'elemento audio
L'elemento audio accetta una manciata di attributi, in particolare:
riproduzione automatica : Riproduce immediatamente il file quando viene caricata la pagina.
controlli: Visualizza il giocatore sulla pagina.
precarico: Inizia immediatamente il buffering del file. (valori = nessuno, auto, metadati)
src: Il percorso per il nome del file. È preferibile caricare il file tramite l'elemento "origine" figlio.
Mozilla e Webkit non vanno ancora d'accordo, quando si tratta del formato audio. Firefox vorrà vedere un file .ogg, mentre i browser Webkit funzioneranno perfettamente con l'estensione .mp3 comune. Ciò significa che, almeno per ora, dovresti creare due versioni dell'audio. Ti consiglio di utilizzare uno strumento online rapido e semplice, chiamato Media.io, per convertire il tuo mp3 nel formato ogg.
Quando Safari carica la pagina, non riconoscerà quel formato .ogg, e salterà e passerà alla versione mp3, di conseguenza. Si prega di notare che IE, al solito, non supporta questo, e Opera 10 e inferiore può funzionare solo con i file .wav.
Caricamento audio con jQuery
// Leggermente modificato dalla versione video. $ (document) .ready (function () // Crea un elemento audio e impostalo su autoplay, // e mostra il player quando la pagina viene caricata. var audio = $ ('', autoPlay:' autoplay ', controlla:' controls '); // Chiama la nostra funzione addSource e passa l'elemento audio // e il percorso (i) al tuo audio. addSource (audio, 'audioFile.ogg'); addSource (audio, 'audioFile.mp3'); // Quando viene attivato qualche evento ... $ ('a'). Click (function () // Aggiungi l'audio + gli elementi sorgente alla pagina. Audio.appendTo ('body'); // Fadeout il tag anchor per mantenere l'utente facendo nuovamente clic su. $ (this) .fadeOut ('slow'); return false;); // Aggiunge un elemento sorgente e lo aggiunge all'elemento audio, rappresentato // da elem. function addSource (elem, path) $ ('') .attr (' src ', path) .appendTo (elem); );
Tieni presente che possiamo fare molto, molto di più con questo, incluso come fermare l'audio, cambiare il volume, ecc. Questo suggerimento rapido di tre minuti è solo per stuzzicare l'appetito. Se vuoi approfondire, facci sapere e programmerò un tutorial completo di trenta minuti sull'argomento!
Seguici su Twitter o iscriviti al feed Nettuts + RSS per i migliori tutorial di sviluppo web sul web.
Share
Accentsconagua
