(0) exportieren Drucken
Alle erweitern

Erste Schritte mit dem HTML5-Element "Audio"

In Windows Internet Explorer 9 wurde die Unterstützung für HTML5-Audio eingeführt.Sie können das audio-Element verwenden, um Ihrer Webseite einen einfachen Audioplayer hinzuzufügen, ohne dass dazu Skript- oder Add-On-Steuerelemente erforderlich sind.

Audiowiedergabe einfach gemacht

Wenn Sie einer Webseite Audio hinzufügen möchten, verwenden Sie am besten das audio-Element. Wie dies bei der neuen HTML5-Unterstützung häufig der Fall ist, können Sie auch beim audio-Element auf eine Fehlermeldung oder eine andere Wiedergabetechnologie ausweichen, wenn der Browser des Benutzers das HTML5-Element "audio" nicht unterstützt. Dies trifft u. a auf ältere Browser zu. Sie können entweder eine Fehlermeldung zwischen die audio-Tags setzen (siehe folgendes Beispiel), oder Code für ein externes Player-Steuerelement einfügen, wie z. B. das Browser-Plug-In Silverlight. Im folgenden Codebeispiel ist eine einfache Webseite dargestellt, die eine Audiodatei wiedergibt.


<!doctype html>  
<html>
<head>
    <title>Audio Element Sample</title>
    <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->    
    <!--  <meta http-equiv="X-UA-Compatible" content="IE=9"/> --> 
</head>
<body>
    <h1>Audio Element Sample</h1>
    
    <!-- Display the audio player with control buttons. -->
    <audio src="demo.mp3" controls autoplay loop> 
        HTML5 audio not supported
    </audio>
</body>
</html>


Das audio-Element wird direkt dem HTML-Code hinzugefügt. Dabei werden die src-Eigenschaft verwendet, um die wiederzugebende Audiodatei anzugeben, sowie das controls-Attribut, damit die integrierten Playersteuerelemente verwendet werden. Wenn Sie den systeminternen Player des Browsers verwenden, sind keine weiteren Skripts erforderlich. Der systeminterne Player kann in Bezug auf Format oder Funktionen von Browser zu Browser unterschiedlich sein.

In Internet Explorer 9 zeigt das audio-Element einen einfachen Player mit grundlegenden Steuerelementen für das Wiedergeben, das Anhalten, den Positionsschieberegler und die Lautstärke an. Der Player zeigt auch die Wiedergabezeit und die noch verbleibende Zeit an. Wenn Sie den Cursor über eine der beiden Zeitanzeigen bewegen, können Sie um 30 Sekunden vorwärts oder zurück springen.

HTML5-Audioplayer in Internet Explorer 9

Das audio-Element in Internet Explorer 9 unterstützt zwei weitere Attribute, autoplay und loop. autoplay weist Windows Internet Explorer an, die Audiodatei sofort nach dem Laden des audio Objekts zu laden und wiederzugeben. Dies ähnelt der Verwendung des HTML-Elements bgsound . Im Gegensatz zu bgsoundermöglichen es die Steuerelemente pause und play Webseitenbenutzern, den Sound auszuschalten. Das loop-Attribut sorgt dafür, dass die Sounddatei fortlaufend wiederholt wird. Verwenden Sie die Attribute nicht, wenn Sie die systemeigenen Steuerelemente nicht benötigen.

Im Beispiel dient die Datei "demo.mp3" als Platzhalter für Ihre eigene Datei. Wenn sich die Audiodatei im selben Verzeichnis wie der Quellcode für die Webseite befindet, genügt es, den Dateinamen anzugeben. Wenn sich die Audiodatei in einem anderen Verzeichnis befindet, geben Sie auch den Pfad an, z. B. "music\demo.mp3". Befindet sich die Datei in einer anderen Website, verwenden Sie die vollqualifizierte Domäne und den Pfad, wie z. B. "http:\\www.contoso.com\music\demo.mp3".

Während das audio-Element in HTML alleine implementiert werden kann, können Sie mithilfe der Skripterstellung Ihre Webseite aufwerten, indem Sie eigene Schaltflächen verwenden, Wiedergabelisten erstellen oder der Wiedergabe den Status hinzufügen. Weitere Informationen zum Erstellen des Skripts für das audio-Element finden Sie unter Steuern des Audio-Objekts mithilfe von JavaScript.

Hinweis  Wenn Sie in einem Intranet Entwicklungsaufgaben ausführen und auf Renderingprobleme bei HTML5 stoßen, können Sie dem <head>-Abschnitt einer Webseite "<meta http-equiv-“X-UA-Compatible” content=”IE=edge”/>" hinzufügen. Damit zwingen Sie Internet Explorer, die neuesten Standards zu verwenden. Stattdessen können Sie auch den Webentwicklungsserver so konfigurieren, dass er einen X-UA-kompatiblen http-equiv-Header mit "IE=edge" sendet, falls Sie das vorziehen. Weitere Informationen zur Dokumentkompatibilität finden Sie unter Definieren der Dokumentkompatibilität.

API-Referenz

HTML5 Audio and Video

Beispiele und Lernprogramme

Steuern des Audio-Objekts mithilfe von JavaScript
Hinzufügen einer Statusanzeige mithilfe von Medienereignissen
Unterstützung für mehrere Audiodateiformate
Pausieren oder Ändern der Medienlautstärke beim Verlassen der Seite

Demos für die Internet Explorer-Testversion

Audio Explosion
HTML5 Audio Player + XML Playlist
IE Beatz
Fireflies

IEBlog-Beiträge

Nutzen der Möglichkeiten von "<audio>" in HTML5
Gleiches Markup: Verwenden von "<canvas>", "<audio>" und "<video>"

Spezifikation

HTML5: Abschnitt 4.8.7

Verwandte Themen

Nutzen der Möglichkeiten von HTML5-Audio
Systemeigenes Audio with HTML5

 

 

Anzeigen:
© 2014 Microsoft