Vanaf Firefox 3.5, Chrome 3, Opera 10.5 en Safari 4 kunnen we profiteren van veel van de nieuwe HTML 5-functies, inclusief native audio-ondersteuning zonder Flash. Zoals je zult zien, maken we alleen het nieuwe
Het audio-element
Het audio-element accepteert een handvol attributen, met name:
automatisch afspelen : Speel het bestand onmiddellijk af wanneer de pagina wordt geladen.
controles: Geeft de speler op de pagina weer.
voorspanning: Begint meteen met het bufferen van het bestand. (waarden = geen, automatisch, metadata)
src: Het pad naar de bestandsnaam. Het is een betere gewoonte om het bestand in plaats daarvan te laden via het onderliggende "bron" -element.
Mozilla en Webkit komen nog niet helemaal goed met elkaar, als het gaat om het audioformaat. Firefox zal een .ogg-bestand willen zien, terwijl Webkit-browsers prima werken met de gemeenschappelijke extensie .mp3. Dit betekent dat je, althans voorlopig, twee versies van de audio moet maken. Ik raad u aan om een snelle en eenvoudige online tool, genaamd Media.io, te gebruiken om uw mp3 naar het ogg-formaat om te zetten.
Wanneer Safari de pagina laadt, herkent het dat .ogg-formaat niet, en zal het vervolgens overslaan en overeenkomstig doorgaan naar de mp3-versie. Houd er rekening mee dat IE, per gebruikelijk, dit niet ondersteunt, en Opera 10 en lager alleen kunnen werken met .wav-bestanden.
Audio laden met jQuery
// Licht gewijzigd van videoversie. $ (document) .ready (function () // Maak een audio-element, stel het in op automatisch afspelen, // en toon de speler wanneer de pagina wordt geladen. var audio = $ ('', autoPlay:' autoplay ', bepaalt:' controls '); // Bel onze addSource-functie en voer het audio-element // en het pad (en) in uw audio in. addSource (audio, 'audioFile.ogg'); addSource (audio, 'audioFile.mp3'); // Wanneer een evenement wordt geactiveerd ... $ ('a'). Klik (functie () // Voeg de audio + bronelementen toe aan de pagina. Audio.appendTo ('body'); // Fadeout de ankertag om te behouden de gebruiker kan er weer op klikken. $ (this) .fadeOut ('slow'); return false;); // Voegt een bronelement toe en voegt dit toe aan het audio-element, gerepresenteerd // door elem. functie addSource (elem, path) $ ('') .attr (' src ', pad) .appendTo (elem); );
Houd er rekening mee dat we hiermee nog veel verder kunnen gaan, inclusief het stoppen van de audio, het wijzigen van het volume, enz. Deze snelle tip van drie minuten is alleen maar om je eetlust op te wekken. Als u dieper wilt duiken, laat het ons weten en ik zal een volledige dertig minuten durende tutorial over het onderwerp plannen!
Volg ons op Twitter of abonneer je op de Nettuts + RSS Feed voor de beste tutorials voor webontwikkeling op internet.
Share
Accentsconagua
