En septiembre de 2017, anunciamos un próximo cambio en la forma en que se controlaría el audio con la política de comportamiento de reproducción automática en Chrome. El cambio de política se lanzó con la versión estable de Chrome 66 en mayo de 2018.
Después de recibir comentarios de la comunidad de desarrollo de Web Audio, retrasamos el lanzamiento de la parte de Web Audio de la política de reproducción automática para darles a los desarrolladores más tiempo para actualizar sus sitios web. También realizamos algunos cambios en la implementación de la política de Audio web, lo que reducirá la cantidad de sitios web que deben ajustar su código, en especial los juegos web, y, por lo tanto, brindará una mejor experiencia a nuestros usuarios.
Este cambio de política se lanzará con Chrome 71 en diciembre de 2018.
¿Qué hace exactamente el cambio en la política?
La reproducción automática es el nombre que se le da a un contenido que se reproduce de inmediato cuando se carga una página web. En el caso de los sitios web que esperaban poder reproducir su contenido automáticamente, este cambio impedirá la reproducción de forma predeterminada. En la mayoría de los casos, se reanudará la reproducción, pero en otros, será necesario realizar un pequeño ajuste en el código. Específicamente, los desarrolladores deben agregar código que reanude su contenido si el usuario interactúa con la página web.
Sin embargo, si el usuario llega a una página con contenido de reproducción automática y llegó a esa página desde una página del mismo origen, ese contenido nunca se bloqueará. Lee nuestra publicación de blog anterior sobre la política de reproducción automática para ver ejemplos más detallados.
Además, agregamos una heurística para aprender del comportamiento anterior de los usuarios con respecto a los sitios web que reproducen audio automáticamente. Detectamos cuando los usuarios permiten que el audio se reproduzca durante más de 7 segundos durante la mayoría de sus visitas a un sitio web y habilitamos la reproducción automática para ese sitio web.
Para ello, usamos un índice que se almacena de forma local por perfil de Chrome en un dispositivo. No se sincroniza entre dispositivos y solo se comparte como parte de las estadísticas de usuarios anónimas. Llamamos a este índice el Índice de participación en el contenido multimedia (MEI) y puedes consultarlo en chrome://media-engagement.
El MEI realiza un seguimiento de cuántas visitas a un sitio incluyen la reproducción de audio de más de 7 segundos. En función del MEI de un usuario, creemos que podemos comprender si espera audio de un sitio web en particular o no, y anticipar su intención en el futuro.
Si el usuario suele permitir que el dominio de un sitio web reproduzca audio durante más de 7 segundos, en el futuro, asumiremos que el usuario espera que este sitio web tenga el derecho de reproducir audio automáticamente. Por lo tanto, le otorgamos a ese sitio web el derecho de reproducir audio automáticamente sin que el usuario deba interactuar con una pestaña de ese dominio.
Sin embargo, este derecho no se garantiza de forma indefinida. Si el comportamiento del usuario cambia (p.ej., detiene la reproducción de audio o cierra la pestaña dentro del umbral de 7 segundos a lo largo de varias visitas), quitamos el derecho del sitio web a la reproducción automática.
Tanto el uso de elementos HTML multimedia (video y audio) como Web Audio (objetos AudioContext creados con instancias de JavaScript) contribuirán al MEI. Como preparación para el lanzamiento de esta política, el comportamiento de los usuarios en relación con Web Audio comenzará a contribuir al MEI a partir de Chrome 70. Esto garantizará que ya podamos anticipar la intención deseada del usuario con respecto a la reproducción automática y los sitios web que visita con frecuencia.
Cabe señalar que los iframes solo pueden obtener el derecho de reproducción automática sin interacción del usuario si la página web principal que incorpora el iframe extiende ese derecho al iframe determinado.
Retrasar el cambio para apoyar a la comunidad
La comunidad de desarrolladores de Web Audio, en particular los desarrolladores de juegos web y de WebRTC, notaron este cambio cuando apareció en el canal estable de Chrome.
Los comentarios de la comunidad indicaron que muchos juegos web y experiencias de audio web se verían afectados negativamente por este cambio. En particular, muchos sitios que no se actualizaron ya no reproducirían audio para los usuarios. Como resultado, nuestro equipo decidió que valía la pena retrasar este cambio para darles a los desarrolladores de audio web más tiempo para actualizar sus sitios web.
Además, aprovechamos este tiempo para hacer lo siguiente:
- Considera seriamente si este cambio de política fue la mejor opción o no.
- Explorar formas en las que podríamos ayudar a reducir la cantidad de sitios web con audio que se verían afectados
En el caso de la primera, decidimos que el cambio de política es necesario para mejorar la experiencia de la mayoría de nuestros usuarios. En la siguiente sección de este artículo, puedes obtener más detalles sobre el problema que resuelve el cambio en la política.
En el caso de este último, hicimos un ajuste en nuestra implementación de Web Audio que reducirá la cantidad de sitios web afectados originalmente. De los sitios que sabíamos que fallaban debido al cambio, muchos de los cuales la comunidad de desarrollo de juegos web proporcionó como ejemplos, este ajuste significó que más del 80% de ellos funcionaría automáticamente. Aquí puedes ver nuestro análisis y pruebas de estos sitios de ejemplo. Este nuevo ajuste se describe con más detalle a continuación.
También realizamos un cambio para admitir aplicaciones de WebRTC. Mientras haya una sesión de captura activa, se permitirá la reproducción automática.
¿Qué problema busca resolver este cambio de comportamiento?
Históricamente, los navegadores no han ayudado mucho a los usuarios a administrar el sonido. Cuando los usuarios abren una página web y reciben un sonido que no esperaban o no querían, tienen una experiencia del usuario deficiente. Esta mala experiencia del usuario es el problema que estamos tratando de resolver. El ruido no deseado es el motivo principal por el que los usuarios no quieren que su navegador reproduzca contenido automáticamente.
Sin embargo, a veces los usuarios quieren que el contenido se reproduzca automáticamente, y el usuario reproduce posteriormente una cantidad significativa de reproducciones automáticas bloqueadas en Chrome.
Por lo tanto, creemos que, si aprendemos de los usuarios y anticipamos su intención en cada sitio web, podemos crear la mejor experiencia del usuario. Si los usuarios suelen permitir que se reproduzca contenido de un sitio web, reproduciremos contenido de ese sitio automáticamente en el futuro. Por el contrario, si los usuarios tienden a detener el contenido de reproducción automática de un sitio web determinado, impediremos la reproducción automática de ese contenido de forma predeterminada.
Una propuesta que presentó la comunidad fue silenciar el audio de una pestaña en lugar de pausar la reproducción automática. Sin embargo, creemos que es mejor detener la experiencia de reproducción automática para que el sitio web sepa que se bloqueó y permitir que el desarrollador del sitio web reaccione a esta situación. Por ejemplo, mientras que algunos desarrolladores pueden querer simplemente silenciar el audio, otros pueden preferir que su contenido de audio se detenga hasta que el usuario interactúe con él de forma activa; de lo contrario, el usuario podría perder parte de la experiencia de audio.
Nuevos ajustes para ayudar a los desarrolladores de juegos web
La forma más común en que los desarrolladores usan la API de Web Audio es creando dos tipos de objetos para reproducir audio:
- Un AudioContext
- Y AudioNodes, que se adjuntan a un contexto.
Los desarrolladores de audio web crearán un AudioContext para reproducir audio. Para reanudar el audio después de que la política de reproducción automática haya suspendido automáticamente su AudioContext, debe llamar a la función resume() en este objeto después de que el usuario interactúe con la pestaña:
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');
});
});
Hay muchas interfaces que heredan de AudioNode, una de las cuales es la interfaz AudioScheduledSourceNode. Los AudioNodes que implementan la interfaz AudioScheduledSourceNode suelen denominarse nodos de origen (como AudioBufferSourceNode, ConstantSourceNode y OscillatorNode). Los nodos de origen implementan un método start().
Los nodos de origen suelen representar fragmentos de audio individuales que reproducen los juegos, por ejemplo, el sonido que se reproduce cuando un jugador recoge una moneda o la música de fondo que se reproduce en la etapa actual. Es muy probable que los desarrolladores de juegos llamen a la función start() en los nodos de origen cada vez que sea necesario alguno de estos sonidos para el juego.
Una vez que identificamos este patrón común en los juegos web, decidimos ajustar nuestra implementación de la siguiente manera:
Un AudioContext se reanudará automáticamente cuando se cumplan dos condiciones:
- El usuario interactuó con una página.
- Se llama al método start() de un nodo de origen.
Debido a este cambio, la mayoría de los juegos web ahora reanudarán el audio cuando el usuario comience a jugar.
Impulsamos la Web
Para avanzar en la plataforma web, a veces es necesario realizar cambios que pueden romper la compatibilidad. Lamentablemente, la reproducción automática de audio es compleja y se encuentra dentro de esta categoría de cambios. Sin embargo, realizar este cambio es fundamental para garantizar que la Web no se estanque ni pierda su ventaja innovadora.
Sin embargo, reconocemos que aplicar correcciones a los sitios web no siempre es factible a corto plazo por varios motivos:
- Es posible que los desarrolladores web se enfoquen en un proyecto nuevo y que no sea posible realizar el mantenimiento de un sitio web más antiguo de inmediato.
- Es posible que los portales de juegos web no tengan control sobre la implementación de los juegos en su catálogo, y actualizar cientos, si no miles, de juegos puede ser costoso y llevar mucho tiempo para los publicadores.
- Es posible que algunos sitios web sean muy antiguos y, por un motivo u otro, ya no se mantengan, pero aún se almacenen con fines históricos.
Este es un breve fragmento de código de JavaScript que intercepta la creación de nuevos objetos AudioContext y activa automáticamente la función de reanudación de estos objetos cuando el usuario realiza varias interacciones. Este código se debe ejecutar antes de la creación de cualquier objeto AudioContext en tu página web. Por ejemplo, puedes agregar este código a la etiqueta de tu página 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);
});
})();
Ten en cuenta que este fragmento de código no ayudará a reanudar AudioContexts que se crean instancias dentro de un iframe, a menos que se incluya dentro del alcance del contenido del iframe.
Brindar un mejor servicio a nuestros usuarios
Para acompañar el cambio en la política, también presentamos un mecanismo para que los usuarios inhabiliten la política de reproducción automática y se cubra el caso en el que el aprendizaje automático no funcione como se espera o para los sitios web que se vuelvan inutilizables debido al cambio. Este cambio se lanzará con la nueva política en Chrome 71 y se podrá encontrar en la configuración de sonido. Los sitios en los que el usuario quiera permitir la reproducción automática se pueden agregar a la lista de sitios permitidos.
¿Cómo se construye el MEI para los usuarios nuevos?
Como se mencionó anteriormente, compilamos el MEI automáticamente con el tiempo en función del comportamiento del usuario para anticipar su intención deseada con respecto a un sitio web determinado con contenido de reproducción automática. Cada sitio web tiene una puntuación entre cero y uno en este índice. Las puntuaciones más altas indican que el usuario espera que el contenido se reproduzca desde ese sitio web.
Sin embargo, en el caso de los perfiles de usuario nuevos o si un usuario borra sus datos de navegación, en lugar de bloquear la reproducción automática en todas partes, se usa una lista de precarga basada en puntuaciones de MEI agregadas de usuarios anónimos para determinar qué sitios web pueden reproducir contenido automáticamente. Estos datos solo determinan el estado inicial del MEI cuando se crea el perfil de usuario. A medida que el usuario navega por la Web y, además, interactúa con sitios web que tienen contenido con reproducción automática, su MEI personal anula la configuración predeterminada.
La lista de sitios precargados se genera de forma algorítmica, en lugar de seleccionarse manualmente, y cualquier sitio web es apto para incluirse. Los sitios se agregan a la lista si una cantidad suficiente de usuarios que los visitan permite la reproducción automática en ellos. Este umbral se basa en un porcentaje para no favorecer a los sitios más grandes.
Cómo encontrar el equilibrio
Publicamos nueva documentación para brindar más información sobre nuestro proceso de toma de decisiones y la justificación del diseño detrás de esta política. Además, hay nueva documentación sobre cómo funciona la lista de sitios prepropagados.
Siempre priorizamos a los usuarios, pero tampoco queremos defraudar a la comunidad de desarrollo web. A veces, ser el navegador significa que estos dos objetivos deben equilibrarse cuidadosamente. Creemos que, con nuestros ajustes en la implementación de la política y el tiempo adicional que les brindamos a los desarrolladores de audio web para actualizar su código, lograremos este equilibrio con Chrome 71.