A settembre 2017 abbiamo annunciato una modifica imminente al modo in cui l'audio verrà gestito con le norme sul comportamento della riproduzione automatica in Chrome. La modifica delle norme è stata rilasciata con la versione stabile di Chrome 66 a maggio 2018.
In seguito al feedback della community di sviluppo Web Audio, abbiamo ritardato il rilascio della parte relativa a Web Audio delle norme sulla riproduzione automatica per dare agli sviluppatori più tempo per aggiornare i loro siti web. Abbiamo anche 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 offriremo un'esperienza migliore ai nostri utenti.
L'implementazione di questa modifica alle norme è ora prevista per dicembre 2018 con Chrome 71.
Che cosa comporta esattamente la modifica delle norme?
La riproduzione automatica è il nome dato a un contenuto che viene riprodotto immediatamente al caricamento di una pagina web. Per i siti web che si aspettavano di poter riprodurre automaticamente i propri contenuti, questa modifica impedirà la riproduzione per impostazione predefinita. Nella maggior parte dei casi, la riproduzione verrà ripresa, ma in altri casi sarà necessario un piccolo aggiustamento del codice. Nello specifico, gli sviluppatori devono aggiungere codice che riprenda i contenuti se l'utente interagisce con la pagina web.
Tuttavia, se l'utente arriva a una pagina con contenuti con riproduzione automatica ed è arrivato a quella pagina da una pagina della stessa origine, questi contenuti non verranno mai bloccati. Per esempi più dettagliati, leggi il nostro post del blog precedente sulle norme relative alla riproduzione automatica.
Inoltre, abbiamo aggiunto un'euristica per apprendere dal comportamento passato degli utenti in merito ai siti web che riproducono automaticamente l'audio. Rileviamo quando gli utenti lasciano riprodurre regolarmente l'audio per più di 7 secondi durante la maggior parte delle visite a un sito web e attivano la riproduzione automatica per quel sito web.
Lo facciamo con un indice memorizzato localmente per profilo Chrome su un dispositivo. L'indice non viene sincronizzato tra i dispositivi ed è condiviso solo nell'ambito delle statistiche anonimizzate degli utenti. Chiamiamo questo indice indice di coinvolgimento con i media (MEI) e puoi visualizzarlo all'indirizzo chrome://media-engagement.
L'Indice di efficacia audio tiene traccia del numero di visite a un sito che includono la riproduzione di audio di durata superiore a 7 secondi. In base all'IME di un utente, riteniamo di poter 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 lascia spesso che il dominio di un sito web riproduca audio per più di 7 secondi, in futuro assumeremo che l'utente si aspetti che questo sito web abbia il diritto di riprodurre automaticamente l'audio. Pertanto, concediamo a questo sito web il diritto di riprodurre automaticamente l'audio senza richiedere all'utente di interagire con una scheda del dominio.
Tuttavia, questo diritto non è garantito a tempo indeterminato. Se il comportamento dell'utente cambia, ad esempio se interrompe la riproduzione audio o chiude la scheda entro la soglia di 7 secondi nel corso di diverse visite, rimuoviamo il diritto del sito web alla riproduzione automatica.
Sia l'utilizzo di elementi HTML multimediali (video e audio) sia Web Audio (oggetti AudioContext di JavaScript) contribuiscono al MEI. In preparazione all'implementazione di questo criterio, il comportamento degli utenti in relazione a Web Audio inizierà a contribuire al MEI a partire da Chrome 70. In questo modo, potremo già anticipare l'intenzione dell'utente in merito alla riproduzione automatica e ai siti web che visita di solito.
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 in questione.
Ritardare il cambiamento per supportare la community
La community di sviluppatori di Web Audio, in particolare la parte di questa community composta da sviluppatori di giochi web e WebRTC, ha preso atto di questa modifica quando è stata introdotta nel canale stabile di Chrome.
Il feedback della community è stato che molti giochi e esperienze audio web sarebbero stati negativamente interessati da questa modifica. In particolare, molti siti non aggiornati non riprodurrebbero più l'audio per gli utenti. Di conseguenza, il nostro team ha deciso che valeva la pena posticipare questa modifica per dare agli sviluppatori di audio web più tempo per aggiornare i propri siti web.
Inoltre, abbiamo approfittato di questo periodo per:
- Valuta attentamente se questa modifica alle norme fosse o meno la soluzione migliore.
- Esplorare i modi in cui potremmo contribuire a ridurre il numero di siti web con audio interessati.
Per quanto riguarda la prima, abbiamo deciso che la modifica delle norme è effettivamente necessaria per migliorare l'esperienza utente per la maggior parte dei nostri utenti. Per ulteriori dettagli sul problema risolto dalla modifica delle norme, consulta la sezione successiva di questo articolo.
Per quest'ultimo, abbiamo apportato un aggiustamento alla nostra implementazione di Web Audio che ridurrà il numero di siti web inizialmente interessati. Dei siti che sapevamo non funzionare a causa della modifica, molti dei quali sono stati forniti come esempi dalla community di sviluppo di giochi web, questo aggiustamento ha consentito a oltre l'80% di funzionare automaticamente. La nostra analisi e i nostri test su questi siti di esempio sono disponibili qui. Questo nuovo aggiustamento è descritto in maggiore dettaglio di seguito.
Abbiamo anche apportato una modifica per supportare le applicazioni WebRTC: mentre è attiva una sessione di acquisizione, la riproduzione automatica sarà consentita.
Quale problema si propone di risolvere questa modifica del comportamento?
I browser non sono mai stati molto efficaci nell'aiutare 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 è negativa. Questa scarsa esperienza utente è il problema che stiamo cercando di risolvere. Il rumore indesiderato è il motivo principale per cui gli utenti non vogliono che il 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, riteniamo che, imparando dagli utenti e anticipando le loro intenzioni in base a ogni sito web, possiamo creare la migliore esperienza utente. Se gli utenti tendono a far riprodurre i contenuti di un sito web, in futuro attiveremo la riproduzione automatica dei contenuti di quel sito. Al contrario, se gli utenti tendono a interrompere la riproduzione automatica dei contenuti di un determinato sito web, impediremo la riproduzione automatica per questi contenuti per impostazione predefinita.
Una proposta avanzata dalla community è quella di disattivare l'audio di una scheda anziché mettere in pausa la riproduzione automatica. Tuttavia, riteniamo che sia meglio interrompere l'esperienza di riproduzione automatica in modo che il sito web sia consapevole che la riproduzione automatica è stata bloccata e consentire allo sviluppatore del sito web di reagire di conseguenza. Ad esempio, mentre alcuni sviluppatori potrebbero semplicemente disattivare l'audio, altri potrebbero preferire che i contenuti audio vengano messi in pausa finché l'utente non interagisce attivamente con i contenuti, altrimenti l'utente potrebbe perdere 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 è creare due tipi di oggetti per riprodurre l'audio:
- Un AudioContext
- e AudioNodes, che sono associati a un contesto
Gli sviluppatori di audio web creeranno un AudioContext per la riproduzione dell'audio. Per riprendere l'audio dopo che il criterio di riproduzione automatica ha sospeso automaticamente l'AudioContext, l'utente deve chiamare la funzione resume() su questo oggetto dopo aver 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. Gli AudioNode che implementano l'interfaccia AudioScheduledSourceNode sono comunemente chiamati nodi di origine (ad esempio AudioBufferSourceNode, ConstantSourceNode e OscillatorNode). I nodi di origine implementano un metodo start().
I nodi di origine in genere rappresentano singoli snippet audio riprodotti dai giochi, ad esempio l'audio 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.
Dopo aver riconosciuto questo modello comune nei giochi web, abbiamo deciso di modificare la nostra implementazione nel seguente modo:
Un AudioContext verrà ripreso automaticamente quando vengono soddisfatte due condizioni:
- L'utente ha interagito con una pagina.
- Viene chiamato il metodo start() di un nodo di origine.
A causa di questa modifica, la maggior parte dei giochi web ora riprenderà l'audio quando l'utente inizia a giocare.
Far progredire il web
Per far progredire la piattaforma web, a volte è necessario apportare modifiche che possono compromettere la compatibilità. Purtroppo, la riproduzione automatica dell'audio è complessa e rientra in questa categoria di modifiche. Tuttavia, questo passaggio è fondamentale per garantire che il web non rimanga inattivo o perda il suo vantaggio innovativo.
Tuttavia, siamo consapevoli che l'applicazione di correzioni per i siti web non è sempre fattibile a breve termine per vari motivi:
- Gli sviluppatori web potrebbero essere concentrati su un nuovo progetto e la manutenzione di un sito web precedente non è immediatamente possibile.
- I portali di giochi web potrebbero non avere il controllo sull'implementazione dei giochi nel loro catalogo e l'aggiornamento di centinaia, se non migliaia, di giochi può essere lungo e costoso per i publisher.
- Alcuni siti web potrebbero essere semplicemente molto vecchi e, per un motivo o per l'altro, non sono più gestiti, ma sono ancora ospitati a scopo storico.
Ecco un breve snippet di codice JavaScript che intercetta la creazione di nuovi oggetti AudioContext e attiva automaticamente la funzione di ripresa di questi oggetti quando l'utente esegue varie interazioni. Questo codice deve essere eseguito prima della creazione di qualsiasi oggetto AudioContext nella pagina web. Ad esempio, puoi aggiungerlo al tag della 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 ti aiuterà a riprendere gli AudioContext creati all'interno di un iframe, a meno che non sia incluso nell'ambito dei contenuti dell'iframe stesso.
Offrire un servizio migliore ai nostri utenti
Accanto alla modifica delle norme, stiamo introducendo anche un meccanismo che consente agli utenti di disattivare il criterio di riproduzione automatica per coprire i casi in cui l'apprendimento automatico non funziona come previsto o per i siti web resi inutilizzabili dalla modifica. Questa modifica verrà implementata con il nuovo criterio in Chrome 71 e sarà disponibile nelle Impostazioni audio. I siti in cui l'utente vuole consentire la riproduzione automatica possono essere aggiunti all'elenco Consenti.
Come viene costruito l'MEI per i nuovi utenti?
Come accennato in precedenza, creiamo l'MEI automaticamente nel tempo in base al comportamento dell'utente per anticipare la sua intenzione in merito a un determinato sito web con contenuti con riproduzione automatica. Ogni sito web ha un punteggio compreso tra zero e uno in questo indice. Punteggi più elevati 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 dati di navigazione, anziché bloccare la riproduzione automatica ovunque, viene utilizzato un elenco pre-seed basato su punteggi MEI aggregati anonimizzati degli utenti per determinare quali siti web possono riprodurre automaticamente i contenuti. Questi dati determinano solo lo stato iniziale dell'MEI al momento della creazione del profilo utente. Quando l'utente naviga sul web e interagisce con siti web con contenuti con riproduzione automatica, il suo MEI personale sostituisce la configurazione predefinita.
L'elenco di siti pre-impostato viene generato tramite algoritmi anziché essere selezionato manualmente e qualsiasi sito web può essere incluso. I siti vengono aggiunti all'elenco se un numero sufficiente di utenti che li visitano consente la riproduzione automatica. Questa soglia è basata su una percentuale per non favorire i siti più grandi.
Trovare il proprio centro
Abbiamo pubblicato nuova documentazione per fornire maggiori informazioni sulla nostra procedura decisionale e sulla motivazione alla base del design di queste norme. nonché una nuova documentazione su come funziona l'elenco dei siti precompilati.
Mettiamo sempre al primo posto i nostri utenti, ma non vogliamo deludere la community di sviluppo web. A volte, essere il browser significa che questi due obiettivi devono essere bilanciati con attenzione. Riteniamo che, grazie alle modifiche apportate all'implementazione delle norme e al tempo aggiuntivo che abbiamo concesso agli sviluppatori di audio web per aggiornare il proprio codice, riusciremo a raggiungere questo equilibrio con Chrome 71.