Web-Audio, Autoplay-Richtlinie und Spiele

Tom Greenaway
Hongchan Choi

Im September 2017 haben wir eine bevorstehende Änderung am Umgang mit Audioinhalten im Zusammenhang mit der Richtlinie zum automatischen Abspielen in Chrome angekündigt. Die Richtlinienänderung wurde im Mai 2018 mit der stabilen Version von Chrome 66 veröffentlicht.

Aufgrund von Feedback von Web Audio-Entwicklern haben wir die Veröffentlichung des Web Audio-Teils der Autoplay-Richtlinie verschoben, um Entwicklern mehr Zeit für die Aktualisierung ihrer Websites zu geben. Außerdem haben wir einige Änderungen an der Implementierung der Richtlinie für Web Audio vorgenommen. Dadurch wird die Anzahl der Websites reduziert, auf denen der Code angepasst werden muss, insbesondere bei Webspielen. So wird die Nutzerfreundlichkeit verbessert.

Diese Richtlinienänderung wird voraussichtlich mit Chrome 71 im Dezember 2018 eingeführt.

Was genau ändert sich durch die Richtlinienänderung?

Als Autoplay wird ein Inhalt bezeichnet, der beim Laden einer Webseite sofort wiedergegeben wird. Auf Websites, auf denen Inhalte standardmäßig automatisch wiedergegeben werden sollten, wird die Wiedergabe durch diese Änderung standardmäßig verhindert. 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, der die Wiedergabe der Inhalte fortsetzt, wenn der Nutzer mit der Webseite interagiert.

Wenn der Nutzer jedoch eine Seite mit automatisch startenden Inhalten aufruft, die er von einer Seite desselben Ursprungs aus aufgerufen hat, werden diese Inhalte nie blockiert. Ausführlichere Beispiele finden Sie in unserem Blogpost zu den Autoplay-Richtlinien.

Außerdem haben wir eine Heuristik hinzugefügt, um aus dem bisherigen Verhalten der Nutzer in Bezug auf Websites zu lernen, auf denen Audioinhalte automatisch wiedergegeben werden. Wir erkennen, wenn Nutzer bei den meisten Besuchen einer Website Audioinhalte regelmäßig länger als 7 Sekunden laufen lassen, und aktivieren Autoplay für diese Website.

Dazu verwenden wir einen Index, der lokal pro Chrome-Profil auf einem Gerät gespeichert wird. Er wird nicht zwischen Geräten synchronisiert und nur im Rahmen der anonymisierten Nutzerstatistiken weitergegeben. Wir nennen diesen Index den Media Engagement Index (MEI). Sie können ihn unter chrome://media-engagement aufrufen.

Mit MEI wird erfasst, wie viele Besuche einer Website eine Audiowiedergabe von mehr als 7 Sekunden umfassen. Anhand der MEI eines Nutzers können wir nachvollziehen, ob er Audioinhalte von einer bestimmten Website erwartet oder nicht, und seine Absichten in Zukunft vorhersagen.

Wenn der Nutzer die Domain einer Website häufig länger als 7 Sekunden Audio abspielen lässt, gehen wir davon aus, dass er davon ausgeht, dass diese Website das Recht zum automatischen Abspielen von Audio hat. Daher gewähren wir dieser Website das Recht, Audioinhalte automatisch abzuspielen, ohne dass der Nutzer mit einem Tab aus dieser Domain interagieren muss.

Dieses Recht ist jedoch nicht unbegrenzt garantiert. Wenn das Verhalten des Nutzers wechselt, z.B. wenn er die Audiowiedergabe stoppt oder den Tab innerhalb von 7 Sekunden nach mehreren Besuchen schließt, entziehen wir der Website das Recht zum Autoplay.

Sowohl die Verwendung von HTML-Medienelementen (Video und Audio) als auch Web Audio (von JavaScript erstellte AudioContext-Objekte) tragen zum MEI bei. Zur Vorbereitung auf die Einführung dieser Richtlinie wird ab Chrome 70 das Nutzerverhalten in Bezug auf Web Audio in die MEI einbezogen. So können wir die gewünschte Absicht des Nutzers in Bezug auf die automatische Wiedergabe und die Websites, die er häufig besucht, bereits vorhersehen.

Hinweis: Iframes können das Recht zum automatischen Abspielen ohne Nutzerinteraktion nur dann erhalten, wenn die übergeordnete Webseite, in die der Iframe eingebettet ist, dieses Recht auf den entsprechenden Iframe ausweitet.

Änderungen verschieben, um die Community zu unterstützen

Die Web Audio-Entwicklergemeinschaft – insbesondere die Webgame-Entwickler und WebRTC-Entwickler – haben diese Änderung im Chrome Stable-Kanal bemerkt.

Das Community-Feedback hat gezeigt, dass viele Webspiele und Web-Audioinhalte von dieser Änderung negativ betroffen sein würden. Insbesondere würden auf vielen nicht aktualisierten Websites keine Audioinhalte mehr für Nutzer abgespielt. Daher hat unser Team beschlossen, diese Änderung zu verschieben, um Webaudio-Entwicklern mehr Zeit für die Aktualisierung ihrer Websites zu geben.

