We wrześniu 2017 r. ogłosiliśmy nadchodzącą zmianę sposobu obsługi dźwięku w ramach zasad dotyczących automatycznego odtwarzania w Chrome. Zmiana zasad została wprowadzona w Chrome 66 w wersji stabilnej w maju 2018 r.
Po otrzymaniu opinii od społeczności programistów Web Audio opóźniliśmy wprowadzenie zasad autoodtwarzania w przypadku dźwięku w internecie, aby dać deweloperom więcej czasu na zaktualizowanie swoich witryn. Wprowadziliśmy też pewne zmiany w wdrożeniu zasad dotyczących dźwięku w internecie, które zmniejszą liczbę witryn, które muszą dostosować swój kod (zwłaszcza gry internetowe), a tym samym zapewnią lepsze wrażenia użytkownikom.
Ta zmiana zasad zostanie wdrożona w Chrome 71 w grudniu 2018 r.
Jakie dokładnie zmiany wprowadzają te zasady?
Automatyczne odtwarzanie to nazwa treści, które odtwarzają się natychmiast po załadowaniu strony internetowej. W przypadku witryn, które mają automatycznie odtwarzać treści, ta zmiana spowoduje, że odtwarzanie będzie domyślnie wyłączone. W większości przypadków odtwarzanie zostanie wznowione, ale w niektórych przypadkach konieczne będzie niewielkie dostosowanie kodu. W szczególności deweloperzy muszą dodać kod, który wznawia wyświetlanie treści, gdy użytkownik wejdzie w interakcję ze stroną internetową.
Jeśli jednak użytkownik wejdzie na stronę z treściami automatycznie odtwarzanymi i przejdzie na nią z innej strony tego samego pochodzenia, te treści nigdy nie zostaną zablokowane. Aby poznać szczegóły, przeczytaj nasz wcześniejszy wpis na blogu dotyczący zasad dotyczących automatycznego odtwarzania.
Dodatkowo dodaliśmy heurystyki, które uczą się na podstawie wcześniejszego zachowania użytkowników w przypadku witryn z automatycznym odtwarzaniem dźwięku. Wykrywanie, czy użytkownicy regularnie pozwalają na odtwarzanie dźwięku przez ponad 7 sekund podczas większości wizyt w witrynie, i włączanie automatycznego odtwarzania w tej witrynie.
Wykorzystujemy do tego indeks, który jest przechowywany lokalnie na urządzeniu w przypadku każdego profilu Chrome – nie jest on synchronizowany między urządzeniami i jest udostępniany tylko w ramach anonimowych statystyk użytkowników. Nazywamy go indeksem zaangażowania w multimedia (MEI) i możesz go wyświetlić na stronie chrome://media-engagement.
MEI śledzi, ile wizyt w witrynie obejmuje odtwarzanie dźwięku trwające ponad 7 sekund. Na podstawie MEI użytkownika możemy określić, czy użytkownik oczekuje dźwięku w określonej witrynie, i przewidywać jego zamiary w przyszłości.
Jeśli użytkownik często pozwala, aby domena witryny odtwarzała dźwięk przez ponad 7 sekund, zakładamy, że w przyszłości oczekuje, że ta witryna będzie miała prawo do automatycznego odtwarzania dźwięku. Dlatego przyznajemy tej witrynie prawo do automatycznego odtwarzania dźwięku bez wymagania od użytkownika interakcji z zakładką z tej domeny.
Nie oznacza to jednak, że będziesz mieć do tego nieograniczone prawo. Jeśli zachowanie użytkownika się zmieni, np. zatrzyma odtwarzanie dźwięku lub zamknie kartę w ciągu 7 sekund od rozpoczęcia wizyty, odbieramy witrynie prawo do autoodtwarzania.
Do MEI przyczynia się zarówno użycie elementów HTML multimediów (wideo i dźwięk), jak i Web Audio (obiekty AudioContext zainicjowane przez JavaScript). W ramach przygotowań do wdrożenia tej zasady zachowanie użytkowników związane z audio w internecie będzie wpływać na MEI od wersji Chrome 70. Dzięki temu będziemy mogli przewidzieć intencję użytkownika w sytuacji, gdy włączy automatyczne odtwarzanie, i strona, którą najczęściej odwiedza.
Pamiętaj, że elementy iframe mogą uzyskać prawo do automatycznego odtwarzania bez udziału użytkownika tylko wtedy, gdy strona nadrzędna, na której są one umieszczone, rozszerza to prawo na dany element iframe.
Opóźnienie wprowadzenia zmian w trosce o społeczność
Społeczność deweloperów Web Audio, zwłaszcza deweloperzy gier internetowych i WebRTC, zauważyła tę zmianę w Chrome na stabilnym kanale.
Z opinii społeczności wynikało, że ta zmiana negatywnie wpłynie na wiele gier i dźwięków w internecie. W szczególności wiele nieaktualizowanych witryn przestałoby odtwarzać dźwięki. Dlatego nasz zespół zdecydował się wstrzymać z tą zmianą, aby dać deweloperom dźwięku internetowego więcej czasu na zaktualizowanie swoich witryn.
Dodatkowo wykorzystaliśmy ten czas na:
- Zastanów się, czy zmiana zasad była najlepszym rozwiązaniem.
- Dowiedz się, jak możemy pomóc w zmniejszeniu liczby witryn z dźwiękiem, na które wpłynie zmiana.
W przypadku pierwszej z nich ostatecznie uznaliśmy, że zmiana zasad jest rzeczywiście konieczna, aby poprawić wrażenia większości użytkowników. Więcej informacji o tym, jaki problem rozwiązuje ta zmiana zasad, znajdziesz w następnej sekcji tego artykułu.
W tym celu wprowadziliśmy korektę w implementacji funkcji Web Audio, która zmniejszy liczbę witryn, na które pierwotnie wpłynął problem. Z tych witryn, które wiemy, że zostały uszkodzone przez zmianę (wiele z nich zostało podanych jako przykłady przez społeczność twórców gier internetowych), ponad 80% będzie działać automatycznie. Nasze analizy i testy dotyczące tych przykładowych witryn możesz zobaczyć tutaj. Poniżej znajdziesz więcej informacji o tej zmianie.
Wprowadziliśmy też zmianę, aby obsługiwać aplikacje WebRTC. Podczas aktywnej sesji przechwytywania autoodtwarzanie będzie dozwolone.
Jaki problem ma rozwiązać ta zmiana zachowania?
Przeglądarki nie zawsze pomagają użytkownikom w zarządzaniu dźwiękiem. Gdy użytkownicy otwierają stronę internetową i słyszą nieoczekiwany dźwięk, może to negatywnie wpłynąć na ich wrażenia. Złe wrażenia użytkowników to problem, który próbujemy rozwiązać. Głównym powodem, dla którego użytkownicy nie chcą, aby przeglądarka automatycznie odtwarzała treści, jest niechciany hałas.
Czasami jednak użytkownicy chcą, aby treści były odtwarzane automatycznie, a znacząca liczba zablokowanych w Chrome automatycznych odtwarzań jest następnie odtwarzana przez użytkownika.
Dlatego uważamy, że dzięki uczeniu się od użytkowników i przewidywaniu ich zamiarów w poszczególnych witrynach możemy zapewnić im jak najlepsze wrażenia. Jeśli użytkownicy często odtwarzają treści z witryny, w przyszłości będziemy automatycznie odtwarzać treści z tej witryny. Jeśli użytkownicy często przerywają autoodtwarzanie treści z określonej witryny, będziemy domyślnie blokować autoodtwarzanie takich treści.
Jedna z propozycji społeczności dotyczyła wyciszenia dźwięku na karcie zamiast wstrzymywania automatycznego odtwarzania. Uważamy jednak, że lepiej jest zatrzymać autoodtwarzanie, aby witryna wiedziała, że autoodtwarzanie zostało zablokowane, i aby deweloper witryny mógł na to zareagować. Przykładowo niektórzy deweloperzy mogą chcieć po prostu wyciszyć dźwięk, podczas gdy inni mogą preferować wstrzymanie treści audio do momentu, gdy użytkownik zacznie aktywnie z nimi współpracować. W przeciwnym razie może on przegapić część dźwięku.
Nowe zmiany ułatwiające życie twórcom gier internetowych
Deweloperzy najczęściej korzystają z Web Audio API, tworząc 2 rodzaje obiektów do odtwarzania dźwięku:
- AudioContext
- oraz AudioNodes, które są dołączone do kontekstu.
Deweloperzy dźwięku w internecie będą tworzyć AudioContext do odtwarzania dźwięku. Aby wznowić odtwarzanie dźwięku po automatycznym zawieszeniu AudioContext przez zasady autoodtwarzania, należy wywołać funkcję resume() na tym obiekcie 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');
});
});
Istnieje wiele interfejsów, które dziedziczą po AudioNode, jednym z nich jest interfejs AudioScheduledSourceNode. Węzły AudioNodes, które implementują interfejs AudioScheduledSourceNode, są zwykle nazywane węzłami źródłowymi (np. AudioBufferSourceNode, ConstantSourceNode i OscillatorNode). Węzły źródłowe implementują metodę start().
Źródłowe węzły zwykle reprezentują poszczególne fragmenty dźwięku odtwarzane w grze, np. dźwięk odtwarzany, gdy gracz zbiera monetę, lub muzyka w tle odtwarzana na bieżącym etapie. Deweloperzy gier prawdopodobnie wywołują funkcję start() w węzłach źródłowych, gdy w grze potrzebny jest któryś z tych dźwięków.
Gdy zauważyliśmy ten powszechny w grach internetowych wzorzec, postanowiliśmy dostosować nasze rozwiązanie do:
Kontekst audio zostanie wznowiony automatycznie, gdy zostaną spełnione 2 warunki:
- Użytkownik wchodzi w interakcję ze stroną.
- Wywoływana jest metoda start() węzła źródła.
Dzięki tej zmianie większość gier internetowych będzie teraz wznawiać odtwarzanie dźwięku, gdy użytkownik zacznie grać.
Rozwój internetu
Aby rozwijać platformę internetową, czasami trzeba wprowadzić zmiany, które mogą spowodować utratę zgodności. Niestety automatyczne odtwarzanie dźwięku jest złożone i wchodzi w ramy tej kategorii zmian. Jednak dokonanie tego przesunięcia jest kluczowe, aby internet nie stał w miejscu ani nie tracił innowacyjności.
Zdajemy sobie jednak sprawę, że stosowanie poprawek w witrynach nie zawsze jest możliwe w krótkim czasie z różnych powodów:
- Deweloperzy witryn internetowych mogą być zajęci nowym projektem, więc konserwacja starszej witryny może nie być możliwa od razu.
- Portale z grami internetowymi mogą nie mieć kontroli nad implementacją gier w swoim katalogu, a aktualizowanie setek, a czasem nawet tysięcy gier może być czasochłonne i drogie dla wydawców.
- Niektóre witryny mogą być po prostu bardzo stare i z różnych powodów nie są już aktualizowane, ale nadal są hostowane ze względów historycznych.
Oto krótki fragment kodu JavaScriptu, który przechwytuje tworzenie nowych obiektów AudioContext i automatycznie uruchamia funkcję resume tych obiektów, gdy użytkownik wykonuje różne interakcje. Ten kod powinien zostać wykonany przed utworzeniem dowolnych obiektów AudioContext na stronie internetowej. Możesz go na przykład dodać do tagu strony internetowej:
(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);
});
})();
Pamiętaj, że ten fragment kodu nie pomoże Ci wznowić AudioContextów, które zostały zainicjowane w ramce iframe, chyba że ten fragment kodu jest uwzględniony w zakresie treści samej ramki iframe.
lepsza obsługa użytkowników;
Wraz ze zmianą zasad wprowadzamy też mechanizm, który umożliwia użytkownikom wyłączenie zasad dotyczących automatycznego odtwarzania. Ma to na celu rozwiązanie sytuacji, w których automatyczne uczenie się nie działa zgodnie z oczekiwaniami, lub gdy zmiany uniemożliwiają korzystanie z pewnych witryn. Ta zmiana zostanie wprowadzona wraz z nową zasadą w Chrome 71 i będzie dostępna w Ustawieniach dźwięku. Na liście Dozwolone można dodawać witryny, na których użytkownik chce zezwolić na automatyczne odtwarzanie.
Jak jest konstruowany MEI w przypadku nowych użytkowników?
Jak wspomnieliśmy wcześniej, z czasem automatycznie tworzymy wskaźnik MEI na podstawie zachowań użytkownika, aby przewidzieć jego intencje dotyczące danej witryny z treściami odtwarzanymi automatycznie. Każda witryna ma w tym indeksie wynik od 0 do 1. Wyższe wyniki wskazują, że użytkownik oczekuje odtwarzania treści z tej witryny.
Jednak w przypadku nowych profili użytkowników lub gdy użytkownik usunie dane przeglądania, zamiast blokowania autoodtwarzania wszędzie, do określenia, które witryny mogą korzystać z autoodtwarzania, używana jest lista z uprzednio zdefiniowanych wartości na podstawie zagregowanych wyników MEI anonimowych użytkowników. Te dane określają tylko początkowy stan MEI podczas tworzenia profilu użytkownika. Gdy użytkownik przegląda internet i interaguje się z witrynami zawierającymi treści z autoodtwarzaniem, jego osobisty MEI zastępuje domyślną konfigurację.
Lista witryn z wstępnie wypełnionymi danymi jest generowana algorytmicznie, a nie ręcznie, i może zawierać dowolną witrynę. Witryny są dodawane do listy, jeśli wystarczająca liczba użytkowników odwiedzających tę witrynę zezwala na automatyczne odtwarzanie. Ten próg jest wyrażony w procentach, aby nie faworyzować większych witryn.
Znajdowanie równowagi
Opublikowaliśmy nową dokumentację, aby lepiej poznać proces podejmowania decyzji i uzasadnienie projektu, który leży u podłoża tych zasad. Dodano też nową dokumentację na temat działania listy witryn z wstępnie wypełnionymi danymi.
Zawsze stawiamy użytkowników na pierwszym miejscu, ale nie chcemy też zawieść społeczności programistów. Czasami w przypadku przeglądarki te 2 cele muszą być starannie zrównoważone. Wierzymy, że dzięki zmianom w wdrożeniu zasad i dodatkowemu czasowi, jaki mieliśmy na przekazanie deweloperom dźwięku internetowego informacji o konieczności zaktualizowania kodu, w Chrome 71 osiągniemy równowagę.