We wrześniu 2017 roku ogłosiliśmy nadchodzącą zmianę w sposobie obsługi dźwięku na podstawie zasad zachowania autoodtwarzania w Chrome. Zmiana zasad została wprowadzona w stabilnej wersji Chrome 66 w maju 2018 roku.
Na podstawie opinii społeczności programistów Web Audio opóźniliśmy udostępnienie części zasad dotyczących autoodtwarzania, aby dać deweloperom więcej czasu na zaktualizowanie witryn. Wprowadziliśmy również pewne zmiany w implementacji zasad dotyczących Web Audio, co pozwoli ograniczyć liczbę witryn wymagających dostosowywania kodu – zwłaszcza gier internetowych – i zwiększyć wygodę użytkowników.
Ta zmiana zasad jest zaplanowana na wdrożenie Chrome 71 w grudniu 2018 roku.
Na czym polega zmiana zasad?
Autoodtwarzanie to nazwa nadana fragmentowi treści, który jest odtwarzany natychmiast po wczytaniu strony internetowej. W przypadku stron, które powinny mieć możliwość automatycznego odtwarzania treści, ta zmiana domyślnie uniemożliwi odtwarzanie. W większości przypadków odtwarzanie zostanie wznowione, ale w innych konieczne będzie niewielkie dostosowanie kodu. W szczególności deweloperzy muszą dodać kod, który wznawia działanie treści w przypadku interakcji użytkownika ze stroną internetową.
Jeśli jednak użytkownik wejdzie na stronę z treścią autoodtwarzaną i przejdzie na tę stronę ze strony tego samego pochodzenia, treść nigdy nie zostanie zablokowana. Bardziej szczegółowe przykłady znajdziesz we wcześniejszym poście na blogu na temat zasad autoodtwarzania.
Dodaliśmy też funkcję heurystyczną, która uczy się na podstawie wcześniejszych zachowań użytkowników dotyczących witryn, w których automatycznie odtwarzany jest dźwięk. Wykrywamy, kiedy użytkownicy regularnie odtwarzają dźwięk przez ponad 7 sekund podczas większości wizyt na stronie i włączasz autoodtwarzanie na tej stronie.
Używamy do tego indeksu zapisanego lokalnie dla profilu Chrome na urządzeniu – nie jest on synchronizowany między urządzeniami i udostępniany tylko w ramach zanonimizowanych statystyk użytkowników. Nazywamy go indeksem zaangażowania w media (Media Engagement Index, MEI). Jest on dostępny na stronie chrome://media-engagement.
MEI rejestruje, ile wizyt w witrynie obejmuje odtwarzanie dźwięku dłuższych niż 7 sekund. Na podstawie wskaźnika MEI użytkownika uważamy, że jesteśmy w stanie zrozumieć, czy użytkownik oczekuje dźwięku z danej witryny, czy nie – i przewidujemy zamiary użytkownika w przyszłości.
Jeśli użytkownik często pozwala na odtwarzanie dźwięku w domenie witryny przez ponad 7 sekund, zakładamy, że w przyszłości użytkownik spodziewa się, że ta witryna będzie miała prawo do autoodtwarzania dźwięku. Dlatego przyznajemy tej witrynie prawo do automatycznego odtwarzania dźwięku bez konieczności interakcji użytkownika z kartą należącą do tej domeny.
To prawo nie jest jednak gwarantowane bezterminowo. Jeśli w ciągu kilku wizyt użytkownik zmieni sposób działania, np. zatrzyma odtwarzanie dźwięku lub zamkniesz kartę przed upływem 7 sekund, usuniemy prawo witryny do autoodtwarzania.
Zarówno wykorzystanie multimediów HTML (wideo i audio) jak i Web Audio (obiekty AudioContext utworzone w języku JavaScript) będzie miało wpływ na wskaźnik MEI. W ramach przygotowań do wdrożenia tych zasad zachowanie użytkowników w odniesieniu do Web Audio zacznie mieć wpływ na wskaźnik MEI od wersji Chrome 70. Dzięki temu będziemy w stanie przewidywać zamiary użytkowników dotyczące autoodtwarzania i stron, które często odwiedzają.
Pamiętaj, że elementy iframe mogą uzyskać prawo do autoodtwarzania bez interakcji z użytkownikiem tylko wtedy, gdy nadrzędna strona internetowa, która zawiera element iframe, rozszerza to prawo do danego elementu iframe.
Opóźnianie zmian w celu wsparcia społeczności
Społeczność programistów Web Audio – w szczególności deweloperów gier internetowych i deweloperów WebRTC – zauważyła tę zmianę w wersji stabilnej Chrome.
Opinie społeczności były zdania, że ta zmiana wpłynie negatywnie na wiele gier internetowych i doświadczeń audio w internecie – w szczególności na wielu stronach, które nie zostały zaktualizowane, przestałyby odtwarzać dźwięk użytkownikom. W związku z tym nasz zespół uznał, że trzeba opóźnić tę zmianę, aby dać deweloperom audio więcej czasu na aktualizację stron internetowych.
W tym czasie skupiliśmy się też na:
- Zastanów się, czy zmiana zasad była najlepszym rozwiązaniem.
- Dowiedz się, jak możemy pomóc w zmniejszeniu liczby stron z dźwiękiem, na których może to mieć wpływ.
W przypadku pierwszego z nich ostatecznie doszliśmy do wniosku, że zmiana zasad jest konieczna, by poprawić wygodę większości użytkowników. Więcej informacji o tym, jaki problem rozwiązuje zmiana zasad, znajdziesz w następnej sekcji tego artykułu.
W tym drugim przypadku wprowadziliśmy zmiany w implementacji Web Audio, co zmniejszy liczbę stron, na których występował pierwotnie. Spośród znanych witryn zepsuło je – wiele z nich podało jako przykłady przez społeczność twórców gier internetowych – dzięki tej zmianie ponad 80% z nich działało automatycznie. Nasze analizy i testy tych przykładowych witryn znajdziesz tutaj. Więcej informacji o nowym dostosowaniu znajdziesz poniżej.
Wprowadziliśmy też zmianę dotyczącą obsługi aplikacji WebRTC. Gdy sesja przechwytywania jest aktywna, autoodtwarzanie jest dopuszczalne.
Jaki problem ma rozwiązać ta zmiana zachowania?
Przeglądarki w przeszłości niezbyt dobrze wspierały użytkowników w zarządzaniu dźwiękiem. Gdy użytkownicy otwierają stronę internetową i otrzymują nieoczekiwany lub oczekiwany dźwięk, źle wpływają na wrażenia użytkowników. To problem, który staramy się rozwiązać. Niechciany szum to główny powód, dla którego użytkownicy nie chcą, aby przeglądarki automatycznie odtwarzały treści.
Czasami jednak użytkownicy chcą, aby treści były autoodtwarzane i użytkownik może odtwarzać znaczną liczbę zablokowanych autoodtwarzań w Chrome.
Dlatego wierzymy, że ucząc się od użytkowników i przewidując ich zamiary w przypadku poszczególnych witryn, możemy zapewniać użytkownikom jak najlepsze wrażenia. Jeśli użytkownicy na ogół pozwalają na odtwarzanie treści z witryny, będziemy w przyszłości automatycznie odtwarzać treści z tej witryny. Jeśli natomiast użytkownicy zwykle zatrzymują autoodtwarzanie treści z danej witryny, autoodtwarzanie tego typu treści będzie domyślnie zablokowane.
Jedną z propozycji społeczności jest wyciszenie dźwięku z karty zamiast wstrzymywania autoodtwarzania. Uważamy jednak, że lepiej jest zatrzymać autoodtwarzanie, aby witryna wiedziała, że autoodtwarzanie została zablokowana, i pozwolić deweloperowi strony na zareagowanie na to. Na przykład niektórzy programiści chcą po prostu wyciszyć dźwięk, inni wolą, aby ich treści audio były wstrzymywane do czasu, aż użytkownik aktywnie się z nimi wejdzie w interakcję – w przeciwnym razie użytkownik może nie zauważyć części dźwięku.
Nowe usprawnienia ułatwiające deweloperom gier internetowych
Deweloperzy najczęściej korzystają z interfejsu Web Audio API, tworząc 2 rodzaje obiektów do odtwarzania dźwięku:
- AudioContext
- Oraz AudioNodes, które są dołączone do kontekstu,
Programiści treści internetowych utworzą kontekst audio do odtwarzania dźwięku. Aby wznowić dźwięk po tym, jak zasady autoodtwarzania automatycznie zawiesiły element AudioContext, użytkownik musi wywołać funkcję wznawiania() w przypadku tego obiektu po interakcji użytkownika z kartą:
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');
});
});
Wiele interfejsów dziedziczy dane z AudioNode. Jednym z nich jest interfejs AudioScheduledSourceNode. Węzły audio, które implementują interfejs AudioScheduleSourceNode, są często nazywane węzłami źródłowymi (np. AudioBufferSourceNode, ConstantSourceNode i OscillatorNode). Węzły źródłowe implementują metodę start().
Węzły źródłowe zwykle reprezentują poszczególne fragmenty dźwiękowe używane w grze, np. dźwięk odtwarzany, gdy gracz zbiera monetę, lub muzyka w tle odtwarzana na danej etapie. Bardzo prawdopodobne jest, że deweloperzy gier będą wywoływać funkcję start() w węzłach źródłowych za każdym razem, gdy któryś z tych dźwięków jest potrzebny w grze.
Gdy już rozpoznaliśmy ten typowy schemat w grach internetowych, postanowiliśmy dostosować naszą implementację do tej reguły:
Element AudioContext zostanie wznowiony automatycznie, gdy zostaną spełnione 2 warunki:
- Użytkownik wszedł w interakcję ze stroną.
- Wywoływana jest metoda start() węzła źródłowego.
W związku z tą zmianą w większości gier internetowych dźwięk zostanie wznowiony, gdy użytkownik zacznie grać.
Przyspieszanie rozwoju internetu
Aby przyspieszyć rozwój platformy internetowej, czasami trzeba wprowadzić zmiany, które mogą spowodować brak zgodności. Niestety autoodtwarzanie dźwięku jest złożone i należy do tej kategorii zmian. Jednak wprowadzenie tych zmian ma kluczowe znaczenie dla zapewnienia, że internet nie utknie w miejscu lub nie straci swojej innowacyjnej przewagi.
Zdajemy sobie jednak sprawę, że stosowanie poprawek w witrynach nie zawsze jest możliwe w krótkiej perspektywie z różnych powodów:
- Deweloperzy mogą skupić się na nowym projekcie, a utrzymanie starszej witryny nie jest możliwe od razu.
- Portale z grami internetowymi mogą nie mieć kontroli nad implementacją gier w ich katalogu, a aktualizowanie setek, a nawet tysięcy gier może być czasochłonne i kosztowne dla wydawców.
- Niektóre witryny mogą być po prostu bardzo stare i z jakiegoś powodu nie są już obsługiwane, ale nadal są hostowane w celach historycznych.
Oto krótki fragment kodu JavaScript, który przechwytuje tworzenie nowych obiektów AudioContext i automatycznie aktywuje funkcję wznawiania tych obiektów, gdy użytkownik wykona różne interakcje z użytkownikiem. Ten kod należy wykonać przed utworzeniem obiektów AudioContext na stronie internetowej – na przykład dodać ten kod do tagu strony:
(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);
});
})();
Warto zauważyć, że ten fragment kodu nie pomaga we wznawianiu elementów AudioContexts utworzonych w elemencie iframe, chyba że fragment ten zostanie dołączony do zakresu treści elementu iframe.
Lepsza obsługa użytkowników
W związku ze zmianą zasad wprowadzamy także mechanizm umożliwiający użytkownikom wyłączenie zasady autoodtwarzania. Pozwoli to uwzględnić przypadki, w których automatyczna uczenie się nie działa zgodnie z oczekiwaniami, oraz w przypadku witryn, które po zmianie staną się bezużyteczne. Ta zmiana zostanie wprowadzona w Chrome 71 wraz z nowymi zasadami. Można ją znaleźć w Ustawieniach dźwięku. Witryny, w przypadku których użytkownik chce zezwolić na autoodtwarzanie, można dodać do listy dozwolonych.
Jak jest zbudowany wskaźnik MEI dla nowych użytkowników?
Jak już wspomnieliśmy, wskaźnik MEI tworzymy automatycznie na podstawie zachowań użytkowników, aby przewidywać pożądane intencje dotyczące danej witryny z treściami autoodtwarzanymi. Każda witryna ma w tym indeksie wynik od 0 do 1. Wyższe wyniki wskazują, że użytkownik oczekuje, że treść danej witryny zostanie odtworzona.
Jeśli jednak w przypadku nowych profili użytkowników lub jeśli użytkownik wyczyści swoje dane przeglądania, to zamiast blokować autoodtwarzanie we wszystkich miejscach, do określenia, które witryny mogą autoodtwarzać, używana jest wstępnie wypełniona lista oparta na zanonimizowanych zbiorczych ocenach MEI użytkowników. Te dane określają tylko początkowy stan MEI podczas tworzenia profilu użytkownika. Gdy użytkownik przegląda internet i wchodzi w interakcję z witrynami z autoodtwarzanymi treściami, jego prywatny wskaźnik MEI zastępuje konfigurację domyślną.
Wstępnie wypełniona lista witryn jest generowana przez algorytm, a nie ręcznie, a każda witryna może zostać uwzględniona. Witryny są dodawane do listy, jeśli wystarczająca liczba użytkowników, którzy odwiedzają daną witrynę, zezwala na autoodtwarzanie. Próg ten jest wartością procentową, aby nie faworyzować większych witryn.
Znajdowanie równowagi
Opublikowaliśmy nową dokumentację, aby lepiej wyjaśnić nasz proces podejmowania decyzji i uzasadnienie projektu stojące za tymi zasadami. a także nową dokumentację na temat sposobu działania wstępnie wypełnionej listy witryn.
Zawsze na pierwszym miejscu stawiamy naszych użytkowników, ale nie chcemy też zawieść społeczności twórców stron internetowych. Czasem bycie przeglądarką wymaga zachowania równowagi między tymi 2 celami. Jesteśmy przekonani, że dzięki korektom w zakresie implementacji tych zasad i dodatkowym czasom, które zapewniliśmy deweloperom treści audio na potrzeby aktualizacji kodu, w Chrome w wersji 71 uda nam się osiągnąć tę równowagę.