A settembre 2017 abbiamo annunciato un'imminente modifica relativa alla gestione dell'audio con le norme relative al comportamento della riproduzione automatica in Chrome. La modifica dei criteri è stata rilasciata con la versione stabile di Chrome 66 a maggio 2018.
In seguito al feedback ricevuto dalla community di sviluppo di Web Audio, abbiamo ritardato il rilascio della parte delle norme sulla riproduzione automatica in Web Audio per dare agli sviluppatori più tempo per aggiornare i loro siti web. Inoltre, abbiamo apportato alcune modifiche all'implementazione delle norme per Web Audio che ridurranno il numero di siti web che devono modificare il proprio codice, in particolare i giochi web, e quindi offriranno una migliore esperienza ai nostri utenti.
Questa modifica ai criteri è ora prevista per l'implementazione su Chrome 71 a dicembre 2018.
In cosa consiste esattamente la modifica della norma?
Riproduzione automatica è il nome assegnato a un contenuto che viene riprodotto immediatamente al caricamento di una pagina web. Per i siti web che dovrebbero poter riprodurre automaticamente i contenuti, questa modifica impedirà la riproduzione per impostazione predefinita. Nella maggior parte dei casi, la riproduzione riprenderà, ma in altri casi sarà necessaria una piccola modifica al codice. In particolare, gli sviluppatori devono aggiungere codice che riprenda i loro contenuti se l'utente interagisce con la pagina web.
Tuttavia, se l'utente arriva a una pagina con contenuti a riproduzione automatica e ha raggiunto quella pagina da una pagina con la stessa origine, quel contenuto non verrà mai bloccato. Per esempi più dettagliati, leggi il nostro post del blog precedente sulle norme relative alla riproduzione automatica.
Inoltre, abbiamo aggiunto un'euristica che apprende dal comportamento passato degli utenti in relazione ai siti web con riproduzione automatica dell'audio. Rilevamo quando gli utenti lasciano regolarmente la riproduzione audio per più di 7 secondi durante la maggior parte delle loro visite a un sito web e attiviamo la riproduzione automatica per il sito web.
Per farlo, utilizziamo un indice che viene memorizzato localmente per ciascun profilo Chrome su un dispositivo, non viene sincronizzato tra più dispositivi e viene condiviso soltanto nell'ambito delle statistiche anonimizzate relative agli utenti. Questo indice viene chiamato Media Engagement Index (MEI) e puoi visualizzarlo tramite chrome://media-engagement.
Questo strumento tiene traccia del numero di visite a un sito che includono la riproduzione audio di durata superiore a 7 secondi. In base alle MEI di un utente, riteniamo di essere in grado di capire se un utente si aspetta o meno l'audio da un determinato sito web e di anticipare le sue intenzioni in futuro.
Se l'utente consente spesso al dominio di un sito web di riprodurre audio per più di 7 secondi, presupponiamo che in futuro l'utente si aspetti che il sito web abbia il diritto di riprodurre automaticamente l'audio. Pertanto, concediamo a questo sito web il diritto di riprodurre automaticamente l'audio senza che l'utente debba interagire con una scheda di quel dominio.
Tuttavia, questo diritto non è garantito a tempo indeterminato. Se il comportamento dell'utente cambia, ad esempio interrompendo la riproduzione dell'audio o chiudendo la scheda entro la soglia dei 7 secondi nel corso di diverse visite, rimuoviamo il diritto di riproduzione automatica del sito web.
L'utilizzo di elementi multimediali HTML (video e audio) e Web Audio (oggetti AudioContext creati con un'istanza JavaScript) contribuirà all'MEI. In preparazione all'implementazione di questo criterio, il comportamento degli utenti in relazione a Web Audio inizierà a contribuire all'MEI a partire da Chrome 70. In questo modo saremo già in grado di prevedere l'intenzione desiderata dell'utente in merito alla riproduzione automatica e ai siti web che visita più di frequente.
Tieni presente che gli iframe possono ottenere il diritto alla riproduzione automatica senza interazione dell'utente solo se la pagina web principale che incorpora l'iframe estende questo diritto all'iframe specificato.
Ritardo della modifica a sostegno della community
La community di sviluppatori di web audio, in particolare gli sviluppatori di giochi web e gli sviluppatori WebRTC di questa community, si è accorta quando è apparsa questa modifica nel canale stabile di Chrome.
Dal feedback della community è emerso che molti giochi web ed esperienze audio sul web sarebbero stati influenzati negativamente da questa modifica; in particolare, molti siti che non erano stati aggiornati non avrebbero più riprodotto audio agli utenti. Di conseguenza, il nostro team ha deciso che vale la pena ritardare questa modifica per dare agli sviluppatori audio web più tempo per aggiornare i propri siti web.
Inoltre, lo abbiamo dedicato a:
- Valuta seriamente se questa modifica alle norme sia stata la migliore linea d'azione o meno.
- Scopri come potremmo aiutarti a ridurre il numero di siti web con audio che potrebbero essere interessati.
Nel primo caso, alla fine abbiamo deciso che la modifica delle norme è effettivamente necessaria per migliorare l'esperienza per la maggior parte dei nostri utenti. Per ulteriori dettagli sul problema che la modifica alle norme sta risolvendo, consulta la prossima sezione di questo articolo.
Per quest'ultimo, abbiamo apportato una modifica alla nostra implementazione per Web Audio che ridurrà il numero di siti web originariamente interessati. Dei siti di cui sapevamo che erano stati interrotti a causa del cambiamento, molti dei quali forniti come esempi dalla community di sviluppo di giochi web, questo adeguamento significava che oltre l'80% di loro avrebbe funzionato automaticamente. Le nostre analisi e test di questi siti di esempio possono essere visualizzati qui. Questo nuovo aggiustamento viene descritto più dettagliatamente di seguito.
Abbiamo anche apportato una modifica per supportare le applicazioni WebRTC; la riproduzione automatica sarà consentita anche se è presente una sessione di acquisizione attiva.
Quale problema intende risolvere questo cambiamento del comportamento?
Storicamente i browser non hanno aiutato l'utente a gestire l'audio. Quando gli utenti aprono una pagina web e ricevono un suono che non si aspettavano o non volevano, l'esperienza utente è scadente. Questa esperienza utente scadente è il problema che stiamo cercando di risolvere. Il rumore indesiderato è il motivo principale per cui gli utenti non vogliono che il loro browser riproduca automaticamente i contenuti.
Tuttavia, a volte gli utenti vogliono che i contenuti vengano riprodotti automaticamente e un numero significativo di riproduzioni automatiche bloccate in Chrome viene successivamente riprodotto dall'utente.
Pertanto, crediamo che imparando dall'utente e anticipando le sue intenzioni sui singoli siti web possiamo creare la migliore esperienza utente. Se gli utenti tendono a consentire la riproduzione di contenuti da un sito web, in futuro riprodurremo automaticamente i contenuti di quel sito. Viceversa, se gli utenti tendono a interrompere la riproduzione automatica dei contenuti di un determinato sito web, per impostazione predefinita bloccheremo la riproduzione automatica per quei contenuti.
Una proposta avanzata dalla community è stata quella di disattivare l'audio di una scheda invece di mettere in pausa la riproduzione automatica. Tuttavia, riteniamo che sia meglio interrompere l'esperienza di riproduzione automatica in modo che il sito web sappia che la riproduzione automatica è stata bloccata e che lo sviluppatore del sito web possa intervenire. Ad esempio, sebbene alcuni sviluppatori vogliano semplicemente disattivare l'audio, altri potrebbero preferire che i loro contenuti audio vengano messi in pausa fino a quando l'utente non interagisce attivamente con i contenuti. In caso contrario, l'utente potrebbe perderti parte dell'esperienza audio.
Nuovi aggiustamenti per aiutare gli sviluppatori di giochi web
Il modo più comune in cui gli sviluppatori utilizzano l'API Web Audio è creando due tipi di oggetti per riprodurre l'audio:
- Un AudioContext
- Gli AudioNodes, che sono collegati a un contesto
Gli sviluppatori di audio per il Web creeranno un AudioContext per la riproduzione dell'audio. Per ripristinare l'audio dopo che il criterio di riproduzione automatica ha sospeso automaticamente AudioContext, è necessario chiamare la funzione resume() su questo oggetto dopo che l'utente ha interagito con la scheda:
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');
});
});
Esistono molte interfacce che ereditano da AudioNode, una delle quali è l'interfaccia AudioScheduledSourceNode. I Nodi Audio che implementano l'interfaccia AudioScheduleSourceNode vengono comunemente indicati come nodi di origine (come AudioBufferSourceNode, CostSourceNode e OscillatorNode). I nodi di origine implementano un metodo start().
I nodi di origine solitamente rappresentano singoli frammenti audio riprodotti nei giochi, ad esempio il suono riprodotto quando un giocatore raccoglie una moneta o la musica di sottofondo riprodotta nella fase corrente. È molto probabile che gli sviluppatori di giochi chiamino la funzione start() sui nodi di origine ogni volta che uno di questi suoni è necessario per il gioco.
Una volta riconosciuto questo modello comune nei giochi web, abbiamo deciso di adeguare la nostra implementazione come segue:
Un valore AudioContext verrà ripristinato automaticamente quando saranno soddisfatte due condizioni:
- L'utente ha interagito con una pagina.
- Viene richiamato il metodo start() di un nodo di origine.
A causa di questa modifica, l'audio della maggior parte dei giochi web verrà ripristinato quando l'utente inizierà a giocare.
Il web progredisce
Per portare avanti la piattaforma web, a volte è necessario apportare modifiche che possono compromettere la compatibilità. Purtroppo, la riproduzione automatica audio è complessa e rientra in questa categoria di modifiche. Ma questo cambiamento è fondamentale per garantire che il web non stia stagnando e non perda il suo vantaggio innovativo.
Tuttavia, siamo consapevoli che l'applicazione delle correzioni per i siti web non è sempre fattibile nel breve termine per vari motivi:
- Gli sviluppatori web potrebbero concentrarsi su un nuovo progetto e la manutenzione di un sito web meno recente non è immediatamente possibile.
- I portali di giochi web potrebbero non avere il controllo sull'implementazione dei giochi nel loro catalogo e aggiornare centinaia (se non migliaia) di giochi può richiedere molto tempo e denaro per i publisher.
- Alcuni siti web potrebbero semplicemente essere molto vecchi e, per un motivo o per l'altro, non sono più gestiti ma sono ancora ospitati per scopi storici.
Di seguito è riportato un breve snippet di codice JavaScript che intercetta la creazione di nuovi oggetti AudioContext e attiva automaticamente la funzione di ripristino di questi oggetti quando l'utente esegue varie interazioni. Questo codice deve essere eseguito prima della creazione di qualsiasi oggetto AudioContext nella tua pagina web; ad esempio, puoi aggiungere questo codice al tag della tua pagina web:
(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);
});
})();
Tieni presente che questo snippet di codice non sarà utile per il ripristino di AudioContext creati in un iframe, a meno che tale snippet di codice non sia incluso nell'ambito dei contenuti dell'iframe stesso.
Offrire un servizio migliore ai nostri utenti
Parallelamente alla modifica delle norme, stiamo introducendo anche un meccanismo che consente agli utenti di disattivare le norme relative alla riproduzione automatica per coprire i casi in cui l'apprendimento automatico non funziona come previsto o per i siti web che vengono resi inutilizzabili a seguito della modifica. Questa modifica verrà implementata con il nuovo criterio in Chrome 71 ed è disponibile nelle impostazioni audio; i siti in cui l'utente vuole consentire la riproduzione automatica possono essere aggiunti alla lista consentita.
Come viene strutturato l'MEI per i nuovi utenti?
Come accennato in precedenza, creiamo automaticamente gli indicatori MEI nel tempo in base al comportamento dell'utente per anticipare l'intenzione desiderata nei confronti di un determinato sito web con contenuti a riproduzione automatica. In questo indice, ogni sito web ha un punteggio compreso tra zero e uno. Punteggi più alti indicano che l'utente si aspetta che i contenuti vengano riprodotti da quel sito web.
Tuttavia, per i nuovi profili utente o se un utente cancella i propri dati di navigazione, invece di bloccare la riproduzione automatica ovunque, viene utilizzato un elenco pre-seed basato su punteggi MEI aggregati e anonimizzati per determinare quali siti web possono essere riprodotti automaticamente. Questi dati determinano solo lo stato iniziale degli indicatori MEI al momento della creazione del profilo utente. Quando l'utente naviga sul web e interagisce con siti web con contenuti a riproduzione automatica, il suo numero MEI personale sostituisce la configurazione predefinita.
L'elenco dei siti pre-seeded viene generato tramite algoritmi anziché manualmente e qualsiasi sito web è idoneo a essere incluso. I siti vengono aggiunti all'elenco se un numero sufficiente di utenti che visitano il sito consente la riproduzione automatica su quel sito. Questa soglia è basata sulla percentuale in modo da non favorire i siti di grandi dimensioni.
Trovare l'equilibrio
Abbiamo pubblicato una nuova documentazione per fornire maggiori informazioni sul nostro processo decisionale e sulle motivazioni alla base di queste norme per il design. È inoltre disponibile nuova documentazione sul funzionamento dell'elenco dei siti pre-seminati.
Mettiamo sempre i nostri utenti al primo posto, ma non vogliamo deludere la community di sviluppatori web. A volte essere un browser significa che questi due obiettivi devono essere attentamente bilanciati. Riteniamo che con le modifiche apportate all'implementazione delle norme e il tempo aggiuntivo che abbiamo concesso agli sviluppatori audio web per aggiornare il loro codice, raggiungeremo questo equilibrio con Chrome 71.