Exportieren (0) Drucken
Alle erweitern

Steuern des Audio-Objekts mithilfe von JavaScript

Das audio-Objekt in HTML5 bietet Methoden, Eigenschaften und Ereignisse zum Steuern der Wiedergabe in JavaScript.

Dieser Abschnitt enthält folgende Themen:

Wiedergeben und Anhalten der Audiowiedergabe in JavaScript

Mithilfe des HTML5-Elements audio, wie beschrieben unter Erste Schritte mit dem HTML5-Element "audio", können Sie einer Webseite Audio hinzufügen, ohne dass dazu ein externes Steuerelement oder ein Programm erforderlich ist. Wenn Sie auf Ihrer Webseite jedoch umfangreichere Funktionen als die eines einfachen Audioplayers bereitstellen möchten, benötigen Sie auch mehr Kontrolle über die zu ladenden Audiodateien und ihrer Wiedergabe. Um das audio-Element mit JavaScript zu verwenden, definieren Sie einfach nur ein audio-Tag mit einer "ID". Wie bereits unter Erste Schritte mit dem HTML5-Element "Audio" beschrieben, können Sie die integrierten Steuerelemente anzeigen und ausblenden und festlegen, dass beim Laden der Seite automatisch Audio wiedergegeben wird. Dies und noch einiges mehr ist auch mit JavaScript möglich.

In den folgenden Beispielen wird eine einfache audio-Tagsyntax in HTML verwendet.

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.

      <input type="text" id="audiofile" size="80" value="demo.mp3" />


Alle anderen Funktionen des Audioplayers werden über JavaScript gesteuert, wie im folgenden Skript dargestellt.


        var currentFile = "";
        function playAudio() {
            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    var btn = document.getElementById('play'); 
                    var audioURL = document.getElementById('audiofile'); 

                    //Skip loading if current file hasn't changed.
                    if (audioURL.value !== currentFile) {
                        oAudio.src = audioURL.value;
                        currentFile = audioURL.value;                       
                    }

                    // Tests the paused attribute and set state. 
                    if (oAudio.paused) {
                        oAudio.play();
                        btn.textContent = "Pause";
                    }
                    else {
                        oAudio.pause();
                        btn.textContent = "Play";
                    }
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }


Im HTML-Teil des Beispiels ist dem audio-Element die ID "myaudio" und die Quelldatei "demo.mp3" zugewiesen. Eine Schaltfläche ist mit der ID "play" und einem onclick-Ereignis definiert, mit dem die "playAudio()"-Funktion aus JavaScript ausgelöst wird.

Im JavaScript-Teil wird das audio-Objekt mit document.getElementById zurückgegeben. Mit den Methoden play und pause wird die Wiedergabesteuerung bereitgestellt. Das button-Objekt wird abgerufen, damit die Schaltflächenbeschriftung zwischen Play und Pause umgeschaltet werden kann. Die Umschaltung erfolgt in Abhängigkeit vom Zustand der paused-Eigenschaft des audio-Objekts. Der Zustand wird bei jedem Aufrufen der "playAudio"-Funktion überprüft. Wenn die Audiodatei wiedergegeben wird, gibt die paused-Eigenschaft false zurück. Durch einen Aufruf der pause-Methode wird die Wiedergabe unterbrochen. Auch die Schaltflächenbezeichnung wird auf Play festgelegt.

Wenn die Datei unterbrochen ist, gibt die paused-Eigenschaft true zurück, und die play-Methode wird aufgerufen. Die Beschriftung der Schaltfläche wird in Pause geändert. Beim ersten Laden einer Datei gibt die paused-Eigenschaft true (die Wiedergabe ist unterbrochen) auch dann zurück, wenn die pause-Methode nicht explizit aufgerufen wurde.

Im HTML-Code sind die Schaltflächen standardmäßig deaktiviert. Wenn die Seite geladen wird, wird die checkSupport()-Funktion mithilfe eines onload-Ereignisses im body-Tag aufgerufen. Wenn das audio-Element vorhanden ist, sind die Schaltflächen aktiviert.

Angeben von Audiodateien und Verwalten der Wiedergabe in JavaScript

