Meister HTML5 Audio Markup
Einfach gesagt, gibt es zwei primäre Medienelemente für HTML5, von denen beide absurd einfach zu bedienen sind. Das Audioelement genannt wird, und das Videoelement gestattet. In HTML5, bestimmt der Browser, welche Spieler eingebaut sind und somit für den Einsatz zur Verfügung. Sie benötigen, um Ihre Nutzung von Audio und Video entsprechend zu planen.
Hier ist eine vereinfachte Version von dem, was Audio-Markup wie folgt aussieht:
hier ist die src Attribut verweist auf die Audiodatei, die Sie wieder gespielt zu haben möchten. Es gibt den Speicherort für das Audio-Objekt für die Wiedergabe. Der Standort muss eine gültige URI (Uniform Resource Identifier), die, wie eine URL identifiziert, wo der Browser für die Audio-Datei aussehen sollte.
Das SteuerungEintrag steht für eine Reihe von Steuer Attribute in Sie Audio-Wiedergabe und das Verhalten zu verwalten können, wie folgt (in alphabetischer Reihenfolge dargestellt):
automatisches Abspielen: Teilt dem Browser die Wiedergabe von Audio zu beginnen, sobald die Objektdatei geladen wird. Der einzige gültige Wert für das Attribut automatisches Abspielen, aber kein Wert ist streng in HTML5 erforderlich.
Steuerung: Teilt dem Browser ein On-Screen-Widget zu steuern, Audio-Wiedergabe (in der Regel mit Pause / Play-Tasten, einen Fortschrittsbalken, und Lautstärkeregler) angezeigt werden soll. Wie mit dem Auto, ist der einzige gültige Wert für das Attribut Steuerung, aber kein Wert ist streng in HTML5 erforderlich.
Schleife: Weist den Browser an den Anfang zurück zu gehen und weiter spielen, wenn es um das Ende der Objektdatei bekommt. Auch hier ist der einzige gültige Wert für das Attribut Schleife, und kein Wert unbedingt erforderlich.
Vorspannung: Teilt dem Browser, ob es sollte die Objektdatei vorzuladen, und wenn ja, wie sie vorgespannt werden soll. Mögliche Werte sind
keiner: Gibt es einen Teil der Audiodatei nicht geladen werden, wenn die Seite geladen wird
Metadatennur die Audio-Metadaten geladen wird, wenn die Seite geladen wird. Es legt auch die Wiedergabe, aber nicht über Daten noch geladen.
AutoLädt gesamte Audiodatei, wenn die Seite geladen wird:
Das Vorspannung Attribut wird ignoriert, wenn automatisches Abspielen ist anwesend.
Die Alternativen Abschnitt ist sehr interessant und sehr hilfreich bei älteren Browsern zu unterstützen. Besucher der Seite zu sehen, oder laufen, wird der Inhalt innerhalb der Tags nur dann, wenn ihr Browser nicht das Audioelement nicht unterstützt (weil ihre Browser-Tags ignoriert sie nicht erkennt), aber HTML5-versierte Browser sind intelligent genug, um eine solche alternative Richtungen zu überspringen.
Hier können Sie Plug-Ins für bestimmte Spieler und verschiedene Dateiformate aufrufen können, weil Sie wissen, dass nur Besucher, die nicht die eingebaute in HTML5-Audio-Wiedergabe-Funktionen begegnen diesen Markup verwenden können.
Das Beispiel hier nutzt, dass Sie zeigen, wie andere Dateiformate zu rufen, falls das ausgewählte Format nicht abgespielt werden kann. Wie gezeigt, ein Browser, der HTML5-Audio-Unterstützung fehlt würde das Wort anzeigen Alternativen auf dem Bildschirm!
Hier einige Markup, das nicht wiedergegeben werden .ogg Audio-Datei, bis der Benutzer löst die Play-Taste auf die Steuerelemente auf dem Bildschirm, mit kontinuierlichen Looping, solange die Seite Bildschirm bleibt. Es bietet auch WAV und MP3-Alternativen für ältere Browser:
In der Standardeinstellung, wenn Sie beinhalten nicht ein src Attribut in dem öffnenden Tag, wird das Ziel für das erste Element in einem Browser gespielt, die das HTML5-Element erkennt. Dieser Aufbau macht es einfach, Ihre Wiedergabe-Optionen in der Alternativen Abschnitt zu stapeln, mit dem man die meisten Sie beginnen, und so weiter.
Wenn die Spieler für die drei Formate, die nicht verfügbar sind, werden keine Geräusche überhaupt gespielt. Sobald der Browser einen Spieler findet die Art von Sound-Datei übereinstimmen (.ogg zuerst, .wav zweite, .mp3 dritte), verwendet der Browser die Spieler den Ton zu spielen, und dann geht der Browser den Rest des HTML-Dokuments verarbeitet werden, die folgt.
Diese Abbildung zeigt, was diese Seite in einer richtig konstruierten HTML-Datei mit einigen zusätzlichen Text und Informationen wie Bildschirm in Chrome aussieht.
