Fra Firefox 3.5, Chrome 3, Opera 10.5 og Safari 4, kan vi dra nytte av mange av de nye HTML 5-funksjonene, inkludert innfødt lydsupport uten behov for Flash. Som du finner, kan vi bare opprette den nye
Lydelementet
Lydelementet aksepterer en håndfull attributter, spesielt:
Auto spill : Spiller umiddelbart filen når siden laster.
src: Stien til filnavnet. Det er en bedre praksis å laste filen via barnets "kilde" -element i stedet.
Mozilla og Webkit følger ikke helt med ennå, når det gjelder lydformat. Firefox vil se en .ogg-fil, mens Webkit-nettlesere vil fungere fint med den vanlige .mp3-utvidelsen. Dette betyr at i hvert fall for øyeblikket bør du opprette to versjoner av lyden. Jeg anbefaler at du bruker et raskt og enkelt onlineverktøy, kalt Media.io, for å konvertere mp3 til OGG format.
Når Safari laster siden, vil den ikke gjenkjenne det .ogg-formatet, og vil hoppe over det og gå videre til mp3-versjonen, tilsvarende. Vær oppmerksom på at IE, per vanlig, ikke støtter dette, og Opera 10 og Lower kan bare fungere med .wav-filer.
Laster inn lyd med jQuery
// Litt endret fra video versjon. $ (dokument) .ready (funksjon () // Opprett et lydelement, og sett det til autoplay, // og vis spilleren når siden laster. var audio = $ ('', autoPlay:' autoplay ', kontroller:' controls '); // Ring til addSource-funksjonen, og send inn lydelementet // og banen (e) til lyden din. addSource (lyd, 'audioFile.ogg'); addSource (lyd, 'audioFile.mp3'); // Når noen begivenhet er sparket ... $ ('a'). Klikk (funksjon () // Legg til lyd + kildeelementene på siden. Audio.appendTo ('body'); // Fadeout ankermerket for å beholde Brukeren klikker den igjen. $ (dette) .fadeOut ('slow'); return false;); // Legger til et kildeelement, og legger det til lydelementet, representert // av elem. funksjon addSource (elem, bane) $ ('') .attr (' src ', sti) .appendTo (elem); );
Vær oppmerksom på at vi kan gå mye, mye lenger med dette, inkludert hvordan du stopper lyden, endrer volumet etc. Dette raske tre minutters tipset er bare for å appetitten. Hvis du ønsker å dykke dypere, gi oss beskjed, og jeg planlegger en hel tretti minutters opplæring om emnet!
Følg oss på Twitter, eller abonner på Nettuts + RSS-feed for de beste webutviklingsopplæringene på nettet.
Share
Accentsconagua
