Web-Audio, Autoplay-Richtlinie und Spiele

Tom Greenaway
Hongchan Choi

Im September 2017 haben wir eine anstehende Änderung für Audio bei der Richtlinie zur automatischen Wiedergabe in Chrome angekündigt. Die Richtlinienänderung wurde im Mai 2018 für Chrome 66 (stabile Version) veröffentlicht.

Nach Feedback der Web Audio-Entwickler-Community haben wir die Veröffentlichung des Web Audio-Teils der Richtlinie zur automatischen Wiedergabe verschoben, damit Entwickler mehr Zeit zum Aktualisieren ihrer Websites haben. Wir haben auch einige Änderungen an der Implementierung der Richtlinie für Web Audio vorgenommen. Dadurch wird die Anzahl der Websites reduziert, die ihren Code anpassen müssen – insbesondere Webspiele – und dadurch eine bessere Nutzererfahrung bieten.

Die Einführung dieser Richtlinienänderung ist für Chrome 71 im Dezember 2018 geplant.

Was genau bewirkt die Richtlinienänderung?

Autoplay ist die Bezeichnung für einen Inhalt, der nach dem Laden einer Webseite sofort wiedergegeben wird. Bei Websites, die ihre Inhalte voraussichtlich automatisch wiedergeben können, verhindert diese Änderung die Wiedergabe standardmäßig. In den meisten Fällen wird die Wiedergabe fortgesetzt, in anderen Fällen ist jedoch eine kleine Anpassung des Codes erforderlich. Insbesondere müssen Entwickler Code hinzufügen, mit dem ihre Inhalte fortgesetzt werden, wenn der Nutzer mit der Webseite interagiert.

Wenn der Nutzer jedoch auf eine Seite mit Autoplay-Inhalten gelangt und von einer Seite desselben Ursprungs zu dieser Seite gelangt, wird dieser Inhalt nie blockiert. Ausführlichere Beispiele findest du in unserem früheren Blogpost zur Richtlinie zur automatischen Wiedergabe.

Außerdem haben wir eine Heuristik hinzugefügt, um aus dem bisherigen Verhalten von Nutzern in Bezug auf Websites mit automatischer Audiowiedergabe zu lernen. Wir erkennen, wenn Nutzer während der meisten Websitebesuche regelmäßig Audioinhalte länger als 7 Sekunden abspielen, und aktivieren die automatische Wiedergabe für diese Website.

Dazu verwenden wir einen Index, der lokal pro Chrome-Profil auf einem Gerät gespeichert wird. Er wird nicht geräteübergreifend synchronisiert, sondern nur als Teil der anonymisierten Nutzerstatistiken freigegeben. Dieser Index wird als Media Engagement Index (MEI) bezeichnet. Sie können ihn unter chrome://media-engagement abrufen.

Der MEI erfasst, bei wie vielen Besuchen einer Website eine Audiowiedergabe mit einer Länge von mehr als 7 Sekunden erfolgt. Basierend auf dem MEI eines Nutzers können wir verstehen, ob ein Nutzer Audioinhalte von einer bestimmten Website erwartet oder nicht, und seine zukünftigen Absichten voraussehen können.

Wenn der Nutzer der Website einer Website die Audiowiedergabe häufig länger als sieben Sekunden zulässt, gehen wir in Zukunft davon aus, dass er von dieser Website das Recht zur automatischen Audiowiedergabe erwartet. Daher gewähren wir dieser Website das Recht, Audioinhalte automatisch wiederzugeben, ohne dass der Nutzer mit einem Tab der Domain interagieren muss.

Dieses Recht ist jedoch nicht auf unbestimmte Zeit garantiert. Wenn sich das Verhalten des Nutzers ändert – z.B. wenn die Audiowiedergabe unterbrochen oder der Tab innerhalb der 7-Sekunden-Grenze über mehrere Besuche hinweg geschlossen wird –, entfernen wir das Recht der Website auf Autoplay.

Sowohl die Verwendung von HTML-Medienelementen (Video und Audio) als auch von Web Audio (JavaScript-instanziierte AudioContext-Objekte) trägt zum MEI bei. Im Rahmen der Vorbereitung auf die Einführung dieser Richtlinie wird das Nutzerverhalten ab Chrome 70 im Zusammenhang mit Web Audio zum MEI beitragen. So ist sichergestellt, dass wir bereits in der Lage sind, die gewünschte Absicht des Nutzers hinsichtlich Autoplay und der von ihm häufig besuchten Websites vorherzusehen.

