Master HTML5 Audio Markup - dummies

Eenvoudig gesteld, er zijn twee primaire media-elementen voor HTML5, die beide absurd eenvoudig te gebruiken zijn. Het audio-element heeft een naam en het video-element heeft een naam. In HTML5 bepaalt de browser welke spelers ingebouwd zijn en dus beschikbaar voor gebruik. U moet uw gebruik van audio en video dienovereenkomstig plannen.

Hier is een vereenvoudigde versie van hoe audio-opmaak eruitziet:

De invoer voor besturing staat voor een aantal besturingsattributen die u kunt gebruiken om het afspelen en gedrag van audio te beheren, als volgt (gepresenteerd in alfabetische volgorde):

Automatisch afspelen: vertelt de browser om te beginnen met spelen audio zodra het objectbestand is geladen. De enige juridische waarde voor dit kenmerk is automatisch afspelen, maar HTML5 heeft geen enkele waarde nodig.

• besturingselementen: laat de browser een schermwidget weergeven om het afspelen van audio te regelen (meestal met knoppen voor pauzeren / afspelen, een voortgangsbalk en volumeregelingen). Net als bij autoplay is de enige wettelijke waarde voor dit kenmerk besturingselementen, maar geen waarde is strikt vereist in HTML5.

• lus: Laat de browser weten dat hij terug moet naar het begin en blijft spelen wanneer hij het einde van het objectbestand bereikt. Ook hier is de enige wettelijke waarde voor dit kenmerk lus, en is geen enkele waarde strikt vereist.

• preload: vertelt de browser of het objectbestand vooraf moet worden geladen en, zo ja, hoe het vooraf moet worden geladen. Mogelijke waarden zijn

• geen: laadt geen enkel deel van het audiobestand wanneer de pagina

  • metadata: laadt alleen de metadata van audio wanneer de pagina wordt geladen. Het stelt ook het afspelen in maar heeft nog geen data geladen.

  • auto: laadt het volledige audiobestand wanneer de pagina wordt geladen

  • Het voorlaadattribuut wordt genegeerd als automatisch afspelen aanwezig is.

  De sectie Alternatieven is erg interessant en heel nuttig bij het ondersteunen van oudere browsers. Pagina-bezoekers kunnen de inhoud in de tags alleen zien of uitvoeren als hun browser het audio-element niet ondersteunt (omdat hun browser tags negeert die ze niet herkennen), maar HTML5-slimme browsers zijn slim genoeg om dergelijke alternatieve richtingen over te slaan.

Hier kunt u plug-ins voor specifieke spelers en verschillende bestandsindelingen gebruiken, omdat u weet dat alleen bezoekers die de ingebouwde HTML5-audioweergavemogelijkheden niet kunnen gebruiken, deze markup tegenkomen.

Het voorbeeld hier profiteert van dat om u te laten zien hoe u andere bestandsindelingen kunt aanroepen voor het geval het door u gekozen formaat niet kan worden afgespeeld. Zoals te zien is, zal een browser die geen HTML5-audio-ondersteuning heeft, het woord

Alternatieven op het scherm weergeven! Hier is een aantal markeringen die geen een kunnen afspelen. ogg-audiobestand totdat de gebruiker de knop Afspelen activeert op de bedieningselementen op het scherm, met continue lus zolang de pagina op het scherm blijft. Het biedt ook WAV- en MP3-alternatieven voor oudere browsers:

Browser ondersteunt geen HTML5-audio; afwisselend afspelen meegeleverd.

Als u standaard geen src-kenmerk opneemt in de openingstag, wordt het doel voor het eerste element afgespeeld in een browser die het HTML5-element herkent. Met deze opstelling kun je gemakkelijk je afspeelopties stapelen in het gedeelte Alternatieven, beginnend met degene die je het meest wilt, enzovoort.

Als spelers voor de drie formaten niet beschikbaar zijn, worden helemaal geen geluiden gespeeld. Zodra de browser een speler vindt die overeenkomt met het type geluidsbestand (.ogg first,. Wav second., Mp3 third), gebruikt de browser de speler om het geluid af te spelen en vervolgens blijft de browser de rest van de HTML verwerken document dat volgt.

Deze afbeelding laat zien wat deze pagina in een goed geconstrueerd HTML-bestand met wat extra tekst en informatie in Chrome op het scherm ziet.