Från Firefox 3.5, Chrome 3, Opera 10.5 och Safari 4 kan vi dra nytta av många av de nya HTML 5-funktionerna, inklusive inbyggt ljudsupport utan att behöva Flash. Som du hittar hittar vi bara den nya
Ljudelementet
Ljudelementet accepterar en handfull attribut, framför allt:
autospela : Omedelbart spelar filen när sidan laddas.
kontroller: Visar spelaren på sidan.
förladdning: Omedelbart börjar buffret filen. (värden = ingen, automatisk, metadata)
src: Vägen till filnamnet. Det är en bättre övning att ladda filen via barnets "source" -element istället.
Mozilla och Webkit följer inte helt helt enkelt när det gäller ljudformatet. Firefox vill se en .ogg-fil, medan Webkit-webbläsare fungerar bra med den vanliga .mp3-tillägget. Det innebär att du åtminstone för tillfället ska skapa två versioner av ljudet. Jag rekommenderar att du använder ett snabbt och enkelt onlineverktyg, kallat Media.io, för att konvertera din mp3 till ochg formatet.
När Safari laddar sidan, kommer den inte att känna igen det .ogg-formatet, och kommer att hoppa över det och gå vidare till mp3-versionen, följaktligen. Observera att IE, per vanligt, inte stöder detta, och Opera 10 och Lower kan bara fungera med .wav-filer.
Laddar ljud med jQuery
// Lite modifierad från videoversionen. $ (dokument) .ready (function () // Skapa ett ljudelement och ställ det till autoplay, // och visa spelaren när sidan laddas. var audio = $ ('', autoPlay:' autoplay ', kontroller:' controls '); // Ring vår addSource-funktion och skicka i ljudelementet // och sökvägen till ditt ljud. addSource (ljud, "audioFile.ogg"); addSource (ljud, 'audioFile.mp3'); // När en händelse är avfyrade ... $ ('a') klickar du på (funktion () // Lägg till ljud + källelementen på sidan. Audio.appendTo ('body'); // Fadeout ankerkoden för att hålla Användaren klickar på den igen. $ (this) .fadeOut ('slow'); return false;); // Lägger till ett källelement och lägger till det i ljudelementet, representerat // av elem. funktion addSource (elem, sökväg) $ ('') .attr (' src ', sökväg) .appendTo (elem); );
Observera att vi kan gå mycket, mycket längre med det här, bland annat hur man stoppar ljudet, byter volymen etc. Det här snabba tre minuters tipset är bara att hota din aptit. Om du vill dyka djupare, låt oss veta och jag planerar en hel trettio minuters handledning om ämnet!
Följ oss på Twitter, eller prenumerera på Nettuts + RSS-flödet för de bästa webbutvecklingsstudierna på webben.
Share
Accentsconagua