iFrames können nur dann das Recht zur automatischen Wiedergabe ohne Nutzerinteraktion erhalten, wenn die übergeordnete Webseite, in die der iFrame eingebettet ist, dieses Recht auf den entsprechenden iFrame ausweitet.

Änderungen verzögern, um die Community zu unterstützen

Die Web Audio-Entwicklercommunity – insbesondere die Entwickler von Webspielen und WebRTC-Entwickler – wurde bemerkt, als diese Änderung in der stabilen Chrome-Version eingeführt wurde.

Das Feedback der Community war, dass sich diese Änderung negativ auf viele Webspiele und Web-Audio-Erlebnisse auswirken würde. Insbesondere Websites, die nicht aktualisiert wurden, würden keine Audioinhalte mehr für die Nutzer abspielen. Daher entschied sich unser Team, die Änderung zu verzögern, damit Web-Audio-Entwickler mehr Zeit zum Aktualisieren ihrer Websites haben.

Außerdem haben wir uns die Zeit genommen, um:

  • Überlegen Sie sorgfältig, ob diese Richtlinienänderung die beste Vorgehensweise war oder nicht.
  • Finden Sie heraus, wie wir dazu beitragen können, die Anzahl der betroffenen Websites mit Audioinhalten zu verringern.

Beim ersten Schritt haben wir schließlich entschieden, dass die Richtlinienänderung notwendig ist, um die Nutzererfahrung für die meisten unserer Nutzer zu verbessern. Weitere Informationen dazu, welches Problem durch die Richtlinienänderung behoben wird, finden Sie im nächsten Abschnitt dieses Artikels.

Für Letzteres haben wir eine Anpassung an unserer Implementierung für Web Audio vorgenommen, wodurch sich die Anzahl der Websites verringert, die ursprünglich betroffen waren. Von den Websites, von denen wir wussten, dass sie durch die Änderung nicht richtig funktionieren – viele davon wurden als Beispiele von der Community für die Entwicklung von Webspielen bereitgestellt –, bedeutete diese Anpassung, dass über 80% von ihnen automatisch funktionierten. Unsere Analysen und Tests diese Beispielwebsites finden Sie hier. Diese neue Anpassung wird unten ausführlicher beschrieben.

Wir haben auch eine Änderung zur Unterstützung von WebRTC-Anwendungen vorgenommen. Während einer aktiven Aufnahmesitzung ist Autoplay zulässig.

Welches Problem soll durch diese Verhaltensänderung gelöst werden?

In der Vergangenheit haben Browser die Nutzer beim Verwalten von Tönen nur schlecht unterstützt. Wenn Nutzende eine Webseite öffnen und einen Ton hören, den sie nicht erwartet oder gewünscht haben, ist die User Experience schlecht. Diese schlechte User Experience ist das Problem, das wir zu lösen versuchen. Unerwünschte Geräusche sind der Hauptgrund dafür, dass Nutzer nicht möchten, dass ihr Browser Inhalte automatisch abspielt.

Manchmal möchten Nutzer jedoch, dass Inhalte automatisch wiedergegeben werden, und dann wird eine beträchtliche Anzahl von blockierten Autoplays in Chrome vom Nutzer abgespielt.

Daher sind wir davon überzeugt, dass wir die beste Nutzererfahrung bieten können, wenn wir von den Nutzern lernen und ihre Absichten für jede einzelne Website antizipieren. Wenn Nutzer dazu neigen, Inhalte einer Website wiederzugeben, werden wir die Wiedergabe von Inhalten auf dieser Website in Zukunft automatisch zulassen. Wenn Nutzer umgekehrt dazu neigen, Autoplay für Inhalte einer bestimmten Website zu unterbrechen, verhindern wir die Autoplay-Funktion für diese Inhalte standardmäßig.

Ein Vorschlag der Community besteht darin, den Ton eines Tabs stummzuschalten, anstatt die automatische Wiedergabe zu pausieren. Wir sind jedoch der Meinung, dass es besser ist, die Autoplay-Funktion zu stoppen, damit die Website weiß, dass die Autoplay-Funktion blockiert wurde, und dem Website-Entwickler die Möglichkeit geben, darauf zu reagieren. So kann es beispielsweise sein, dass einige Entwickler die Audiowiedergabe einfach stummschalten möchten. Andere möchten ihre Audioinhalte möglicherweise pausieren, bis der Nutzer aktiv mit dem Inhalt interagiert.

Neue Funktionen für Entwickler von Webspielen

Am häufigsten verwenden Entwickler das Web Audio API, indem sie zwei Objekttypen zur Wiedergabe von Audio erstellen:

Web-Audio-Entwickler erstellen einen AudioContext für die Wiedergabe von Audioinhalten. Damit die Audiowiedergabe fortgesetzt werden kann, nachdem der AudioContext durch die Autoplay-Richtlinie automatisch gesperrt wurde, muss die Funktion „resume()“ für dieses Objekt aufgerufen werden, nachdem der Nutzer mit dem Tab interagiert hat:

    const context = new AudioContext();

    // Setup an audio graph with AudioNodes and schedule playback.
    ...

    // Resume AudioContext playback when user clicks a button on the page.
    document.querySelector('button').addEventListener('click', function() {
      context.resume().then(() => {
        console.log('AudioContext playback resumed successfully');
      });
    });

Es gibt viele Schnittstellen, die von AudioNode übernommen werden. Eine davon ist die Schnittstelle AudioScheduledSourceNode. AudioNodes, die die AudioScheduledSourceNode-Schnittstelle implementieren, werden im Allgemeinen als Quellknoten bezeichnet (z. B. AudioBufferSourceNode, ConstantSourceNode und OscillatorNode). Quellknoten implementieren eine start()-Methode.

Quellknoten stellen normalerweise einzelne Audioausschnitte dar, die von Spielen gespielt werden, zum Beispiel der Ton, der abgespielt wird, wenn ein Spieler eine Münze sammelt, oder die Hintergrundmusik, die in der aktuellen Phase abgespielt wird. Spieleentwickler rufen sehr wahrscheinlich die start()-Funktion auf Quellknoten auf, wenn einer dieser Töne für das Spiel erforderlich ist.

Nachdem wir dieses häufige Muster in Webspielen erkannt hatten, beschlossen wir, unsere Implementierung wie folgt anzupassen:

Ein AudioContext wird automatisch fortgesetzt, wenn zwei Bedingungen erfüllt sind:

  • Der Nutzer hat mit einer Seite interagiert.
  • Die Methode start() eines Quellknotens wird aufgerufen.

Aufgrund dieser Änderung wird die Audiowiedergabe bei den meisten Webspielen fortgesetzt, sobald der Nutzer mit dem Spielen beginnt.

Das Web voranbringen

Um die Webplattform voranzutreiben, müssen manchmal Änderungen vorgenommen werden, die die Kompatibilität beeinträchtigen können. Leider ist die automatische Audiowiedergabe komplex und fällt in diese Kategorie der Veränderung. Dieser Wandel ist jedoch von entscheidender Bedeutung, damit das Web nicht stagniert oder seine Innovationsfähigkeit verliert.

Wir sind uns jedoch bewusst, dass Korrekturen auf Websites aus verschiedenen Gründen kurzfristig nicht immer möglich sind:

  • Webentwickler konzentrieren sich möglicherweise auf ein neues Projekt und die Wartung einer älteren Website ist nicht sofort möglich.
  • Web-Spieleportale haben möglicherweise keine Kontrolle über die Implementierung der Spiele in ihrem Katalog und die Aktualisierung von Hunderten – wenn nicht Tausenden – von Spielen kann für Publisher zeitaufwendig und teuer sein.
  • Manche Websites sind einfach sehr alt und werden – aus bestimmten Gründen – nicht mehr gepflegt, aber zu historischen Zwecken noch gehostet.

Hier sehen Sie ein kurzes JavaScript-Code-Snippet, das die Erstellung neuer AudioContext-Objekte abfängt und die Fortsetzen-Funktion dieser Objekte automatisch auslöst, wenn der Nutzer verschiedene Nutzerinteraktionen ausführt. Dieser Code sollte vor dem Erstellen von AudioContext-Objekten auf der Webseite ausgeführt werden. Sie können diesen Code beispielsweise dem Tag Ihrer Webseite hinzufügen:

(function () {
  // An array of all contexts to resume on the page
  const audioContextList = [];

  // An array of various user interaction events we should listen for
  const userInputEventNames = [
    'click',
    'contextmenu',
    'auxclick',
    'dblclick',
    'mousedown',
    'mouseup',
    'pointerup',
    'touchend',
    'keydown',
    'keyup',
  ];

  // A proxy object to intercept AudioContexts and
  // add them to the array for tracking and resuming later
  self.AudioContext = new Proxy(self.AudioContext, {
    construct(target, args) {
      const result = new target(...args);
      audioContextList.push(result);
      return result;
    },
  });

  // To resume all AudioContexts being tracked
  function resumeAllContexts(event) {
    let count = 0;

    audioContextList.forEach(context => {
      if (context.state !== 'running') {
        context.resume();
      } else {
        count++;
      }
    });

    // If all the AudioContexts have now resumed then we
    // unbind all the event listeners from the page to prevent
    // unnecessary resume attempts
    if (count == audioContextList.length) {
      userInputEventNames.forEach(eventName => {
        document.removeEventListener(eventName, resumeAllContexts);
      });
    }
  }

  // We bind the resume function for each user interaction
  // event on the page
  userInputEventNames.forEach(eventName => {
    document.addEventListener(eventName, resumeAllContexts);
  });
})();

Beachten Sie, dass dieses Code-Snippet nur dann zur Fortsetzung von AudioContexts unterstützt, die in einem iFrame instanziiert wurden, wenn dieses Code-Snippet im Inhalt des iFrames selbst enthalten ist.

Besserer Service für unsere Nutzer

Parallel zur Richtlinienänderung führen wir auch einen Mechanismus ein, mit dem Nutzer die Richtlinie für die automatische Wiedergabe deaktivieren können, wenn die automatische Lernfunktion nicht wie erwartet funktioniert oder Websites, die durch die Änderung unbrauchbar gemacht werden. Diese Änderung wird mit der neuen Richtlinie in Chrome 71 eingeführt und ist in den Toneinstellungen zu finden. Websites, auf denen der Nutzer Autoplay zulassen möchte, können der Zulassungsliste hinzugefügt werden.

Wie wird der MEI für neue Nutzer erstellt?

Wie bereits erwähnt, wird der MEI im Laufe der Zeit automatisch auf der Grundlage des Nutzerverhaltens erstellt, um die gewünschte Absicht in Bezug auf eine bestimmte Website mit Autoplay-Inhalten vorherzusehen. Jede Website hat in diesem Index eine Punktzahl zwischen null und eins. Höhere Bewertungen zeigen an, dass der Nutzer erwartet, dass Inhalte von dieser Website wiedergegeben werden.

Bei neuen Nutzerprofilen oder wenn ein Nutzer seine Browserdaten löscht, wird jedoch, anstatt Autoplay überall zu blockieren, eine Pre-Seed-Liste verwendet, die auf anonymisierten, vom Nutzer aggregierten MEI-Punktzahlen basiert, um zu bestimmen, welche Websites automatisch wiedergegeben werden können. Diese Daten bestimmen nur den Anfangszustand des MEI bei der Erstellung des Nutzerprofils. Wenn der Nutzer im Web surft und mit Websites interagiert, auf denen Autoplay-Inhalte angezeigt werden, überschreibt sein persönlicher MEI die Standardkonfiguration.

Die vorab gesetzte Website-Liste wird algorithmisch und nicht manuell zusammengestellt und jede Website kann in die Liste aufgenommen werden. Websites werden der Liste hinzugefügt, wenn genügend Nutzer, die sie besuchen, Autoplay auf dieser Website erlauben. Dieser Grenzwert ist prozentbasiert, damit größere Websites nicht bevorzugt werden.

Die richtige Balance finden

Wir haben eine neue Dokumentation veröffentlicht, die mehr Einblick in unseren Entscheidungsprozess und die Designgründe für diese Richtlinie bietet. Außerdem finden Sie hier eine neue Dokumentation zur Funktionsweise der vorab gesetzten Websiteliste.

Unsere Nutzer stehen bei uns immer an erster Stelle. Aber wir möchten auch die Webentwicklungs-Community nicht enttäuschen. Da es sich um den Browser handelt, bedeutet dies manchmal, dass diese beiden Ziele sorgfältig miteinander in Einklang gebracht werden müssen. Wir sind der Meinung, dass wir mit Chrome 71 ein Gleichgewicht zwischen den Anpassungen an der Implementierung der Richtlinie und der zusätzlichen Zeit, die wir Webaudioentwicklern zur Aktualisierung ihres Codes erhalten haben, erreichen können.

Feedback