Aus Winfwiki

Fallstudienarbeit
Hochschule:	Hochschule für Oekonomie & Management
Standort:	Essen
Studiengang:	Bachelor Wirtschaftsinformatik
Veranstaltung:	Fallstudie / Wissenschaftliches Arbeiten
Betreuer:	Dipl-Inf._(FH)_Christian_Schäfer
Typ:	Fallstudienarbeit
Themengebiet:	HTML 5
Autor(en):	Sven Frimmersdorf, Dirk Kolb, Adam Lischka
Studienzeitmodell:	Abendstudium
Semesterbezeichnung:
Studiensemester:	4
Bearbeitungsstatus:	begutachtet
Prüfungstermin:
Abgabetermin:

Inhalt

Inhaltsverzeichnis 1 Abkürzungsverzeichnis 2 Abbildungsverzeichnis 3 Tabellenverzeichnis 4 Einleitung 5 Grundlagen HTML 5.1 HTML Allgemein 5.2 Entstehungsgeschichte 6 Grundlagen HTML 4 7 Audio in HTML 4 7.1 Integration von Audio 7.1.1 Allgemein 7.1.2 ActiveX 7.1.3 Brwoserspezifische Plugins 7.2 Tags und Attribute für Audioelemente 7.2.1 Allgemein 7.2.2 <embed> 7.2.3 <object> 7.3 Unterstützung von Codecs durch Browser 7.4 Bedienelemente zum Abspielen 7.5 Möglichkeit bei Nichtunterstützung 8 Grundlagen HTML 5 8.1 Entwicklung 8.2 Neuerungen 9 Audio in HTML 5 9.1 Integration von Audio 9.2 Attribute für Audioelemente 9.3 Bedienelemente zum Abspielen 9.3.1 Bedienelemente auf einem PC 9.3.2 Bedienelemente auf mobilen Endgeräten 9.4 Audio-Codecs 9.4.1 Die bekanntesten Audio-Codecs 9.4.2 Browserunterstützung der Codecs 9.5 HTML5 Audios in älteren Browsern 9.5.1 Flashplayer 9.5.2 Javascript Bibliothek 9.6 Eigene Steuerelemente mit Javascript 9.6.1 Beispiel für eigene Steuerelemente (HTML Quellcode) 9.6.2 Darstellung der Steuerelemente aus dem Beispiel 10 Fazit 11 Fußnoten 12 Literatur- und Quellenverzeichnis

1 Abkürzungsverzeichnis

Abkürzung	Bedeutung
HTML	Hypertext Markup Language
CERN	Genfer Forschungsinstitut für Teilchenphysik
HTTP	Hypertext Transfer Protocol
URI	Universal Ressource Identifier
W3C	World Wide Web Consortium
MIT	Massachusetts Institute of Technology
DARPA	Defense Advanced Research Projects Agency
CSAIL	MIT Computer Science and Artificial Intelligence Laboratory
ECRIM	European Research Consortium for Informatics and Mathematics
DTD	Document Type Definition
DOM	Document Object Model
AAC	Advanced Audio Coding
MPEG	Moving Picture Experts Group

2 Abbildungsverzeichnis

Nr.	Abbildung
1	Bestandteile eines HTML-Dokumentes
2	Tim Berners – Lee, W3C Direktor und Erfinder des World Wide Web
3	Zeitleiste World Wide Web Consortium
4	W3C Mitgliedschaftsverteilung nach Ländern
5	W3C Mitgliedschaftsverteilung nach Wirtschaftssektor
6	Darstellung <EMBED> IE8
7	Darstellung <EMBED> Opera 11.1
8	Darstellung <EMBED> FireFox 4.0b
9	Darstellung <EMBED> FireFox 3.09
10	Darstellung Textdokument mit <EMBED>
11	Darstellung <OBJECT>
12	Darstellung bei fehlendem Plugin
13	Firefox 3.6
14	Firefox 3.6
15	Opera 11.0
16	Opera 11.0
17	Internet Explorer 9.0
18	Internet Explorer 9.0
19	Goggle Chrome 8.0
20	Goggle Chrome 8.0
21	Safari 5
22	Safari 5
23	Safari auf iOS 4.2.1
24	Safari auf iOS 4.2.1
25	Steuerelemente mit Javascript

3 Tabellenverzeichnis

Nr.	Inhalt
1	Versionsübersicht HTML
2	Attribute des Tags <embed>
3	<audio> Element Attribute
4	<source> Element Attribute
5	Browserunterstützung von Audioformaten

4 Einleitung

Diese Fallstudie zum Thema "Analyse der Funktionen und Demonstration von HTML 5 im Hinblick auf Audio" ist im Rahmen des Studiums "Bachelor of Science" an der Hochschule für Ökonomie & Management am Standort Neuss entstanden.

Das Internet hat in den letzten Jahren immer mehr an Bedeutung zugenommen und nahezu den größten Teil aller Haushalte erreicht. Daher haben auch die Gestaltung von Internetseiten und die Implementierung von Multimediainhalten auf Internetseiten an Gewichtung zugelegt.

Internetseiten sind in der Auszeichnungssprache Hypertext Markup Language ( kurz: HTML ) implementiert. Aufgrund der raschen Entwicklung des Internets und den wachsenden Anforderungen musste sich auch HTML weiterentwickeln. Der aktuelle Standard, der aber noch nicht von allen Endgeräten unterstützt wird, ist die neue Version HTML 5.

Das Ziel dieser Fallstudie ist es einen Überblick über die Sprache HTML in den Versionen 4 und 5 zu geben. Der Schwerpunkt liegt dabei auf dem Bereich der Audio – Anwendungen.

Die Fallstudie gliedert sich im Wesentlichen in drei Teile auf. Zu Beginn der Fallstudie werden die Grundlagen zu HTML erläutert. Danach folgt der eigentliche Hauptteil der Arbeit, in dem die Grundlagen zu HTML 4 und der Bereich der Audioanwendungen in HTML 4 erörtert werden. Im zweiten Abschnitt des Hauptteils werden die Grundlagen zu HTML 5 sowie der Bereich der Audioanwendungen in HTML 5 erörtert. Am Ende der Fallstudie wird noch ein Fazit aufgestellt.

5 Grundlagen HTML

5.1 HTML Allgemein

Um Informationen mittels Computer global zu verteilen, benötigt man eine universell verständliche Sprache, die möglichst alle Computer verstehen können. Die vom World Wide Web verwendete Auszeichnungssprache ist HTML. Die Hypertext Markup Language ( kurz: HTML ) bezeichnet eine textbasierte Auszeichnungssprache zur Strukturierung von Webseiten und ist somit die Grundlage aller im Internet erreichbaren Webseiten. Sie stellt den Autoren von Internetseiten die nötigen mittel zur Verfügung um

• Dokumente mit Überschriften, Texten, Tabellen, Listen und Fotos zu veröffentlichen
• Online – Informationen via Hypertext – Links auf Knopfdruck abzurufen
• Formulare für Transaktionen mit entfernten Diensten zu gestalten
• Spreadsheets, Videos, Musik und andere Applikationen direkt in die Dokumente zu integrieren.^[1]

Diese HTML – Dokumente sind die Grundlage des World Wide Web und werden von einem Browser ( beispielsweise Microsoft Internet Explorer ) dargestellt. Neben den vom Browser dargestellten Inhalten des HTML – Dokumentes enthält dieses zusätzliche Metainformationen. Diese können zum Beispiel über die im Text verwendete Sprache oder den Autor Auskunft geben.