Außerdem haben wir Folgendes getan:

  • Überlegen Sie ernsthaft, ob diese Richtlinienänderung die beste Maßnahme war.
  • Wir suchen nach Möglichkeiten, die Anzahl der betroffenen Websites mit Audioinhalten zu reduzieren.

Bei der ersten Frage haben wir letztendlich entschieden, dass die Richtlinienänderung tatsächlich erforderlich ist, um die Nutzerfreundlichkeit für die Mehrheit unserer Nutzer zu verbessern. Im nächsten Abschnitt dieses Artikels erfahren Sie, welches Problem mit der Richtlinienänderung behoben wird.

Für letzteres haben wir unsere Implementierung für Web Audio angepasst, wodurch die Anzahl der ursprünglich betroffenen Websites reduziert wird. Von den Websites, die durch die Änderung nicht mehr funktionierten – viele davon wurden von der Webgame-Entwickler-Community als Beispiele zur Verfügung gestellt –, funktionierten nach dieser Anpassung über 80% automatisch. Hier finden Sie unsere Analyse und Tests dieser Beispielwebsites. Diese neue Anpassung wird unten genauer beschrieben.

Außerdem haben wir eine Änderung zur Unterstützung von WebRTC-Anwendungen vorgenommen: Solange eine aktive Aufnahmesitzung aktiv ist, ist die automatische Wiedergabe zulässig.

Welches Problem soll mit dieser Verhaltensänderung gelöst werden?

Browser haben es Nutzern bisher nicht leicht gemacht, die Audiowiedergabe zu verwalten. Wenn Nutzer eine Webseite öffnen und unerwartete oder unerwünschte Töne hören, ist die Nutzererfahrung schlecht. Dieses Problem wollen wir lösen. Unerwünschte Geräusche sind der Hauptgrund dafür, dass Nutzer nicht möchten, dass Inhalte in ihrem Browser automatisch abgespielt werden.

Manchmal möchten Nutzer jedoch, dass Inhalte automatisch wiedergegeben werden. Eine beträchtliche Anzahl der blockierten Autoplay-Funktionen in Chrome wird anschließend vom Nutzer wieder aktiviert.

Wir sind der Meinung, dass wir die beste Nutzererfahrung schaffen können, wenn wir von den Nutzern lernen und ihre Absichten auf Websiteebene antizipieren. Wenn Nutzer Inhalte von einer Website häufig abspielen lassen, werden Inhalte von dieser Website in Zukunft automatisch wiedergegeben. Wenn Nutzer hingegen häufig die automatische Wiedergabe von Inhalten einer bestimmten Website beenden, wird die automatische Wiedergabe für diese Inhalte standardmäßig verhindert.

Ein Vorschlag der Community war, die Audiowiedergabe eines Tabs stummzuschalten, anstatt die automatische Wiedergabe zu pausieren. Wir sind jedoch der Meinung, dass es besser ist, die automatische Wiedergabe zu beenden, damit die Website weiß, dass die automatische Wiedergabe blockiert wurde, und der Websiteentwickler darauf reagieren kann. Während einige Entwickler beispielsweise Audioinhalte einfach stummschalten möchten, bevorzugen andere Entwickler, dass ihre Audioinhalte pausiert werden, bis der Nutzer aktiv mit den Inhalten interagiert. Andernfalls könnte der Nutzer einen Teil der Audioinhalte verpassen.

Neue Anpassungen für Webspielentwickler

Am häufigsten verwenden Entwickler die Web Audio API, um zwei Arten von Objekten zum Abspielen von Audio zu erstellen:

Web-Audioentwickler erstellen einen AudioContext für die Audiowiedergabe. Damit die Audiowiedergabe fortgesetzt werden kann, nachdem der AudioContext aufgrund der Autoplay-Richtlinie automatisch angehalten wurde, muss die Funktion „resume()“ auf 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 abgeleitet sind, darunter die AudioScheduledSourceNode-Schnittstelle. Audio-Knoten, die die AudioScheduledSourceNode-Schnittstelle implementieren, werden allgemein als Quellknoten bezeichnet (z. B. AudioBufferSourceNode, ConstantSourceNode und OscillatorNode). Quellknoten implementieren eine start()-Methode.

Quellknoten stellen in der Regel einzelne Audio-Snippets dar, die in Spielen wiedergegeben werden, z. B. der Ton, der abgespielt wird, wenn ein Spieler eine Münze einsammelt, oder die Hintergrundmusik, die in der aktuellen Phase wiedergegeben wird. Game-Entwickler rufen die Funktion „start()“ sehr wahrscheinlich auf Quellknoten auf, wenn einer dieser Töne für das Spiel erforderlich ist.

Nachdem wir dieses häufige Muster in Webspielen erkannt hatten, haben wir unsere Implementierung an folgende Punkte angepasst:

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

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

Aufgrund dieser Änderung wird bei den meisten Webspielen jetzt die Audiowiedergabe fortgesetzt, wenn der Nutzer das Spiel startet.