Im ersten Beispiel wird die Audioquelldatei mithilfe des source-Tags im HTML-Teil des Projekts angegeben. Wenn Sie mehrere Dateien wiedergeben möchten, können Sie in JavaScript die src-Eigenschaft des audio-Objekts auf die URL einer Audiodatei festlegen.

Im nächsten Beispiel wird im HTML-Teil ein Element für die Texteingabe hinzugefügt, in das Sie den Pfad einer MP3-Audiodatei (MPEG-Layer 3) einfügen können.

Anders als im ersten Beispiel kann das Klicken auf die Schaltfläche Play bedeuten, dass der Benutzer die Audiodatei geändert hat oder dass die Wiedergabe der aktuellen Datei angehalten wurde. Da zum Ändern der Audioquelldatei die src-Methode aufgerufen werden muss, wodurch der angehaltene Zustand zurückgesetzt wird, muss die "playAudio"-Funktion angeben, wann der Benutzer Dateien ändern möchte. Die globale Variable "currentFile" ist so definiert, dass die URL für die aktuell wiedergegebene Datei nachverfolgt werden kann. Wenn der Benutzer auf die Schaltfläche Play klickt, wird die "currentFile"-Variable mit dem Wert im Textfeld verglichen, das durch "audioURL.value" angegeben ist. Wenn die Werte voneinander abweichen, wird die src-Eigenschaft auf die neue Datei-URL festgelegt, die "currentFile"-Variable wird aktualisiert, und die load-Methode wird aufgerufen.

In diesem Beispiel wird mit der "currentFile"-Variablen nicht die src-Eigenschaft des audio-Objekts, sondern der Inhalt des Textfelds nachverfolgt. Der Grund hierfür ist, dass die src-Eigenschaft immer der vollqualifizierte Pfad zur Datei ist, der nicht zwingenderweise mit dem Inhalt des Textfelds übereinstimmen muss. Wenn sich beispielsweise die Audiodatei in demselben Verzeichnis wie der Quellcode für die Webseite befindet, können Sie nur den Dateinamen angeben. Wenn sich die Audiodatei in einem anderen Verzeichnis in derselben Domäne befindet, schließen Sie den Pfad ein, z. B. "music\demo.mp3". Befindet sich die Datei auf einer anderen Site, verwenden Sie den vollqualifizierten Domänennamen und den Dateipfad, z. B. "http:\\www.contoso.com\music\demo.mp3".

Während der Wiedergabe der Audiodatei verfolgt die currentTime-Eigenschaft nach, an welcher Stelle sich die Wiedergabe im Audioclip befindet. Durch Ändern des Werts von currentTime können Sie vorwärts oder rückwärts springen oder die Wiedergabe neu starten. Das Beispiel enthält drei neue Schaltflächen, mit denen die Funktionen rewindAudio, forwardAudio und restartAudio aufgerufen werden. Die rewindAudio-Funktion und die forwardAudio-Funktion verringern bzw. erhöhen den Wert von currentTime um 30 Sekunden. Sie können den inkrementellen Wert ändern, um die Sprünge zu vergrößern bzw. zu verkleinern. In der restartAudio-Funktion ist der Wert von currentTime auf Null, d. h. den Anfang der Datei, festgelegt.

Sie können auch die Geschwindigkeit ändern, mit der die Audiodaten wiedergegeben werden, indem Sie die playbackRate-Eigenschaft anpassen. Die playbackRate-Eigenschaft dient als Multiplizierer für die Wiedergabegeschwindigkeit. Der Wert von playbackRate muss positiv sein, da ein negativer Wert einen Fehler verursacht.

Das audio-Objekt unterstützt auch Ereignisse wie das timeUpdate-Ereignis, mit dem Sie den Fortschritt einer Datei nachverfolgen können. Weitere Informationen zum Verwenden von Ereignissen für Status und Feedback sowie zum Hinzufügen einer Statusanzeige finden Sie unter Hinzufügen von Statusanzeigen mithilfe von Medienereignissen.


             // Rewinds the audio file by 30 seconds.

        function rewindAudio() {
             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime -= 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }

             // Fast forwards the audio file by 30 seconds.

        function forwardAudio() {

             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime += 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }

             // Restart the audio file to the beginning.

        function restartAudio() {
             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime = 0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
               }
            }


