Eine kurze Einführung in die Verwendung von Audio-Tags in HTML5_html5-Tutorial-Fähigkeiten

Auf HTML5-Standardwebseiten können wir das Audio-Tag verwenden, um unseren Anruf und die Wiedergabe von Sounds abzuschließen. Im Folgenden sind die drei am häufigsten verwendeten Grundformate aufgeführt, die HTML5 verwenden:

1. Minimaler Code

Code kopieren Der Code lautet wie folgt: &lt ;audio src="song.ogg" Controls="controls"> 2. Code mit Inkompatibilitätserinnerung

Kopieren Sie den Code Der Code lautet wie folgt: Ihr Browser unterstützt das Audio-Tag nicht. > Der Code lautet wie folgt:

Ihr Browser unterstützt das Audio-Tag nicht. Browser- und Audiokompatibilität

Nicht alle Browserhersteller sind sich über die Verwendung eines bestimmten Audiodateiformats einig. Bei Bildern werden Dateien im PNG-, JPEG- oder GIF-Format in jedem Browser auf Ihre Seite geladen. Bei Audiodateien ist dies leider nicht der Fall. Tabelle 1 zeigt die Audiodateiformate, die in Webseiten verwendet werden können, aber nicht alle Formate sind in allen Browsern verfügbar. Beispielsweise unterstützen die Browser Chrome, Internet Explorer 9 (IE9) und Safari keine WAV-Dateien, einen rückläufigen Standard, der ein unkomprimiertes Format verwendet.

HTML5-Browser- und Audioformatkompatibilität Da es nicht für jeden Browser ein gemeinsames Dateiformat gibt, bedeutet dies, dass mindestens 2/5 der Browser bestimmte Sounds nicht abspielen können. Dabei geht es nicht darum, dass Browser-Hersteller unnachgiebig sind und sich nicht auf einen einzigen Audiostandard einigen können, sondern vielmehr um ein rechtliches und finanzielles Problem, bei dem es um Patentrechte und Lizenzgebühren geht. Das OGG-Format, das nicht durch Softwarepatente eingeschränkt ist, soll dieses Problem endgültig lösen. Allerdings unterstützen zum Zeitpunkt des Schreibens weder Opera noch Safari OGG. Es sind mehr WAV- und MP3-Dateien verfügbar als Dateien im OGG-Format, daher haben die Browserhersteller dies zweifellos berücksichtigt. MP3 als De-facto-Standard ist eine großartige Lösung. Lösung: Verwenden Sie drei Dateitypen und das -Tag

Angesichts der aktuellen Situation könnte man meinen, dass es noch nicht die beste Zeit ist, Audio auf HTML5-Seiten zu verwenden. In mancher Hinsicht mag das stimmen, aber HTML5 bietet eine Lösung, die es Ihrem Lieblingsbrowser ermöglicht, ein kompatibles Format zu finden.

Bei Verwendung in Verbindung mit dem -Tag kann das -Tag innerhalb des -Tags verschachtelt werden. Nehmen wir an, Sie sind Wagner-Fan und möchten seine Oper „Ritt der Walküren“ auf einer HTML5-Seite hören. Zunächst müssen Sie Ihre Musik in drei Dateitypen herunterladen, nämlich OGG, MP3 und WAV. Platzieren Sie diese Musikdateien im selben Ordner wie die HTML5-Dateien. Fügen Sie dann jeden Dateinamen in ein separates -Tag ein, und alle Quell-Tags im Audiocontainer bestehen aus , wie unten gezeigt.

Code kopieren

Der Code lautet wie folgt:

&lt ;source src=“http://demo.mimvp.com/html5/take_you_fly.ogg“ /> Ganz gleich, welchen Browser Ihr Besucher verwendet, er wählt automatisch den ersten Dateityp aus, den er liest, und spielt den Ton für Sie ab. Browser-Audiosteuerelemente: Keine zwei sind genau gleich Sobald Sie sich entschieden haben, dass Sie Audio auf Ihrer Website bereitstellen möchten, stehen Sie vor einer interessanten Designauswahl. Jeder Browser hat ein unverwechselbares Aussehen, das den Anschein erweckt, als sei bewusst versucht worden, ihn von anderen abzuheben.

Alle Browser außer Chrome verfügen über Start-/Pause-Steuerelemente, einen Fortschrittsbalken, einen Schieberegler, Wiedergabesekunden, Lautstärke-/Stummschaltelemente und zeigen auch die Gesamtsekunden der Sounddatei an. Mithilfe des HTML5-Standards und der Browserunterstützung können Entwickler sicher sein, dass Benutzer ein ähnliches Erlebnis mit HTML5-Audio haben, da die Browsersteuerelemente ähnlich sind. Sie können Steuerelemente auch mit Plug-Ins wie Flash und Silverlight erstellen, die Erfahrung kann jedoch für verschiedene Benutzer unterschiedlich sein.

Einige Browser (wie IE9) verfügen sogar über eine eigene Soundsteuerungsleiste, die außerhalb des Browsers selbst ausgeführt wird. Wenn Benutzer eine Website mit Sound öffnen, können sie den Sound über die Windows-Taskleiste steuern und eine Vorschau des aktuell abgespielten Sounds anzeigen.

HTML-Code (Wiedergabesteuerung ausblenden)

Code kopieren Der Code lautet wie folgt: Codedemonstration (Wiedergabesteuerung ausblenden)

Code kopieren Der Code lautet wie folgt:

Eine kurze Einführung in die Verwendung von Audio-Tags in HTML5_html5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel