HTML5 har gjort många saker enklare i webbutveckling, varav en använder embedded audio. Idag ska vi arbeta genom processen att helt enkelt anpassa HTML5-ljudspelarelementet, vilket kan anpassa sig till äldre webbläsare med fallbacks. Det är en enkel metod som är lätt att bygga på och tweak.
Open Source-projektet MediaElement.js är väldigt populärt, och har till och med byggts in i kärnan i WordPress sedan version 3.6. Det låter dig bädda in något HTML5-ljud eller -video med ett inbyggt spelargränssnitt som dynamiskt kan anpassas till en Flash / Silverlight-spelare när det behövs. Jag var verkligen imponerad av att se alla funktioner och det verkar vara en av de mer avancerade lösningarna för hantering av äldre webbläsare. Vi kommer att använda det som utgångspunkt!
Live Demo - Hämta källkod
Komma igång
Strax kunde jag märka att MediaElement byggdes ovanpå jQuery. Det senaste biblioteket som skrivet denna kod är 1.10.2 och stöd för olika användargränssnitt kan förändras i framtida uppdateringar. Annat än det här skriptet behöver vi också en kopia av mediaelement-och-player.min.js som du kan ta tag i från den officiella hemsidan eller från GitHub-förvaret. De andra två filerna du ska kopiera till samma katalog är flashmediaelement.swf och silverlightmediaelement.xap.
Nu fungerar skriptet genom att ersätta ditt medelvärde tagg med några interna HTML byggda med hjälp av klassnamn. Omskrivning av dessa klasser bör ge mycket utrymme för detaljerad anpassning. Jag använder en ganska lång spår som heter Evidence Song som släpps under CC-tilldelning + dela lika.
Den ursprungliga designidén kom från denna handledning på DesignModo, som också använder albumkonstverk och förenklar volymen / tidspåren. Mitt mål är att i hög grad anpassa detta till en förenklad version där fokus ligger på ren användbarhet. Jag har uppdaterat många bilder med hjälp av saker från PixelsDaily som dessa metalliska reglage. Knappen Play / Pause och Mute / Unmute kommer också från denna PSD ljudspelare.
Att ha några grafik- eller freebie-PSD-arrangemang som organiseras före tid kommer att spara dig massor av problem när du försöker bygga spelaren i CSS. Men innan vi hoppa in i CSS-koden vill jag förklara hur vi initierar manuset.
Genomföra MediaElement.js
Initialiseringsmetoden heter mediaelementplayer () vilket kan ta ett antal olika alternativ. Kolla in dokumentationen för webbsidan för att lära dig mer om hur det fungerar.
Funktionslistan skapas ungefär som en uppsättning värden. PLAYPAUSE är en enda uppspelnings- och pausknapp, medan framsteg och volym representera scrubber spåren för varje egendom. Jag kan också definiera ljudelementets bredd / höjd som den ska göras med jQuery.
De sista tre parametrarna tvingar en inbyggd skärm på mobila plattformar med hjälp av iOS eller Android. Ibland kan du få ett enkelt ljud-gränssnitt för att fungera på mobil, men i det här fallet är det mycket lättare att stödja den inbyggda spelaren. Det största problemet är att hantera en mobilmottaglig layout som också passar ett användbart ljudgränssnitt.
Ljudspelarstilar
Nu kan vi hoppa in i CSS och se hur designen skapas. Grundkodsinställningen bygger på relativ eller absolut positionering för varje huvudobjekt. Vi kan ställa in fasta bredd / höjdvärden för att se till att allt ser lika ut i varje webbläsare. .ljudspelare kommer att vara behållarklassen som vi alltid kan använda som bas.
Den stora ljudspelarbehållaren kan vara utformad på något sätt med hjälp av repeterande texturer, bakgrundsgradienter, jämn CSS3-boxskuggor. Jag skapade också ett sample h2-element som rymmer bandnamnet och sångtiteln. Med jQuery kan vi till och med uppdatera det här textvärdet baserat på en förspelad spellista med musik.
Du märker ganska snabbt att varje ingång har en definierande klass som är mycket enkel att manipulera. Knappen Spela / paus skapas med en enda PNG-fil och bakgrundsuppdateringarna baserat på vilken knapp som ska visas. Dessa kan riktas mot .mejs-play-knappen och .mejs-paus-knappen, respektive.
Ikonen för ljudavstängning / avstängning är också mycket likadan som använder en annan PNG-sprite.Den största tiden sjunken kommer när du behöver studera var och en av dessa enskilda klasser och lära dig att skriva specifika CSS-väljare för dem. MediaElement är bra om att uppdatera gränssnittet för att inkludera många relaterade klasser för nästan alla användarinteraktioner.
Scrubber Bars
Det finns två unika skrubber relaterade till ljudvolymen och tiden söker på spåret. Jag har hållit till gradienter eller plana bakgrundsfärger, men du kan istället försöka använda en upprepande bakgrundsbild för att se hur det ser ut.
För varje skrubberbar finner du att det finns olika delar som måste utformas separat. Varje stapel har en full-view-klass som representerar värdet 100%. För volymen är detta märkt .mejs-horisontell-volym-totalt och det är tänkt att blanda sig snyggt i layouten. Liknande .mejs-horisontell-volym-ström representerar ribban som visar aktuell volymnivå. Så om det är inställt på 50% fylls endast hälften av den totala stapeln med dessa CSS-egenskaper. Jag gillar hur den avrundade gränsen ser ut på varje skrubbspår och det är så mycket lättare med hjälp av CSS3 egenskaper.
Lastskenan har en extra funktion med klassen .mejs-tid-loaded. Detta representerar hur mycket av ljudfilen som har laddats in via streaming nedladdningar. Denna effekt ses vanligen i videospelare som med YouTube. Men ljudspår kan fortfarande ha samma effekt - dessa filer är bara mindre och tar inte så lång tid att slutföra nedladdningen.
Jag bör notera att användningen av någon version av jQuery 1.8+ inte alltid ger den totala scrubberbarbredden. Av någon anledning ökar det aldrig om vi inte inkluderar mer specifika föräldrakurser eller använder !Viktig nyckelord. Liknande buggar kan visas i framtida utgåvor, så var noga med att dubbelkontrollera allt.
Extra UI-funktioner
De två sista CSS-sektionerna fokuserar på metallreglagen och det tidsbaserade verktygstipset. Jag hittade denna effekt mycket inspirerande på DesignModo-spelaren och jag ville behålla det som en uppvisning av vad som är möjligt inom användargränssnittet.
Inte för mycket värt att förklara här, annat än de perfekt utrustade bakgrundsbilderna med absolut positionering. Det är en bra idé att hålla allt inom justering såvida inte ditt mål är att bygga en ljudvågrad ljudbredds spelare. Saker blir definitivt lite knepigare, men det ska vara uppenbart att allt är möjligt med tillräckligt arbete.
Efter det äldre exemplet höll jag den här verktygetipphöjningseffekten med en enda bakgrundsbild. CSS3 kan generera unika rundade verktygstips och pilar, men det kräver ofta mer HTML än vi kan manuellt redigera i ljudspelaren. Denna text hålls inne i en klass .mejs-tid-float vilken använder display: none som standard. Vi vill bara visa tidvärdet när vi svävar ovanpå scrubberfältet, så det kan hjälpa användarna att bestämma hur långt de behöver hoppa över.
Sammantaget kräver detta plugin mycket kod för att få allt att se bra ut. Det kan mycket väl ta dig mer än en dag för att uppnå en färdig produkt. Men jag skulle också hävda att MediaElement.js är den mest exakta lösningen för moderna HTML5 ljud / videospelare. Om du har en vacker mockupdesign kan det nästan säkert skapas med tillräckligt med tid och tålamod.
Live Demo - Hämta källkod
Stängning
Jag hoppas att denna handledning kan kasta lite ljus på processen att anpassa en HTML5-ljudspelare. Att använda vanliga CSS3-format utan någon JS är en möjlighet, men det har mycket dåligt stöd bland äldre versioner av IE och liknande utrustade webbläsare. Även om JavaScript inte alltid stöds av varje webbläsare, ger MediaElement.js en enkel återgång till det klassiska HTML5-spelargränssnittet.
Du kan ladda ner en kopia av min källkod för projekt och se vilken typ av användargränssnitt som du kan bygga!