Sie können auch die Geschwindigkeit ändern, mit der die Audiodaten wiedergegeben werden, indem Sie die playbackRate-Eigenschaft anpassen. Die playbackRate-Eigenschaft dient als Multiplizierer für die Wiedergabegeschwindigkeit. Der Wert von playbackRate muss positiv sein, da ein negativer Wert einen Fehler verursacht. In diesem Beispiel wird eine Audiodatei wiedergegeben, für die Sie die Geschwindigkeit erhöhen oder verringern können. Mit der Schaltfläche zum Erhöhen der Geschwindigkeit wird die Wiedergabegeschwindigkeit um den Wert 1 erhöht. Es wird also mit normaler Wiedergabe begonnen, und der Multiplizierer wird dann mit jedem Klick auf die Schaltfläche erhöht. Mit der Schaltfläche zum Verringern der Geschwindigkeit wird die Wiedergabegeschwindigkeit mit jedem Klick auf die Schaltfläche durch den Wert 2 geteilt. Diese Sprünge wurden absichtlich groß gewählt, damit sie erkennbar sind. Sie können jedoch auch kleinere Schritte wählen.


 <!DOCTYPE html>
<html>
  <head>
    <title>Audio playbackRate Example</title>  
</head>
<body>
<div>
  <audio id="audio1" style="width:25%" controls>Canvas not supported</audio>
</div>
<div>
<input type="text" id="audioFile" value="audio.mp3" size="60" />

</div>
  <button id="playbutton" onclick="togglePlay();">Play</button>  
  <button onclick="increaseSpeed();">Increase speed</button>
  <button onclick="decreaseSpeed();">Decrease speed</button><br />
  <div id="rate"></div>

     <script type="text/javascript">
       // Create a couple of global variables to use. 
       var audioElm = document.getElementById("audio1"); // Audio element
       var ratedisplay = document.getElementById("rate"); // Rate display area

       // Hook the ratechange event and display the current playbackRate after each change
       audioElm.addEventListener("ratechange", function () {
         ratedisplay.innerHTML = "Rate: " + audioElm.playbackRate;
       }, false);

       //  Alternates between play and pause based on the value of the paused property
       function togglePlay() {
         if (document.getElementById("audio1")) {

           if (audioElm.paused == true) {
             playAudio(audioElm);    //  if player is paused, then play the file
           } else {
             pauseAudio(audioElm);   //  if player is playing, then pause
           }
         }
       }

       function playAudio(audioElm) {
         document.getElementById("playbutton").innerHTML = "Pause"; // Set button text == Pause
         // Get file from text box and assign it to the source of the audio element 
         audioElm.src = document.getElementById('audioFile').value;
         audioElm.play();
       }

       function pauseAudio(audioElm) {
         document.getElementById("playbutton").innerHTML = "play"; // Set button text == Play
         audioElm.pause();
       }

       // Increment playbackRate by 1 
       function increaseSpeed() {
         audioElm.playbackRate += 1;
       }

       // Cut playback rate in half
       function decreaseSpeed() {
         if (audioElm.playbackRate <= 1) {
           var temp = audioElm.playbackRate;
           audioElm.playbackRate = (temp / 2); 
         } else {
           audioElm.playbackRate -= 1;
         }
       }

     </script>


</body>
</html>


Abfangen von Fehlern

Das Schreiben von fehlerfreiem Code ist schwierig. Dieses Beispiel enthält mehrere Vorschläge, um Fehler zu vermeiden.

Hinweis  Das vorliegende Beispiel enthält Code zum Senden von Fehlern an die Konsole oder die Registerkarte "Skript" in den Entwicklertools (F12). Weitere Informationen finden Sie unter Verwenden der Entwicklertools (F12).

Eine Eigenschaft der HTML-Sprache ist, dass nicht erkannte Tags ignoriert werden. Bei einem Browser, der HTML5 nicht unterstützt, wird bei der Verwendung des HTML-Elements audio, sofern dieses nicht erkannt wurde, der Teil zwischen den Tags verwendet. In diesem Beispiel wird die Meldung HTML5 Audio is not supported angezeigt, Sie können aber auch eine andere Meldung hinzufügen, eine andere Technologie, z. B. Microsoft Silverlight, verwenden oder dem Benutzer das Herunterladen der Datei gestatten. Wenn das HTML5-Element "audio" unterstützt wird, wird der Teil zwischen den Tags ignoriert. Hier gibt es jedoch einen Fallstrick. Bei einer normalen Anzeige im Browser wird der Inhalt zwischen den audio-Tags ignoriert, aber wenn eine Webseite mit einer Bildschirmsprachausgabe angezeigt wird, wird auch der Inhalt zwischen den Tags von der Sprachausgabe gelesen.