Es handelt sich bei HTML um ein sogenanntes Klartextformat, was bedeutet, das HTML – Dateien mit jedem beliebigen Texteditor ( z.B. Notepad, Ultra Editor ) erstellt und bearbeitet werden können. HTML hat die Aufgabe, die logischen Bestandteile eines textorientierten Dokuments zu beschreiben und bietet daher die Möglichkeit an, typische Elemente eines textorientierten Dokuments, wie Überschriften, Textabsätze, Listen, Tabellen oder Grafikreferenzen, als solche auszuzeichnen. Darüber hinaus bietet HTML die Möglichkeit Verweise, sogenannte Hyperlinks, zu definieren, die zu anderen Stellen im eigenen Projekt führen können. Das Auszeichnungsschema von HTML geht von einer hierarchischen Gliederung innerhalb des Dokumentes aus.^[2]

Das Grundgerüst einer HTML – Datei besteht grundsätzlich aus folgenden Bestandteilen:

• Dokumenttyp – Deklaration ( Angabe zur verwendeten HTML – Version )
• Dem HTML – Kopf ( Head ), der hauptsächlich technische oder dokumentarische Informationen enthält, die üblicherweise nicht im Anzeigebereich des Browsers dargestellt werden
• Dem HTML – Körper ( Body ), der jene Informationen enthält, die gewöhnlicherweise im Anzeigebereich des Browsers zu sehen sind^[3]

5.2 Entstehungsgeschichte

Im Jahre 1989 hat Tim Berners – Lee, zu jener Zeit als Informatiker am Genfer Forschungsinstitut für Teilchenphysik ( kurz: CERN ) beschäftigt, das World Wide Web erfunden. Er war es, der den Ausdruck “World Wide Web“ geprägt hat und sowohl den ersten World Wide Web – Server namens “httpd“ sowie 1990 das erste Client – Programm “World Wide Web“, einen Browser und Editor, programmiert hat.^[4]

Er hat zu dieser Zeit die erste Version der Hypertext Markup Language ( kurz: HTML ) mit einem seiner Kollegen zusammen geschrieben. Dabei verfolgten sie das Ziel, den Nutzen und die Verbreitung des bereits bestehenden Internets zu forcieren. Zu seinem Gesamtkonzept gehörten die folgenden drei Säulen:

• Die Spezifikation für die Kommunikation zwischen Web – Clients und Web Servern, das so genannte Hypertext Transfer Protocol ( kurz: HTTP – Protocol )
• Die Spezifikation für die Adressierung beliebiger Dateien und Datenquellen im Web und im übrigen Internet, das Schema der sogenannten Universal Ressource Identifier ( kurz: URI )
• Die Spezifikation einer Auszeichnungssprache für Web – Dokumente, die sogenannte Hypertext Markup Language ( kurz: HTML )

Zunächst entwickelte sich das Web nicht unbedingt von alleine und Tim Berners – Lee und seine Mitarbeiter waren unermüdlich bei der Arbeit, das Web bekannt zu machen und zu etablieren.^[6]

Aufgrund des Booms, den das Web erlebt hat und die Tatsache das es mittlerweile nun viele Unternehmen gibt, die ebenfalls Software bzw. Internetbrowser entwickelt und vertreiben, musste sichergestellt werden, dass sich das Internet und die dazugehörigen Protokolle, sowie die Auszeichnungssprache HTML an gewisse Standards und Richtlinien halten. Die für die Weiterentwicklung und Standardisierung der Auszeichnungssprache HTML zuständige Organisation ist das World Wide Web Consortium ( kurz: W3C ).

Das Word Wide Web Consortium wurde im Oktober 1994 von Tim Berners – Lee am Massachusetts Institute of Technology ( kurz: MIT ) in Zusammenarbeit mit der europäischen Organisation für Kernforschung ( kurz: CERN ) und unter Mithilfe der Defense Advanced Research Projects Agency ( kurz: DARPA ) und der Europäischen Kommission gegründet.^[7]

Das World Wide Web Consortium wird von Tim – Lee und Dr. Jeffrey Jaffe geleitet. Es handelt sich hierbei um ein internationales Konsortium, in welchem Mitgliedsorganisationen, ein festangestelltes Team an Spezialisten und die Öffentlichkeit gemeinsam daran arbeiten, Web – Standards zu entwickeln. Ziel des World Wide Web Consortium ist es, mittels der Entwicklung von Protokollen und Richtlinien, dem Internet dadurch seine vollen Möglichkeiten zu erschließen, die ein langfristiges Wachstum des Internets sichern.

Das World Wide Web Consortium verfolgt seine Ziele mittels der Entwicklung von Web – Standards und Richtlinien. Darüber hinaus kümmert es sich auch um die Ausbildung und Verbreitung der Standards, entwickelt Software und dient als öffentliches Diskussionsforum über das Internet. Damit das Internet sein volles Potenzial erreichen kann, müssen die grundsätzlichen Technologien untereinander kompatibel sein und mit jeder beliebigen Hard – und Software funktionieren. Dieses Ziel wird vom World Wide Web Consortium als “Web - Interoperabilität“ bezeichnet. Durch das Veröffentlichen von offen, für jeden zugänglichen, Standards für Web – Sprachen und – Protokolle wird versucht das Fragmentieren des Internets zu vermeiden.

Das World Wide Web Consortium setzt sich aus vielen Organisationen aus aller Welt und verschiedenen Arbeitsgebieten zusammen. Die Mitglieder des World Wide Web Consortiums, sowie die Mitarbeiter und Experten arbeiten gemeinsam daran, Technologien und Standards zu entwickeln, die das Fortbestehen des Internets sicherstellen und dabei die wachsende Vielfalt von Menschen, Hard – und Software in Einklang bringt. Seine Arbeiten werden aus einer Kombination von Mitgliedsbeiträgen, Forschungsmitteln und andern Quellen öffentlicher und privater Finanzierer getragen. Gesteuert werden die Arbeiten gemeinschaftlich vom MIT Computer Science and Artificial Intelligence Laboratory ( kurz: CSAIL ), dem European Research Consortium for Informatics and Mathematics ( kurz: ECRIM ) und der Keio University. Daneben unterhält das World Wide Web Consortium 14 World Offices weltweit. Diese Offices arbeiten daran, die Standards und Technologien in den jeweiligen Landessprachen zu verbreiten und die geographische Basis des World Wide Web Consortiums zu erweitern und internationale Beteiligen an den World Wide Web Consortium – Aktivitäten zu fördern.^[9] Das World Wide Web Consortium hat über 350 Mitgliedsorganisationen aus insgesamt 28 Ländern überall auf der Welt, die aus einer Vielzahl Wirtschaftssektoren stammen.^[10]

Seit ihrem Bestehen hat das World Wide Web Consortium etliche Standards, Richtlinien und Recommendations sowie eine Reihe neuer Versionen von HTML veröffentlicht, in denen immer wieder neue Verbesserungen und Erweiterungen eingeflossen sind:

HTML – Version	Erscheinungsdatum	Erläuterungen
HTML ( ohne Versionsnummer )	November 1992	Urversion von HTML, orientiert sich nur an Text
HTML ( ohne Versionsnummer	April 1993	Zu dem Text kommen Attribute wie fette oder kursive Darstellung sowie die Bildintegration
HTML+	November 1993	Geplante Erweiterungen die in spätere Versionen einflossen, aber nie als HTML+ verabschiedet wurden
HTML 2.0	November 1995	Einführung von Formularen
HTML 3.0		Die Version erscheint nicht, weil sie mit der Einführung des Netscape-Browsers in der Version 3 bereits vor der Veröffentlichung veraltet ist
HTML 3.2	Januar 1997	Einführung von Tabellen, Befehle für physischen Textauszeichnung, Applets
HTML 4.0	Dezember 1997	Einführung von Stylesheets, Skripten und Frames, Trennung in Strict, Frameset und Transitional
HTML 4.01	Dezember 1999	Ersetzt HTML 4.0 mit vielen kleineren Korrekturen
HTML 5	April 2009	Einführung eines neuen Vokabular, Überarbeitung und Erweiterung der zu HTML gehörenden DOM – Spezifikation, Neue Elemente, Attribute, etc.

Tabelle 1: Versionsübersicht HTML

6 Grundlagen HTML 4

HTML 4 ist im Dezember 1999 vom World Wide Web Consortium veröffentlicht worden. Zu den wesentlichen Neuerungen bzw. Erweiterungen gegenüber der Vorgängerversion zählen die Einführung von Stylesheets, Skripten und Frames, sowie dir Trennung in die Varianten Strict, Frameset und Transitional.^[13]

• Stylesheets

Im Laufe der Jahre ist HTML um Elemente erweitert worden, die sich mit der Gestaltung des Dokumentes befassen, was der ursprünglichen Idee der Systemunabhängigkeit entgegenlief. Eine Rückbesinnung auf die Trennung von Struktur und Layout wurde durch die Definition von Cascading Stylesheets erreicht. Stylesheets sind eine unmittelbare Ergänzung zur Hypertext Markup Language. Es besteht nun die Möglichkeit jegliche HTML – Elemente, egal ob Textabsätze, Listen, Formulare, Print – Layouts, Elemente zur akustischen Wiedergabe etc., einzeln bezüglich des Layouts zu formatieren.

Darüber hinaus besteht die Möglichkeit zentrale Formate in einer separaten Datei zu definieren. So ist es beispielsweise möglich zentrale Definitionen zum Aussehen von Elementen einmalig zu speichern und in vielen HTML – Seiten parallel einzubinden. Alle Elemente der entsprechenden HTML – Seiten erhalten dann die Eigenschaften, die im Stylesheet abgelegt sind. Mit Hilfe der Stylesheets spart man Kodierarbeit und die HTML – Dateien werden entsprechend kleiner.^[14]

• Skripte

Durch den Einsatz des Scripting ist es den Erstellern von HTML – Dokumenten nun möglich, dynamische Webseiten zu gestalten und HTML als Werkzeug zu verwenden, um Internet – Applikationen zu erstellen. Dazu zählen unter anderem, das Erstellen “Intelligenter Formulare“, die beispielsweise während der Benutzereingabe bereits Plausibilitätsprüfungen durchführen, sowie das Erstellen von HTML – Dokumenten, die sich während der Anzeige im Browser dynamisch verändern. Die Mechanismen zum Einbinden von Skripten in HTML – Seiten sind unabhängig von der jeweilig eingesetzten Skriptsprache.^[15]

• Frames

Durch den Einsatz von Frames ist es den Erstellern von HTML – Dokumenten möglich, den Anzeigebereich des Browsers in verschiedene, frei definierbare Bereiche aufzuteilen. Dabei kann jeder einzelne Bereich eigene Inhalte enthalten. Die einzelnen Anzeigebereiche, die sogenannten Frames, können wahlweise einen statischen nicht wechselnden Inhalt oder einen dynamischen wechselnden Inhalt haben. Es ist auch möglich Verweise in einem Frame unterzubringen, die dann Dateien aufrufen können, die sich in einem anderen Frame befinden.

Frames zählen nicht zu den Elementen, mit deren Hilfe typische Aufgaben der Textverarbeitung bewältigt werden können, sondern sie sind Elemente, welche die spezifischen Eigenschaften der Bildschirmanzeige konsequent nutzen. Sie bieten den Erstellern völlig neue Möglichkeiten, um Informationen in einem HTML – Dokument nichtlinear aufzubereiten. In jedem einzelnen Anzeigebereich stehen alle möglichen Anzeige – Features zur Verfügen. So ist es beispielsweise möglich in einem Bereich Textinformationen anzuzeigen, während in einem anderen Bereich gleichzeitig ein passendes Video abgespielt wird.

Frames gehören nicht zur HTML – Variante Strict, sondern zu einer eigenen Variante, dem Frameset.^[16]

Damit eine HTML – Datei gültig ist, muss sie vollständig den Regeln der HTML – DTD entsprechen. In diesen Regeln ist festgelegt, welche Elemente verwendet werden dürfen, wie diese Elemente verschachtelt sein dürfen, welche Attribute zu welchen Elementen erlaubt sind und welche Werte sie annehmen dürfen. In HTML 4 gibt es 3 HTML – DTD, sogenannte Varianten.

• Strict

Die Variante Strict ist die die am häufigsten verwendete und vom World Wider Web Consortium empfohlene und präferierte Variante. Diese DTD umfasst den Kernbestand an Elementen und Attributen und zeichnet sich dadurch aus, dass sie nur eine sehr schlanke HTML erlaubt. Die meisten Elemente und Attribute zur Formatierung und Visualisierung von Texten fehlen in dieser Variante. Die Ersteller von HTML - Dokumenten sollen stattdessen Stylesheets zur Formatierung verwenden. Darüber hinaus müssen alle Inhalte innerhalb von <body> und </body> in Blockelementen stehen.

• Transitional

Die Variante Transitional enthält noch Elemente und Attribute aus älteren HTML – Versionen. Sie ist ein Kompromiss des World Wide Web Consortiums angesichts Fehler, die in der Vergangenheit begangen worden sind und angesichts der hohen Verbreitung von Webseiten, die diese Elemente und Attribute noch verwenden. Diese Variante erlaubt die Verwendung von Elementen und Attributen, die als “deprecated“ gelten, und die in der Strict – Variante nicht mehr vorkommen. Bei dieser Variante ist es auch erlaubt, innerhalb von <body> und </body> einfach nur text oder Inline – Elemente zu notieren. Durch diese DTD wird sichergestellt, dass bestehende Webseiten auch durch aktuelle Browser angezeigt werden können, ohne dass die HTML – Dokumente angepasst werden müssen.

• Frameset

Die Variante Frameset ist identisch mit der Transitional – Variante. Der einzige Unterschied ist, dass die erforderliche Elementverschachtelung unterhalb des Wurzelementes eine andere ist. Anstelle des “body – Elementes“ ist in dieser Variante ein “frameset – Element“ für die Erstellung von Framesets notwendig.^[17]

7 Audio in HTML 4

7.1 Integration von Audio

7.1.1 Allgemein

Bei der Integration von Audio unter HTML 4 ist zu beachten, dass es vom Grundsatz her nicht vorgesehen ist, multimediale Inhalte einzubetten. HTML ist als reine Beschreibungssprache gedacht. Multimediale Inhalte können allerdings über Schnittstellen angebunden werden.

Diese Schnittstellen sind Browserabhängig und von Einem zum Anderen unterschiedlich. Für den Internet Explorer besteht die Möglichkeit Plugins auf Basis von ActiveX zu verwenden. Bei FireFox und Co gibt es die Möglichkeit Plugins einzubinden die Explizit für den Browser bzw. für die Browserversion erstellt wurden oder eine Native Unterstützung für die Anzeige und Wiedergabe von multimedialen Inhalte.

Neben der direkten Integration der Audioinhalte über ActiveX oder andere Plugins, besteht noch die Möglichkeit einen auf Flash oder Javascript basierenden Mediaplayer einzubinden, der zur Laufzeit aus dem Internet geladen wird. Der Vorteil daran ist, dass nahezu jeder ein Flash-Plugin auf dem Rechner installiert hat(mit Ausnahme des IPhones und des IPads) und somit den Player starten kann. Bei JavaScript muss überhaupt kein Plugin geladen werden. Solange in es in den Sicherheitseinstellungen erlaubt ist, sollte das Script funktionieren. Ein Beispiel dafür ist der Yahoo Mediaplayer.

7.1.2 ActiveX

Die ActiveX-Technologie ermöglicht, innerhalb einer Netzwerkumgebung, die Kommunikation und Kooperation von Softwarekomponenten. Darüber ist es z.B. möglich, den MediaPlayer oder QuickTime innerhalb des Internetexplorers zu verwenden. Der große Vorteil ist, dass die Sprache in der die Softwarekomponenten Entwickelt wurden nicht relevant ist. Ein weiterer Vorteil ist, dass ein Plugin auf ActiveX Basis einmal entwickelt wird und von jeder Software verwendet werden kann, die ActiveX unterstützt. Dadurch sind Komponenten auf Basis von ActiveX in unterschiedlichen Anwendungen Einsetzbar ohne dass Anpassungen vorgenommen werden müssen. In der Vergangenheit wurde in Verbindung mit ActiveX häufig auch von Sicherheitslücken gesprochen was zu einem recht weit verbreiteten, negativen Image geführt hat. Durch Schadhaften Code konnten die Grenzen des Browsers überschritten werden und der direkte Zugriff auf den Computer war möglich. Durch viele Sicherheitspatche und Verbesserungen wurde versucht dieses Problem in den Griff zu bekommen. Dieses Negativ Image hat dazu geführt, dass bis auf den InternetExplorer und Browsern die auf ihn aufbauen, kein anderer der verbreiteten Browser ActiveX unterstützt.

7.1.3 Brwoserspezifische Plugins

Plugins sind Erweiterungsprogramme, die explizit für ein Softwareprodukt erstellt werden und auch nur darin Lauffähig sind. Durch Plugins besteht die Möglichkeit den Funktionsumfang einer Anwendung stetig zu erweitern, wodurch sich sowohl für den Entwickler bzw. Produzenten als auch für den Benutzer weitreichende Chancen ergeben. Der Entwickler kann in kleinen Einzelprojekten die Anwendung Weiterentwickeln und die einzelnen Erweiterung nacheinander dem Benutzer zur Verfügung stellen. Weiterhin besteht die Möglichkeit, die Plugin-Spezifikation offen zu legen und es so anderen Entwickler zu ermöglichen Plugins für diese Software zu entwickeln. Der Benutzer hat ebenfalls Vorteile durch die Plugins. Er kann für sich entscheiden welche Plugins er nutzen möchte und damit eventuelle Lizenzkosten senken bzw. vermeiden

7.2 Tags und Attribute für Audioelemente

7.2.1 Allgemein

Im HTML 4 Standard an sich gibt es kein TAG was die Integration von Audio, Video oder sonstigen multimedialen Inhalten erlauben würde. Allerdings hat sich über die Jahre ein TAG durchgesetzt, dass zwar kein Bestandteil des HTML Standards ist aber von den gängigen Browsern akzeptiert wird und entsprechend interpretiert wird, das Tag <embed>.

Zusätzlich gibt es ein Tag, das wiederum Bestandteil des Standards ist, aber deutlich mehr kann als Multimedia. Das Tag <object> ist in der Lage mit vielen verschiedenen Datentypen umzugehen.

7.2.2 <embed>

In heutigen Browsern gibt es, obwohl es nicht zum HTML 4 Standard gehört, das Tag <embed>. Mit Hilfe dieses Tags ist es Möglich Erweiterungen aufzurufen die den gewünschten Multimediainhalt wiedergeben.

Ein Vorteil dieses Tags ist, dass hier der Programmierer der Webseite keine Rücksicht darauf nehmen muss ob per ActiveX auf die Erweiterung zugegriffen wird, oder ob es sich um eine Erweiterung in Form eines Plugins handelt. Die Erkennung und Verarbeitung wird individuell vom Browser erledigt.Die folgende Tabelle zeigt welche Attribute für diesen Tag vorhanden sind und was sie bedeuten:

SRC: URL zur Audiodatei WIDTH: Anzeigebreite des Plugins – eher interessant bei Videodateien. HEIGHT: die Anzeigehöhe des Plugins – eher interessant bei Videodateien. ALIGN: Textanordnung NAME: der Name des Objekts PLUGINSPAGE: URL des Plugins PLUGINURL: URL für die automatische Installation HIDDEN: Anzeigestatus des Objekts HREF: macht das Objekt zu einem Link TARGET: Wo soll der Link angezeigt werden

AUTOSTART: Automatischer Start des Inhalts LOOP: legt fest ob das Element in einer Schleife laufen soll PLAYCOUNT: legt fest wie oft es laufen soll VOLUME: Lautstärke CONTROLS: legt fest welche Steuerelemente angezeigt werden sollen CONTROLLER: legt fest ob überhaupt Steuerelemente angezeigt werden sollen MASTERSOUND: indicates the object in a sound group with the sound to use STARTTIME: legt fest an welcher Position das Abspielen beginnen soll ENDTIME: legt fest wann das Abspielen enden soll

Tabelle 2 Attribute des Tag <embed>^[18]

Das wichtigste Attribut ist „src“. Hiermit wird festgelegt welche Audiodatei abgespielt werden soll und wo diese sich befindet.

Dabei muss die Datei nicht zwangsläufig auf dem gleichen Webserver liegen wie die Webseite die sie aufruft. Sie kann auch über das Internet geladen werden, vorausgesetzt die Datei ist auch verfügbar.

Ein weiteres Attribut, welches man verwenden kann ist „type“.

Darüber ist es möglich den mime-type festzulegen und zu bestimmen über welches Plugin der Inhalt wiedergegeben werden soll.

Beispiel1:

<embed src="a.wav" autostart="true" hidden="false">

In diesem Beispiel ist nicht festgelegt mit welchem Plugin die mp3-Datei aufgerufen werden soll. Der Browser entscheidet hier mit welchem er die Datei lädt.

Beispiel2:

<embed TYPE="application/x-mplayer2" src="a.wav" autostart="true" hidden="false">

In diesem Beispiel wird dem Browser explizit mitgeteilt wie er die Wave-Datei öffnen soll.

Wie so häufig bei HTML ist die Darstellung und Ausführung je Browser unterschiedlich. Wenn man die beiden Beispiele in einer HTML-Datei im Browser öffnet erkennt man die Unterschiede sofort. Der InternetExplorer ignoriert die Type-Anweisung und startet die Audiodateien jeweils mit seinem bevorzugten Plugin. Der Opera führt konsequent den Quellcode aus, zeigt allerdings das QuickTime Plugin (Standard für Audio auf dem Testrechner) nicht an.

Die Soundausgabe ist von den unterschiedlichen Darstellungen nicht betroffen. In allen Versuchen wurden die Audio-Dateien doppelt ausgegeben.

7.2.3 <object>

Eine weitere Möglichkeit Multimedia-Dateien in Webseiten einzubinden ist das Tag <object>. Es ist aktueller als das oben beschriebene <embed> und bietet neben der Möglichkeit Audio-Dateien einzubinden und abzuspielen auch Funktionalitäten um z.B. mit Text- oder Flashdateien umzugehen.

Das Tag beinhaltet viele verschiedene Attribute. Wir werden uns im Rahmen der Seminararbeit nur auf die Konzentrieren die für das Verständnis wichtig sind und auf die, die mit der Einbindung von Audio-Dateien zu tun haben.

Die Grundsätzliche Verwendung kann man in folgendem Beispiel erkennen:

<object data="test.txt" type="text/plain" width="300" height="200" border="2">

Alternativtext

</object>

Hier ist zu erkennen, dass über das Attribut „data“ angegeben wird, was eingebunden werden soll. Das Attribut „type“ steht wiederum für den MIME-TYPE und hilft dem Browser schneller zu erkennen von welchem Typ das externe Objekt ist, damit er schneller und vor allem das richtige Plugin laden kann. Zwischen dem öffnenden und dem schließenden Tag kann und sollte ein Text eingegeben werden der Angezeigt wird, wenn kein Plugin zur Verfügung steht bzw. das Plugin aufgrund von Sicherheitseinstellungen nicht geladen werden kann.

Das oben gezeigte Beispiel wird wie folgt dargestellt:

Bei Audio-Dateien müssen mehr Attribute gesetzt werden um die Funktionalität zu gewährleisten.

<object id="MediaPlayer" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
type="application/x-oleobject" style="width:300px; height:200px">

<param name="src" value="a.mp3"/>

<param name="autostart" value="true"/>

<param name="controller" value="true"/>

<embed TYPE="application/x-mplayer2" src="a.mp3" autostart="true" hidden="false"/>

</object>

Durch die „classid“ wird festgelegt, dass ein ActiveX-Plugin geladen werden soll und bezeichnet es eindeutig. Über die Parameter wird festgelegt welche Datei geladen und ob sie automatisch abgespielt werden soll. Weiterhin kann eingestellt werden ob die Steuerelemente angezeigt werden sollen.

Das Tag <embed> ist für die Kompatibilität zu anderen Browsern notwendig. Wie im oberen Teil erwähnt unterstützen viele Browser kein ActiveX. Das würde dazu führen, dass im Browser beim Aufruf der HTML-Seite der Bereich mit der Audio-Datei nicht angezeigt würde.

7.3 Unterstützung von Codecs durch Browser

Die Unterstützung der Codecs durch den Browser ist bei HTML 4 zweitrangig. Hier ist nur wichtig welche Plugins der Browser installiert hat bzw. Welche ActiveX-Plugins auf dem Computer verfügbar sind.

7.4 Bedienelemente zum Abspielen

Bei den Bedienelementen ist es Ähnlich wie bei den Codecs.

Welche Elemente angezeigt werden können, wird dadurch bestimmt welche in dem jeweiligen Plugin zur Verfügen stehen. Der Entwickler kann aber teilweise entscheiden welche von den verfügbaren Elementen angezeigt werden.

7.5 Möglichkeit bei Nichtunterstützung

Der Browser versucht aufgrund der Dateiendung bzw. des MIME-TYPES oder durch die explizite Angabe des ActiveX-Plugins die Datei zu laden. Sollte kein Plugin zur Verfügung stehen bietet er noch die Möglichkeit das benötigte Plugin nachzuladen.

Sollte im Internet ein entsprechendes Plugin zur Verfügung stehen kann man es herunterladen und Installieren. Durch das Aktualisieren der Seite im Anschluss kann der Inhalt angezeigt werden.

8 Grundlagen HTML 5

8.1 Entwicklung

HTML5 ist die Weiterentwicklung von HTML 4.01. Allerdings wurde die Entwicklung nicht wie üblich durch die W3C voran getrieben, sondern durch eine neu gegründete Arbeitsgemeinschaft – die WHATWG ( Web Hypertext Application Technology Working Group. Diese wurde am 04. Juni 2004 gegründet und zeichnete fortan Verantwortlich für die Entwicklung von HTML5.Diese Arbeitsgemeinschaft bestand hauptsächlich aus den Browserherstellern Mozilla, Opera, Safari und und interessierten Begleitern. ^[19]

WebForms 2.0 die Weiterentwicklung von HTML-Formulare, WebApps 1.0 mit Fokus auf Webapplikationen sowie Web Controls mit dem Schwerpunkt der Widget standen als erste Punkte auf der Aufgabenliste. ^[20]

Ob HTML5 sich als Standard durchsetzt ist derzeit noch nicht klar. Das W3C hatte die Nachfolge von HTML 4.01 mit XHTML1 begonnen und versucht den Weg mit XHTML2 weiter zu gehen. ^[21]

Auf der Webseite des W3C kann allerdings die Entwicklung verfolgt werden. Neben der Aussage, dass HTML5 noch ein Entwurf ist, kann man dort die Unterschiede zu HTML 4 erfahren. ^[22]

8.2 Neuerungen

Auf der oben angesprochenen Webseite findet man die Information dass es sowohl neue Elemente geben wird bzw. schon gibt als auch dass Elemente wegfallen bzw. umbenannt oder verändert werden.

Es wird neben Änderungen in der Sprache auch Änderungen in der Sysntax geben. So wird zum Beispiel das Character Encoding in der Schreibweise gekürzt. In Zukunft soll es wie folgt geändert werden.

Alt:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Neu:

<meta charset="UTF-8">

Ausschlaggebend für diese Seminararbeit war auch die Einführung der Elemente <audio> und <video>, auf welche wir im weiteren Verlauf der Arbeit genauer eingehen werden.

Eine weitere Interessante Entwicklung ist, dass Elemente die in der Vergangenheit mit dem Status „deprecated“ versehen wurden in HTML5 wieder reaktiviert wurden und die Verwendung wieder dem aktuellen „Standard“ entspricht. ^[23]

9 Audio in HTML 5

Heutzutage spielt Multimedia eine immer wichtiger werdende Rolle im World Wide Web. Neben zahlreichen bekannten Videoportalen, wie YouTube, gibt es auch Audioportale, wie. Last.fm, wo Lieder einzeln oder im Radiostream angehört werden können. Mit Hilfe der Adobe Flash Technologie werden diese Multimediaportale betrieben. Jedoch erfordert diese Technologie die zusätzliche Installation von einem Flash Plugin für den jeweiligen Browser. Die Unterstützung von Flash deckt nicht alle Betriebssysteme und Geräte ab. ^[24]

Das HTML 5 macht es nun möglich, Audiodateien im Browser abzuspielen ohne zusätzliche Plugin Installationen. Dies erfordert allerdings die Nutzung der neusten Browser, die HTML 5 unterstützen. Auf die Browserunterstützung wird im Kapitel 9.4 näher eingegangen.

9.1 Integration von Audio

Für die Realisierung von Audioeinbindungen im Browser gibt es im HTML 5 das <audio> Element, welches sehr ähnliche Funktionen bietet wie das <video> Element. Dieses native Browserobjekt dient der Abspielung von Audiodateien oder Audiostreams ohne die nötige Hilfe von einer externen Software.

Der Browser erkennt an dem <audio> Tag, dass eine Audiodatei angezeigt werden soll und erstellt zum Abspielen eigene Bedienelemente (vgl. Abschnitt 9.3. Bedienelemente zum Abspielen). Das Design und die Darstellung der Standard-Bedienelemente ist den Browserherstellern selber überlassen. ^[25]

Das <audio> Tag kann auf zwei verschiedene Arten eingebunden werden.

Beispiel Nr. 1:

<audio src="audiodatei.ogg" controls autoplay>
     Ihr Browser unterstützt diese Audiowiedergabe nicht. 
</audio>

Beispiel Nr. 2:

<audio controls autoplay>
     <source src="audiodatei.ogg" type="audio/ogg" />
     <source src="audiodatei.m4a" type="audio/aac" />
     <source src="audiodatei.mp3" type="audio/mp3" />
     Ihr Browser unterstützt diese Audiowiedergabe nicht.
</audio>

Im ersten Beispiel wird die Audiodatei direkt im <audio> Tag platziert. Zwischen dem öffnenden und dem schließenden Tag werden Informationen für Browser angegeben, die das HTML 5 nicht unterstützen. Bei dieser Form der Audiowiedergabe ist die Gefahr sehr groß, dass das Audio nicht in jedem Browser wiedergegeben werden kann, da nur ein Audioformat zur Verfügung steht.

Das zweite Beispiel zeigt die Einbettung der Audiodatei zwischen die <audio> Tags im <source> Tag, dem sogenannten Kindelement. Mit dieser Art lässt sich die Unterstützungsproblematik von Audiocodecs umgehen (vgl. Abschnitt 9.4. Audio-Codecs). Es können mehrere Audioformate angegeben werden. Der Browser untersucht, welches Format er unterstützten kann und entscheidet sich für die jeweilige Wiedergabe.

9.2 Attribute für Audioelemente

Das <audio> Element gehört zu der Kategorie der Embedded Content. Das bedeutet, dass die Inhalte nicht direkt aus dem HTML kommen, sondern Fremdinhalte beinhalten. Für den Fall, dass ein Browser diesen Inhalt nicht anzeigen kann, da er das <audio> Element nicht unterstützt, kann ein Fallback angegeben werden. ^[26]

Ein Fallback ist eine Ausweichlösung für solche Browser und wird zwischen dem öffnenden und dem schließenden <audio> Tag eingebaut. Wie in den beiden Beispielen aus dem Abschnitt 9.1. wurde folgender Text verwendet: „Ihr Browser unterstützt diese Audiowiedergabe nicht.“

Folgende Attribute werden für das <audio> Element in der Tabelle näher betrachtet und beschrieben.

Attribut	Wert	Beschreibung
src	URL	Hier wird der Pfad zu der Audio Datei angegeben. Werden keine <source> Elemente verwendet, muss hier der Pfad unbedingt angegeben werden, damit der Browser etwas Wiedergeben kann. Da nur eine Pfadangabe in dem <audio> Element möglich ist, muss ein Audioformat ausgewählt werden, welchen möglichst viele Browser unterstützen.
controls	Boolscher Wert	Das „controls“ Attribut steuert die Anzeige der Bedien- bzw. Steuerelemente für das Audio. Wird das Attribut „controls“ gesetzt, dann werden die Browserspezifischen Steuerelemente angezeigt. Jedem Browserhersteller ist es überlassen das Design selber zu gestalten. Die HTML 5 Spezifikation hat für das Design keine Vorgaben gemacht, nur die Funktionen festgelegt. (vgl. Abschnitt 9.3. Bedienelemente zum Abspielen). Beim weglassen des Attributes werden die Steuerelemente nicht angezeigt. Damit ist es möglich eine Audiodatei im Hintergrund abspielen zu lassen, ohne dass der Benutzer dies steuern kann. Ein weiter Grund für das Weglassen der browserspezifischen Steuerelemente ist, dass mit Hilfe der Javascript-API eigene Bedienelemente gebaut werden können. (Vgl. Abschnitt 9.6. Eigene Steuerelemente mit Javascript)
preload	autometadatanone	Das „preload“ Attribut unterscheidet zwischen drei möglichen Werten. Wird kein Wert gesetzt, dann wird automatisch der Wert „auto“ vom Browser genommen. Beim Wert „auto“ wird das Audio vollständig geladen, bevor der Benutzer es eingeschaltet hat. Dies ist sinnvoll bei kleinen Audiodateien, die beim Laden der Seite mitgeladen werden können. Der Benutzer kann sich das Audio sofort ohne Ladezeiten anhören. Der Wert „none“ wiederrum verhindert das automatische Laden der Audiodatei durch den Browser. Es dient dem Schutz der Benutzer vor zu hoher Verschwendung der Bandbreite, da beim Laden der Seite nicht klar ist, ob der Benutzer das jeweilige Audio anhören möchte. Sollten aber nur die Meta-Informationen der Audiodatei geladen werden, dann ist der Wert „metadata“ zu setzen. Dabei werden nur die Informationen zur Audiodauer, zum Autor oder zum Copyright geladen.
autoplay	Boolscher Wert	Mit dem „autoplay“ Attribut wird das automatische Abspielen des Audios angegeben. Beim aktivierten „autoplay“ Attribut wird das „preload“ Attribut ignoriert. Das Audio wird sofort gestartet, sobald der Browser genug Daten zum Abspielen heruntergeladen hat. Beim weglassen des Attributes wird das Audio nicht automatisch gestartet.
loop	Boolscher Wert	Für eine automatische Wiederholung des Audios ist das Attribut „loop“ zuständig. Wenn das Attribut angegeben wird, dann läuft das Audio in einer Endlosschleife, bis der Benutzer die Audiowiedergabe beendet.

Tabelle 3: <audio> Element Attribute^[27]

Folgende Attribute werden in dem <source> Element angegeben.

Attribut	Wert	Beschreibung
src	URL	Wie auch im <audio> Element wird hier der Pfad zur Audiodatei angegeben. Wird im <audio> Element kein „src“ Attribut gesetzt, dann werden automatischen die <source> Elemente nach einer Pfadangabe durchsucht und verwendet.
media	Medientyp (screen, print, handheld, projection)	Für die Unterscheidung des Ausgabemediums werden in dem Attribut „media“ die Medientypen angegeben. Damit kann die Auswahl des Ausgabeformates spezifiziert werden. screen: Ausgabe auf einem Monitor print: Ausgabe in der Vorschau handheld: Ausgabe auf mobilen Endgeräten projection: Ausgabe über Projektoren all: Alle Ausgabemediums
type	mime-type	Als ein weiteres Entscheidungskriterium für die Ausgabe eines Audios ist das „type“ Attribut. Mit diesem Attribut ist es möglich ein Audio in jeweils mehreren unterschiedlichen Formaten anzugeben. Damit kann der Browser eigenständig entscheiden, welches Format er unterstützen kann und das jeweilige Audio wiederzugeben. Die mime-type Angabe für Audiodateien beginnen alle mit „audio/“. Für Video jeweils mit einem „video/“. Folgende typische Types werden in HTML5 verwendet: type=’audio/aac’ type=’audio/mp3’ type=‘audio/ogg‘ Beim OGG-Format können die jeweiligen Codecs mit angegeben werden type='audio/ogg; codecs=vorbis' type='audio/ogg; codecs=speex' type='audio/ogg; codecs=flac'

Tabelle 4: <source> Element Attribute ^[28]

9.3 Bedienelemente zum Abspielen

Die Bedienelemente in HTML5 sind Browserabhängig. Jeder Browserhersteller darf über das Design und über die Steuerungselemente selber entscheiden. Daher unterscheiden sich die Bedienelemente in der Optik und in dem Funktionsumfang. Da das <audio> Element in HTML5 ein natives Element ist, hat man keinen Einfluss auf die Ausgabe. Die einzige Möglichkeit ein einheitliches Design zu bekommen, ist die Browserbedienelemente zu deaktivieren und über die Javascript-API selber zu erstellen. (vgl. Abschnitt 9.6. Eigene Steuerelemente mit Javascript).

Die HTML5 Spezifikation schlägt den Browserherstellern lediglich mehrere Elemente vor. Dazu gehört die Wiedergabe einer Audiodatei, das Pausieren, die Lautstärkeregelung, die Möglichkeit vor und zurück zu springen bzw. über einen Laufzeitbalken zu navigieren und die Zeitanzeige. ^[29]

9.3.1 Bedienelemente auf einem PC

9.3.2 Bedienelemente auf mobilen Endgeräten

9.4 Audio-Codecs

In der HTML5 Spezifikation strebte das World Wide Web Consortium ein Standardformat für Audio und Video einzuführen, damit ein Audio sowie ein Video in jedem Browser über die beiden <audio> und <video> Tags abspielbar sind. Um einen solchen Standard festzulegen, wäre die Einigung aller Browserhersteller notwendig gewesen. Die Browserhersteller wollten sich aber aus lizenzrechtlichen Gründen nicht auf ein Audio und auf ein Video Format festlegen.^[30]

Jeder Browserhersteller verfolgt seine Strategie weiter und fördert sein Lieblingsformat in seinem Browser. Es gibt momentan keinen Browser, der alle Audio- sowie Videoformate unterstützt. Das führt dazu, dass auf einer Seite mehrere Codecs angeboten werden müssen. Die Browser suchen sich den Codec aus, den sie unterstützen und spielen diesen ab.

9.4.1 Die bekanntesten Audio-Codecs

Zu den vier bekanntesten Audio-Codecs gehören der MPEG Audio Layer III (.MP3), das lizenzfreie Multimedia Container-Dateiformat OGG, das von Microsoft definierte Waveform Audio File Format (.WAV) und das Advanced Audio Coding (.AAC).

Das AAC Format wird überwiegend von Apple Geräten unterstützt und durch die mobilen Apple Geräte wird das Audioformat auch sehr schnell verbreitet. Entwickelt wurde das Audio Format auf dem MPEG 2 Standard auf dem auch das MP3 Format entwickelt wurde.^[31]

Seit 1998 verlangt die Fraunhofer Gesellschaft Lizenzgebühren für das MP3 Format und obwohl dieses Format sehr stark verbreitet ist, wurde in den darauffolgenden Jahren eine lizenzfreie alternative zu MP3 entwickelt. Zusammengefasst aus drei verschiedenen Audio Codecs zu einer Container Audiodatei OGG.

Entwickelt wurde das Container Dateiformat von der Xiph.Org Foundation und beinhaltet neben Audioformaten auch Videoformate. Die drei Audio Codecs sind Vorbis, Speex und Flac (Free Lossless Audio Codec). Aus diesem Grund wird für die Angabe des OGG Typs im HTML5 der jeweilige Codec dazugeschrieben (Vgl. Tabelle 4: <source> Element Attribute). ^[32]

Das älteste der vier Audioformate ist das von Microsoft und IBM entwickelte WAV Audioformat. In der heutigen Zeit ist dieses Format jedoch im Internet im Vergleich zu den drei anderen Audioformaten eher weniger geeignet, da das WAV Audioformat viel größere Dateien erzeugt. Für die schnelle Datenübertragung im Internet werden daher die anderen Audioformate bevorzugt.

9.4.2 Browserunterstützung der Codecs

	AAC	OGG	MP3	WAV
Mozilla Firefox 3.6	nein	ja	nein	ja
Opera 11.0	nein	ja	nein	ja
Internet Explorer 9.0	nein	nein	ja	ja
Google Chrome 8.0	nein	ja	ja	nein
Safari 5.0	ja	nein	ja	ja

Tabelle 5: Browserunterstützung von Audioformaten

Aus der Tabelle lässt sich ganz gut erkennen, dass die Kombination aus nur zwei der vier Audiocodecs ausreicht, um alle fünf Browser abzudecken. Das wären jeweils die Kombinationen aus den Formaten OGG, MP3 und WAV.

9.5 HTML5 Audios in älteren Browsern

Im Abschnitt 9.4. wurde die Problematik um das Audioformat näher beschrieben und auch die Lösungsansetze verdeutlicht. Damit können Audios in allen Browsern wiedergegeben werden.

Jedoch werden die neuen HTML5 <audio> Elemente nur von den neuen Browsern unterstützt. Der Mozilla Firefox unterstützt die neue HTML5 Audio Spezifikation erst seit der Version 3.5 und der Internet Explorer wird es erst mit der neuen Version 9.0 unterstützen.

Um auch den älteren Browsern die Möglichkeit zu geben die Audios wiederzugeben, ohne auf HTML5 zu verzichten, müssen Fallbacks einbaut werden. Es gibt zwei Fallbacktechniken, die jeweils beide auf die Flashplayer Technik zurückgreifen und somit Flash auf dem Gerät voraussetzen.

9.5.1 Flashplayer

Die erste Möglichkeit ist, einen normalen Flash Audioplayer zwischen dem öffnenden und dem schließenden <audio> Tag einzubauen. Wie in der Tabelle 1: Beispiel Audioeinbindung 1, wird der Flash Audio Player an die Stelle der Information „Ihr Browser unterstützt diese Audiowiedergabe nicht.“ eingebaut. Der Quellcode unterscheidet sich hierbei nicht von dem einer HTML4 Spezifikation.

Die älteren Browser erkennen bzw. können das <audio> Element nicht interpretieren und greifen auf den Flash Audioplayer zu. Die neuen Browser wiederrum öffnen ein Audio aus dem <audio> Tag und ignorieren den Fallback Flash Audioplayer.

9.5.2 Javascript Bibliothek

Einen anderen Weg der Einbindung von Flash Audioplayern geht das Open Source Projekt html5media. Es handelt sich hierbei um eine Javascript Bibliothek, die erst dann eingreift, wenn der Browser kein <audio> Element lesen kann oder er kein der vorhandenen Audioformate abspielen kann.

Die Javascript Bibliothek wird nur einmalig auf der Seite integriert und erfordert keinen weiteren Einbau eines Flash Audioplayers mehr im Fallbackbereich. Im Hintergrund wird zum Abspielen der Open Source Audio- und Videoplayer Flowplayer geladen. Dieser nutzt zusätzlich noch die freie Javascript Bibliothek jQuery. Mit diesem Fallback lassen sich Audios auch in älteren Browsern abspielen, ohne dass die Wiedergabe in neuen Browsern durch den Flash Audioplayer gestört wird. Voraussetzung ist hierbei die Flashunterstützung.

Eine weitere Javascript Bibliothek ist mwEmbed der Firma Kaltura, die ähnlich Funktioniert wie html5media. Auch hier wird ein Flash Audioplayer eingebaut. Der große Unterschied liegt aber darin, dass der Flashplayer auch in den neuen Browsern den nativen Player ersetzt. Damit ist zwar die Einheitlichkeit des Players in jedem Browser sichergestellt, aber der Grundgedanke von HTML5 und damit das Abspielen eines Audios in nativen Playern nicht mehr gegeben.

9.6 Eigene Steuerelemente mit Javascript

In HTML5 ist es jedem Browserhersteller überlassen das Design eines Audio- und Videoplayers nach seinem Geschmack zu gestalten. Das hat zur Folge, dass die Player sich von Browser zu Browser unterscheiden und dadurch kein einheitliches Design auf der eigenen Seite mehr gegeben ist.

Über ein Media-Interface in HTML5 lassen sich die <audio> Steuerelemente über Javascript selber gestalten und steuern. Diese Schnittstelle ist mit dem neuen <audio> Element in der DOM (Document Object Model) implementiert und bietet somit die Möglichkeit, jedes einzelne Objekt auf der Webseite zu verändern.

Das bringt den Vorteil mit sich auf den Audioplayer der einzelnen Browser zu verzichten und einen eigenen Audioplayer mit einer eigenen Steuerung zu erstellen.

Das Interface beinhaltet Funktionen, sowohl mit wie auch ohne einen Rückgabewert. Variablen können entweder nur gelesen oder auch beschrieben werden. Damit lassen sich Steuerelemente wie Play und Pause, Leiser und Lauter steuern und Metadaten des Audios auslesen. ^[33]

Fehlermeldungen und Status lassen sich ebenfalls über dieses Interface auslesen, um dem Benutzer benutzerfreundliche Informationen bereitzustellen.

9.6.1 Beispiel für eigene Steuerelemente (HTML Quellcode)

<!DOCTYPE html>
<html>
<head>
     <title>Beispiel für einen Audioplayer</title>
     <style type="text/css">
          #fortschritt {width:350px; height:18px; position:relative; border:1px solid #000; background:gray;}
          #anzeige {width:350px; height:18px; position:absolute; text-align:center; color:#FFFFFF}
          #abgespielt {width:0; height:18px; background:black;}
     </style>
     <script>
          // Start/Pause
          function start(){
               monitiorProgress();
               var audio = document.getElementById('myaudioplayer');
     
               if(audio.paused){audio.play();}
               else {audio.pause();}
               }
 
          // Stummschalten
          function stumm(){
               var audio = document.getElementById('myaudioplayer');

               if(audio.muted){audio.muted = false;}
               else {audio.muted = true;}
               }

          // Lautstärkeregelung
          function lauter(){
               var audio = document.getElementById('myaudioplayer');
              
               if(audio.volume < 1){audio.volume = audio.volume + 0.2;}
               }

          function leiser(){
               var audio = document.getElementById('myaudioplayer');

               if(audio.volume > 0){audio.volume = audio.volume - 0.2;}
               }

          // Fortschrittsbalken
          function monitiorProgress(){
               var audio = document.getElementById('myaudioplayer');
               var anzeige = document.getElementById('anzeige');
               var abgespielt = document.getElementById('abgespielt');
               var timer;
          // Alle halbe Sekunde den Balken aktualisieren
          audio.addEventListener('play', function(){
               timer = setInterval(function(){
                    var prozent = Math.floor(audio.currentTime/audio.duration*100) + '%';
                    anzeige.innerHTML = prozent;
                    abgespielt.style.width = prozent;
               }, 500);
          }, false);

          // Überwachung beenden wenn das audio nicht läuft
          audio.addEventListener('pause', function(){clearInterval(timer);}, false);}
     </script>
</head>
<body>
     <audio id="myaudioplayer">
          <source src="musik.mp3" type="audio/mp3">
          <source src="musik.ogg" type="audio/ogg">
          Ihr Browser unterstützt diese Audiowiedergabe nicht.
     </audio>
     
     <div id="fortschritt">
          <div id="anzeige">0%</div>
          <div id="abgespielt"></div>
     </div>

     <p>
          <button id="start" onclick="start()">Start/Pause</button>
          <button id="stumm" onclick="stumm()">Stummschalten</button>
          <button id="lauter" onclick="lauter()">Lauter</button>
          <button id="leiser" onclick="leiser()">Leiser</button>
     </p>
</body>
</html>

Beispiel für eigene Steuerelemente. ^[34]

9.6.2 Darstellung der Steuerelemente aus dem Beispiel

10 Fazit

Die immer wichtiger werdende Rolle von Audio und Videoinhalten auf Webseiten wird bewusst, wenn man die Erfolge von YouTube und Co betrachtet. Der HTML Standard muss sich dahingehend weiterentwickeln. Ob die Weiterentwicklung HTML5 heißt, bleibt weiter abzuwarten. Das W3C hat sich bisher noch nicht dazu entschlossen den möglichen Standard anzuerkennen bzw. an der Standardisierung mitzuwirken. Ob das in Zukunft so bleibt und ob sich das W3C weiterhin gegen die Browserhersteller stellt und den Standard verweigert, kann derzeit nicht beantwortet werden. Faktisch muss HTML weiterentwickelt werden und diese Hausarbeit zeigt, dass der Grundstein mit HTML5 gelegt ist. Die Browserhersteller teilen diese Meinung anscheinend, denn die weit verbreiteten Browser unterstützen die bisherige Spezifikation schon jetzt. Die Unterstützung ist zwar noch recht unterschiedlich, aber wir befinden uns noch relativ am Anfang. Für die weitere Zukunft wäre ein Standard wichtig, damit die Integration in die einzelnen Browser zum Einen schneller umgesetzt werden kann und zum Anderen ein einheitlicher Umgang mit den Elementen umgesetzt werden kann.

11 Fußnoten

1. ↑ Vgl. http://www.edition-w3c.de/TR/1999/REC-html401-19991224/intro/intro.html
2. ↑ Vgl. http://de.selfhtml.org/intro/technologien/html.htm#auszeichnungssprache
3. ↑ Vgl. http://de.selfhtml.org/html/allgemein/grundgeruest.htm
4. ↑ Vgl. http://www.w3c.de/about/history.html
5. ↑ Quelle: http://www.w3c.de/about/overview.html
6. ↑ Vgl. http://de.selfhtml.org/intro/internet/www.htm
7. ↑ Vgl. http://www.w3.org/Consortium/facts.html
8. ↑ Quelle: http://www.w3.org/2005/01/timelines/timeline-2500x998.png
9. ↑ Vgl. http://www.w3c.de/about/overview.html
10. ↑ Vgl. http://www.w3c.de/about/org.html
11. ↑ Quelle:http://www.w3c.de/about/org.html
12. ↑ Quelle: http://www.w3c.de/about/org.html
13. ↑ Vgl. http://www.edition-w3c.de/TR/1999/REC-html401-19991224/intro/intro.html
14. ↑ Vgl. http://de.selfhtml.org/css/intro.htm
15. ↑ Vgl. http://www.edition-w3c.de/TR/1999/REC-html401-19991224/intro/intro.html
16. ↑ Vgl. http://de.selfhtml.org/html/frames/definieren.htm
17. ↑ Vgl. http://de.selfhtml.org/html/referenz/varianten.htm
18. ↑ Quelle: http://www.htmlcodetutorial.com/embeddedobjects/_EMBED.html
19. ↑ Vgl. HTML5 - Leitfaden für Webentwickler, Addison-Wesley-Verlag 2011, Klaus Förster und Bernd Öggl, Seite 16.
20. ↑ Vgl. HTML5 - Leitfaden für Webentwickler, Addison-Wesley-Verlag 2011, Klaus Förster und Bernd Öggl, Seite 16.
21. ↑ Vgl. HTML5 - Webseiten innovativ und zukunftssicher,Open Source Press 2010, Peter Kröner S.16, Kap. 1.1.
22. ↑ Quelle: http://www.w3.org/TR/html5-diff/
23. ↑ Vgl. http://www.w3.org/TR/html5-diff/
24. ↑ Vgl. HTML5 - Webseiten innovativ und zukunftssicher,Open Source Press 2010, Peter Kröner S.181
25. ↑ Vgl. HTML5 - Webseiten innovativ und zukunftssicher,Open Source Press 2010, Peter Kröner S.182
26. ↑ Vgl. http://www.whatwg.org/specs/web-apps/current-work/#embedded-content
27. ↑ Vgl. http://www.whatwg.org/specs/web-apps/current-work/#audio
28. ↑ Vgl. http://www.whatwg.org/specs/web-apps/current-work/#audio
29. ↑ Vgl. HTML5 - Leitfaden für Webentwickler, Addison-Wesley-Verlag 2011, Klaus Förster und Bernd Öggl, S. 94
30. ↑ Vgl. http://www.netzwelt.de/news/80196-html-5-keine-einigung-einheitliche-medienstandards.html
31. ↑ Vgl. http://www.ub.uni-freiburg.de/index.php?id=1274
32. ↑ Vgl. http://www.xiph.org/ogg/
33. ↑ Vgl. HTML5 - Leitfaden für Webentwickler, Addison-Wesley-Verlag 2011, Klaus Förster und Bernd Öggl, S. 110
34. ↑ Vgl. HTML5 - Webseiten innovativ und zukunftssicher,Open Source Press 2010, Peter Kröner

12 Literatur- und Quellenverzeichnis

HTML5 - Leitfaden für Webentwickler, Addison-Wesley-Verlag 2011, Klaus Förster und Bernd Öggl

HTML5 - Webseiten innovativ und zukunftssicher,Open Source Press 2010, Peter Kröner

Professionelle Websites, Programmierung, Design und Administration von Webseiten, Addison-Wesley-Verlag 2006, Stefan Münz

http://www.edition-w3c.de

http://www.w3c.de

http://de.selfhtml.org

http://www.w3.org

http://www.whatwg.org

http://www.netzwelt.de

http://www.ub.uni-freiburg.de

http://www.xiph.org/