Das Web voranbringen

Um die Webplattform weiterzuentwickeln, sind manchmal Änderungen erforderlich, die die Kompatibilität beeinträchtigen können. Leider ist die automatische Wiedergabe von Audioinhalten komplex und fällt in diese Kategorie. Dieser Wechsel ist jedoch entscheidend, damit das Web nicht stagniert oder seinen innovativen Vorsprung verliert.

Uns ist jedoch bewusst, dass die Behebung von Problemen auf Websites aus verschiedenen Gründen nicht immer kurzfristig möglich ist:

  • Webentwickler konzentrieren sich möglicherweise auf ein neues Projekt und die Wartung einer älteren Website ist nicht sofort möglich.
  • Web-Game-Portale haben möglicherweise keine Kontrolle über die Implementierung der Spiele in ihrem Katalog und das Aktualisieren von Hunderten, wenn nicht Tausenden von Spielen kann für Publisher zeitaufwendig und teuer sein.
  • Einige Websites sind möglicherweise einfach sehr alt und werden aus einem oder anderen Grund nicht mehr gepflegt, aber aus historischen Gründen weiterhin gehostet.

Hier ist ein kurzes JavaScript-Code-Snippet, das das Erstellen neuer AudioContext-Objekte abfängt und die Fortsetzungsfunktion dieser Objekte automatisch auslöst, wenn der Nutzer verschiedene Nutzerinteraktionen ausführt. Dieser Code sollte vor dem Erstellen von AudioContext-Objekten auf deiner Webseite ausgeführt werden. Du kannst ihn beispielsweise dem ‑Tag deiner 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);
  });
})();

Hinweis: Dieses Code-Snippet kann nicht dazu verwendet werden, AudioContexts fortzusetzen, die in einem iFrame erstellt wurden, es sei denn, es ist Teil des iFrames selbst.

Bessere Nutzerfreundlichkeit

Im Zusammenhang mit der Richtlinienänderung führen wir außerdem einen Mechanismus ein, mit dem Nutzer die Autoplay-Richtlinie deaktivieren können. Das ist in Fällen sinnvoll, in denen das maschinelle Lernen nicht wie erwartet funktioniert oder Websites durch die Änderung unbrauchbar werden. Diese Änderung wird mit der neuen Richtlinie in Chrome 71 eingeführt und kann in den Toneinstellungen gefunden werden. Websites, auf denen der Nutzer die automatische Wiedergabe zulassen möchte, können der Zulassungsliste hinzugefügt werden.

Wie wird der MEI für neue Nutzer erstellt?

Wie bereits erwähnt, wird die MEI automatisch im Laufe der Zeit basierend auf dem Nutzerverhalten erstellt, um die gewünschte Absicht in Bezug auf eine bestimmte Website mit automatisch wiedergegebenen Inhalten vorherzusagen. Jede Website erhält in diesem Index eine Punktzahl zwischen null und eins. Je höher die Bewertung, desto wahrscheinlicher ist es, dass der Nutzer erwartet, dass Inhalte von dieser Website wiedergegeben werden.

Bei neuen Nutzerprofilen oder wenn ein Nutzer seine Browserdaten löscht, wird Autoplay jedoch nicht überall blockiert. Stattdessen wird anhand einer Liste mit vorab festgelegten Websites, die auf aggregierten MEI-Werten von Nutzern basieren, ermittelt, auf welchen Websites Autoplay aktiviert werden kann. Diese Daten bestimmen nur den ursprünglichen Status der MEI beim Erstellen des Nutzerprofils. Wenn der Nutzer im Web surft und mit Websites mit automatisch abgespielten Inhalten interagiert, überschreibt sein persönlicher MEI die Standardkonfiguration.

Die Liste der vorab hinzugefügten Websites wird nicht manuell zusammengestellt, sondern algorithmisch generiert. Jede Website kann aufgenommen werden. Websites werden der Liste hinzugefügt, wenn genügend Nutzer, die diese Website besuchen, die automatische Wiedergabe auf dieser Website zulassen. Dieser Grenzwert ist prozentual, damit größere Websites nicht bevorzugt werden.

Die richtige Balance finden

Wir haben neue Dokumente veröffentlicht, die mehr Einblick in unseren Entscheidungsprozess und die Designgrundlage dieser Richtlinie geben. Außerdem gibt es eine neue Dokumentation zur Funktionsweise der vorab ausgelieferten Websiteliste.

Wir stellen unsere Nutzer immer an die erste Stelle, möchten aber auch die Webentwicklungs-Community nicht enttäuschen. Manchmal bedeutet das, dass diese beiden Ziele sorgfältig aufeinander abgestimmt werden müssen. Wir sind zuversichtlich, dass wir mit unseren Anpassungen an der Implementierung der Richtlinie und der zusätzlichen Zeit, die wir Web-Audio-Entwicklern für die Aktualisierung ihres Codes eingeräumt haben, dieses Gleichgewicht mit Chrome 71 erreichen werden.

Feedback