Im JavaScript-Abschnitt des Codes befinden sich Bereiche, in denen Fehler wahrscheinlich sind. Der erste tritt auf, wenn Sie überprüfen, ob HTML5-Audiounterstützung vorhanden ist. Jede Funktion testet mit if (window.HTMLAudioElement) , ob das audio-Element vorhanden ist. Wenn das audio-Element nicht vorhanden ist, wird kein Code ausgeführt.

In diesem Beispiel werden die Schaltflächen deaktiviert, wenn keine Unterstützung vorhanden ist, d. h., die Funktionen werden nicht aufgerufen. Das Deaktivieren des Zugriffs auf die JavaScript-Funktionen ist für Ihre Webseiten möglicherweise nicht durchführbar.

Wenn das HTML5-Element "audio" unterstützt wird, können u. U. andere Fehler auftreten. Try-/Catch-Anweisungen werden zusammen mit Methoden verwendet, die Ausnahmen auslösen. Ein Grund für Ausnahmen besteht dann, wenn der Benutzer versucht, eine nicht vorhandene Datei wiederzugeben oder zurückzuspulen, wenn keine Datei geladen ist, oder eine Verbindung mit einer Datei nicht hergestellt werden kann.

Mit den try-/catch-Anweisungen schlagen diese Bedingungen ohne Warnung fehl, aber Sie können die Fehler anzeigen, wenn Sie die Konsole oder die Registerkarte "Skript" in den Entwicklertools (F12) von Internet Explorer 9 öffnen. Beispielsweise lösen die Funktionen Fast Forward, Rewind und Restart DOM-Ausnahmen vom Typ "InvalidStateError" aus, wenn keine Audiodatei wiedergegeben wird oder geladen ist.

Im folgenden Codebeispiel werden alle Konzepte dieses Themas erläutert.



<!DOCTYPE html>
<html>
  
  <head>
    <title>HTML5 Audio Player </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"/> -->  
    <script type="text/javascript">
        // Global variable to track current file name.
        var currentFile = "";
        function playAudio() {
            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    var btn = document.getElementById('play'); 
                    var audioURL = document.getElementById('audiofile'); 

                    //Skip loading if current file hasn't changed.
                    if (audioURL.value !== currentFile) {
                        oAudio.src = audioURL.value;
                        currentFile = audioURL.value;                       
                    }

                    // Tests the paused attribute and set state. 
                    if (oAudio.paused) {
                        oAudio.play();
                        btn.textContent = "Pause";
                    }
                    else {
                        oAudio.pause();
                        btn.textContent = "Play";
                    }
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }
             // Rewinds the audio file by 30 seconds.

        function rewindAudio() {
             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime -= 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }

             // Fast forwards the audio file by 30 seconds.

        function forwardAudio() {

             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime += 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }

             // Restart the audio file to the beginning.

        function restartAudio() {
             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime = 0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
               }
            }
        }
            
    </script>
  </head>
  
  <body>
    <p>
      <input type="text" id="audiofile" size="80" value="demo.mp3" />
    </p>
    <audio id="myaudio">
      HTML5 audio not supported
    </audio>
    <button id="play" onclick="playAudio();">
      Play
    </button>
    
    <button onclick="rewindAudio();">
      Rewind
    </button>
    <button onclick="forwardAudio();">
      Fast forward
    </button>
    <button onclick="restartAudio();">
      Restart
    </button>

  </body>

</html>



Verwandte Themen

Erste Schritte mit dem HTML5-Element "Audio"
Hinzufügen eines Audioplayers zu Webseiten mithilfe von HTML5
Hinzufügen einer Statusanzeige mithilfe von Medienereignissen
Pausieren oder Ändern der Medienlautstärke beim Verlassen der Seite

 

 

Anzeigen:
© 2015 Microsoft