(0) exportieren Drucken
Alle erweitern

Unterstützung für mehrere Audiodateiformate

Wenn Sie mithilfe des audio-Elements oder -Objekts mehrere Audioformate unterstützen, können Sie mehr Hörer, die unterschiedliche Browser verwenden, auf Ihre Webseite locken.

Angeben mehrerer Audioformate mithilfe des source-Elements

Wenn Sie Ihrem Code das HTML5-Element audio hinzufügen, können Sie eine Fehlermeldung angeben, die angezeigt wird, wenn der Browser das audio-Tag nicht unterstützt.

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=9”/>" hinzufügen. Damit zwingen Sie Windows Internet Explorer 9, die neuesten Standards zu verwenden. Sie können Ihren Webentwicklungsserver auch so konfigurieren, dass er stattdessen den Header "meta http-equiv-"X-UA-Compatible"" mit "IE=9" sendet. Weitere Informationen zur Dokumentkompatibilität finden Sie unter Definieren der Dokumentkompatibilität.


<audio src="demo.mp3" controls autoplay loop> 
    HTML5 audio not supported
</audio>


Dies funktioniert gut, wenn Sie einen Browser verwenden, der gar keine Audiounterstützung bietet. Wenn hingegen das audio-Element unterstützt wird, das Dateiformat aber nicht, wird die angegebene Fehlermeldung nicht angezeigt. Da die Zahl der unterstützten Formate bei den Browsern mit HTML5-Unterstützung gering ist, können Sie, um möglichst viele Hörer anzulocken, das source-Element verwenden, mit dem Sie mehrere Dateiformate zum Ausprobieren angeben können. Das folgende Beispiel zeigt drei Formate.


<!doctype html>
<head>
    <title>
        Multiple format audio example
    </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>
        Using source to support multiple audio formats
    </h1>
    <!-- The browser will automatically choose the format it supports. -->
    <audio controls="true">
        <source src="demo.mp3" type="audio/mp3"> 
        <source src="demo.ogg" type="audio/ogg"> 
        <source src="demo.aac" type="audio/mp4"> 
        <!-- If no support at all. -->
        HTML5 audio not supported 
    </audio>
</body>
</html>


In diesem Beispiel geben Sie drei Formate an. Der Browser wählt automatisch das unterstützte Format aus, und wenn gar keine Audiounterstützung vorhanden ist, wird die Fehlermeldung aufgerufen.

Bestimmen unterstützter Audiodateiformate in JavaScript

Die Bestimmung des zu verwendenden Formats in JavaScript ist etwas komplizierter als das einfache Failovermodell des source-Elements. Wenn Sie jedoch die verfügbare Unterstützung bestimmt haben, können Sie für den Rest der Sitzung von Formatannahmen ausgehen.

Das audio-Objekt stellt die canPlayType-Methode bereit, um die Dateiformatfunktionen des Browsers im Voraus zu testen. Die canPlayType-Methode verwendet einen audio-MIME-Typ sowie optionale codec-Parameter und gibt eine der folgenden drei Zeichenfolgen zurück: "empty", "maybe" oder "probably".

Im folgenden Codebeispiel wird überprüft, ob die drei Audiodateiformate MPEG-Layer 3 (MP3), OGG und AAC unterstützt werden.


<!doctype html>
<head>
    <title>Using multiple file formats in JavaScript</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=edge"/> --> 
 
    <script type= "text/javascript">
        function checkAudioCompat() {
            var myAudio = document.createElement('audio');
            var msg = document.getElementById("display");

            msg.innerHTML = "";
            
            if (myAudio.canPlayType) {
                // CanPlayType returns maybe, probably, or an empty string.
                var playMsg = myAudio.canPlayType('audio/mpeg');
                if ( "" != playMsg) {
                    msg.innerHTML += "mp3 is " + playMsg + " supported<br/>";
                }
                playMsg = myAudio.canPlayType('audio/ogg; codecs="vorbis"'); 
                if ( "" != playMsg){
                    msg.innerHTML += "ogg is " + playMsg + " supported<br/>";                    
                }

                playMsg = myAudio.canPlayType('audio/mp4; codecs="mp4a.40.5"');
                if ( "" != playMsg){
                    msg.innerHTML += "aac is "+playMsg+" supported<br/>";
                }
            }
            else {
                msg.innerHTML += "no audio support";                
            }
        }
    </script>
</head>
<body>
    <button onclick="checkAudioCompat();">
        Test for audio format type
    </button>
    <div id="display"> </div>
</body>
</html>


Wenn Sie neue Elemente und Funktionen in Internet Explorer 9 verwenden, ist es ratsam, die zu implementierenden Funktionen stets zu testen. Bei der Überprüfung auf Unterstützung erstellt die Funktion zunächst mithilfe der document.createElement()-Variablen ein audio-Objekt. Wenn dieses erfolgreich erstellt wurde, gibt die "if (myAudio.canPlayType)"-Anweisung den Wert true zurück, und die Ausführung wird fortgesetzt, um das Vorhandensein bestimmter Dateitypen zu testen.

Es ist nicht unbedingt ganz einfach, zu überprüfen, ob ein Browser ein bestimmtes Dateiformat unterstützt. Da die canPlayType-Methode drei Zustände zurückgeben kann, verwenden Sie die folgende Anweisung, damit bei der Überprüfung der Unterstützung der boolesche Wert true oder false zurückgegeben wird. Die playMsg-Variable wird dem Ergebnis des canPlayType-Tests zugewiesen und testet dann wie im folgenden Beispiel dargestellt das Ergebnis.


                var playMsg = myAudio.canPlayType('audio/mpeg');
                if ( "" != playMsg) {
                    msg.innerHTML += "mp3 is " + playMsg + " supported<br/>";
                }


Die Anweisung gibt ein Ergebnis true zurück, wenn canPlayType "maybe" oder "probably" zurückgibt. Wenn eine leere Zeichenfolge das Ergebnis von canPlayType ist, gibt die Anweisung false zurück. Das bedeutet dann, dass das Format nicht unterstützt wird.

Da canPlayType mehrere Formate zurückgeben kann, ist es ratsam, bei der Überprüfung nach einer Hierarchie vorzugehen, damit das am besten geeignete Dateiformat ausgewählt wird.

Verwandte Themen

Erste Schritte mit dem HTML5-Element "Audio"
Hinzufügen eines Audioplayers zu Webseiten mithilfe von HTML5
Steuern des Audio-Objekts mithilfe von JavaScript

 

 

Anzeigen:
© 2014 Microsoft