HTML5 ha reso molte cose più semplici nello sviluppo web, una delle quali sta usando l'audio incorporato. Oggi lavoreremo attraverso il processo di personalizzazione completa dell'elemento player audio HTML5, che può adattarsi ai browser più vecchi con fallback. È un metodo semplice che è facile da costruire e modificare.
Il progetto open source MediaElement.js è molto popolare, ed è stato addirittura integrato nel nucleo di WordPress dalla versione 3.6. Ti consente di incorporare qualsiasi audio o video HTML5 utilizzando un'interfaccia giocatore nativa che può adattarsi dinamicamente a un player Flash / Silverlight quando necessario. Sono rimasto davvero impressionato nel vedere tutte le funzionalità e sembra essere una delle soluzioni più avanzate per la gestione dei browser legacy. Lo useremo come punto di partenza!
Demo dal vivo - Scarica il codice sorgente
Iniziare
Subito ho notato che MediaElement è stato creato su jQuery. L'ultima libreria al momento della stesura di questo codice è la 1.10.2 e il supporto per vari elementi dell'interfaccia utente potrebbe cambiare negli aggiornamenti futuri. Oltre a questo script abbiamo anche bisogno di una copia di MediaElement-and-player.min.js che puoi prendere dal sito web ufficiale o dal repository GitHub. Gli altri due file che dovresti copiare nella stessa directory sono flashmediaelement.swf e silverlightmediaelement.xap.
Ora lo script funziona sostituendo la tua media tag con alcuni HTML interni creati usando i nomi delle classi. La sovrascrittura di queste classi dovrebbe fornire molto spazio per una personalizzazione dettagliata. Sto usando una traccia abbastanza lunga chiamata Evidence Song che viene rilasciata sotto CC attribution + share allo stesso modo.
L'idea di design originale è venuta da questo tutorial su DesignModo che utilizza anche le copertine degli album e semplifica le tracce del volume / tempo. Il mio obiettivo è quello di adattarlo notevolmente a una versione semplificata in cui l'attenzione è rivolta all'usabilità pulita. Ho aggiornato molti elementi grafici utilizzando materiale di PixelsDaily come questi slider metallici. Anche i pulsanti play / pause e mute / unmute provengono da questo lettore audio PSD.
Avere alcuni PSD grafici o freebie organizzati in anticipo ti farà risparmiare un sacco di problemi quando proverai a creare il player nei CSS. Ma prima di saltare nel codice CSS, voglio spiegare come inizializziamo lo script.
Implementazione di MediaElement.js
Il metodo di inizializzazione è chiamato mediaelementplayer () che può richiedere un numero di opzioni differenti. Consulta la documentazione della pagina web per saperne di più su come funziona.
L'elenco delle caratteristiche è creato in modo molto simile a un array di valori. play pausa è un singolo pulsante di riproduzione e pausa, mentre progresso e volume rappresentano le tracce di scrubber per ogni proprietà. Posso anche definire la larghezza / altezza dell'elemento audio come dovrebbe essere renderizzato usando jQuery.
Gli ultimi tre parametri forzeranno la visualizzazione nativa su piattaforme mobili usando iOS o Android. A volte puoi ottenere un'interfaccia utente audio semplice da utilizzare su dispositivi mobili, ma in questo caso è molto più semplice supportare il lettore nativo. Il problema più grande è la gestione di un layout mobile-responsive che si adatta anche a un'interfaccia audio utilizzabile.
Stili Audio Player
Ora possiamo passare al CSS e vedere come viene creato il design. La configurazione di base del codice si basa sul posizionamento relativo o assoluto per ciascun elemento principale. Possiamo impostare valori di larghezza / altezza fissi per garantire che tutto sia uguale in tutti i browser. .lettore audio sarà la classe del contenitore che possiamo sempre usare come base.
L'ampio contenitore del lettore audio può essere progettato in qualsiasi modo usando trame ripetute, gradienti di sfondo, persino ombre di scatole CSS3. Ho anche creato un elemento h2 di esempio che contiene il nome della band e il titolo del brano. Usando jQuery potremmo persino aggiornare questo valore di testo in base ad alcune playlist di musica pre-generate.
Noterai abbastanza rapidamente che ogni input ha una classe di definizione che è molto semplice da manipolare. Il pulsante di riproduzione / pausa viene creato utilizzando un singolo file PNG e gli aggiornamenti dell'immagine di sfondo in base a quale pulsante deve essere visualizzato. Questi possono essere presi di mira usando .mejs-play button e Pulsante .mejs-pause, rispettivamente.
Anche l'icona audio silenziamento / silenziamento è molto simile e utilizza un altro sprite PNG.Il più grande time sink verrà quando dovrai studiare ciascuna di queste classi individuali e imparare come scrivere specifici selettori CSS per loro. MediaElement è ottimo per l'aggiornamento dell'interfaccia per includere numerose classi correlate per quasi tutte le interazioni con gli utenti.
Barre di lavaggio
Ci sono due scrubbers unici relativi al volume audio e alla ricerca del tempo sulla traccia. Ho mantenuto sfumature o colori di sfondo piatto, ma potresti provare a utilizzare un'immagine di sfondo ripetuta per vedere come appare.
Per ciascuna barra di scorrimento, troverai diverse porzioni che devono essere stilizzate separatamente. Ogni barra avrà una classe di visualizzazione completa che rappresenta il valore al 100%. Per il volume questo è etichettato .mejs-orizzontale-volume-totale ed è pensato per integrarsi perfettamente nel layout. allo stesso modo .mejs-orizzontale-volume-corrente rappresenta la barra che mostra il livello del volume corrente. Quindi, se è impostato al 50%, verrà riempita solo la metà della barra totale utilizzando queste proprietà CSS. Mi piace come il bordo-raggio arrotondato guardi su ogni traccia di scrubber ed è molto più facile con l'aiuto delle proprietà CSS3.
Il binario di carico ha una caratteristica in più con la classe .mejs-time-loaded. Questo rappresenta quanto del file audio è stato precaricato tramite download in streaming. Questo effetto è più comunemente visto nei lettori video come con YouTube. Ma le tracce audio possono avere lo stesso effetto: questi file sono solo più piccoli e non impiegano più tempo per terminare il download.
Dovrei notare che l'uso di qualsiasi versione di jQuery 1.8+ non rende sempre la larghezza totale della barra di scorrimento. Per qualche ragione non aumenta mai a meno che non includiamo classi genitore più specifiche o usiamo il !importante parola chiave. Bug simili potrebbero apparire nelle versioni future, quindi assicurati di ricontrollare tutto.
Funzionalità dell'interfaccia utente extra
Le ultime due sezioni CSS si concentrano sui dispositivi di scorrimento metallici e sul tooltip basato sul tempo. Ho trovato questo effetto molto ispiratore sul lettore DesignModo e volevo tenerlo come una dimostrazione di ciò che è possibile all'interno dell'interfaccia utente.
Non vale la pena di spiegarlo qui, a parte le immagini di sfondo perfettamente adattate con posizionamento assoluto. È una buona idea mantenere tutto in allineamento a meno che il tuo obiettivo non sia quello di costruire un lettore audio a larghezza di fluido reattivo. Le cose diventano decisamente più complicate ma dovrebbe essere ovvio che tutto è possibile con abbastanza lavoro.
Seguendo l'esempio precedente ho mantenuto questo effetto hover del tooltip usando una singola immagine di sfondo. I CSS3 possono generare tooltips e frecce arrotondati, ma questo richiede spesso più codice HTML di quello che possiamo modificare manualmente nel lettore audio. Questo testo è contenuto in una classe .mejs-time-galleggiante che usa display: nessuno per impostazione predefinita. Desideriamo solo mostrare il valore temporale quando ci si posiziona sopra la barra di scorrimento, in modo che possa aiutare gli utenti a decidere quanto lontano devono saltare.
Nel complesso questo plugin richiede un sacco di codice per avere tutto a posto. Potrebbe benissimo prenderti più di un giorno per ottenere un prodotto finito. Tuttavia, sostengo anche che MediaElement.js è la soluzione più precisa per i moderni lettori audio / video HTML5. Se hai un bel design di mockup, può quasi certamente essere creato con abbastanza tempo e pazienza.
Demo dal vivo - Scarica il codice sorgente
Chiusura
Spero che questo tutorial possa gettare un po 'di luce sul processo di personalizzazione di un player audio HTML5. L'utilizzo di stili CSS3 comuni senza JS è una possibilità, ma ha un supporto molto scarso tra versioni precedenti di IE e browser simili non aggiornati. Sebbene JavaScript non sia sempre supportato da tutti i browser, MediaElement.js offre un semplice ritorno alla classica interfaccia del lettore HTML5.
Sentiti libero di scaricare una copia del mio codice sorgente del progetto e vedere quale tipo di design dell'interfaccia utente puoi creare!