CSS es el dominio del estilo, el diseño y la presentación. Está lleno de colores, tamaños y animaciones. ¿Pero sabías que también puede controlar cuándo se reproduce un sonido en una página web?
Este artículo trata sobre un pequeño truco para lograrlo. En realidad, es una implementación estricta de HTML y CSS, por lo que en realidad no es un truco. Pero … seamos honestos, sigue siendo una especie de truco. No recomendaría usarlo necesariamente en producción, donde el audio probablemente debería controlarse con nativos <audio> elementos y / o JavaScript.
El truco
Hay algunas alternativas para reproducir sonidos con CSS, pero la idea subyacente es la misma: insertar el archivo de audio como un objeto / documento oculto dentro de la página web y mostrarlo cada vez que ocurre una acción. Algo como esto:
<style>
embed { display: none; }
button:active + embed { display: block; }
</style>
<button>Play Sound</button>
<embed src="https://css-tricks.com/playing-sounds-with-css/path-to-audio-file.mp3" />Ver demostración
Este código usa un <embed> etiqueta, pero también podríamos usar <object> con resultados similares:
<object data="https://css-tricks.com/playing-sounds-with-css/path-to-audio-file.mp3"></object>Una nota rápida sobre la demostración y esta técnica. Desarrollé un pequeño piano en CodePen solo con HTML y CSS usando esta técnica hace aproximadamente un año. Funcionó muy bien, pero desde entonces, algunas cosas han cambiado y la demostración ya no funciona en CodePen.
El mayor cambio estuvo relacionado con la seguridad. Como usa embed o object en vez de audio, el archivo importado está sujeto a controles de seguridad más estrictos. Las políticas de control de acceso de origen cruzado (CORS) obligan al archivo de audio a estar en el mismo protocolo y dominio que la página a la que se importa. Incluso poner el sonido en base64 ya no funcionará. Además, es posible que usted (y los usuarios) deban activar la reproducción automática en la configuración de su navegador para que este truco funcione. A menudo se habilita detrás de una bandera.
Otro cambio es que los navegadores ahora solo reproducen los sonidos una vez. Podría haber jurado que los navegadores anteriores reproducían el sonido cada vez que se mostraba. Pero ese ya no parece ser el caso, lo que limita considerablemente el alcance del truco (y deja la demostración de piano casi inútil).
El problema de CORS se puede solucionar si tiene control sobre los servidores y archivos, pero la reproducción automática deshabilitada es una cosa por usuario que está fuera de nuestro control.
Ver demostración
Por que funciona
La teoría detrás de este comportamiento se puede encontrar enterrada en la definición de la embed etiqueta:
Siempre que un embed elemento que no estaba potencialmente activo se vuelve potencialmente activo, y siempre que un elemento potencialmente activo embed elemento que permanece potencialmente activo y tiene su src conjunto de atributos, cambiado o eliminado o su type atributo establecido, cambiado o eliminado, el agente de usuario debe poner en cola una tarea utilizando el origen de la tarea incrustada para ejecutar el embed pasos de configuración del elemento para ese elemento.
Lo mismo ocurre con la definición de object etiqueta:
Siempre que ocurra una de las siguientes condiciones:
[…]
- el elemento cambia de renderizado a no renderizado, o viceversa,
[…] el agente de usuario debe poner en cola una tarea para ejecutar los siguientes pasos para (re) determinar qué object elemento representa. [and eventually process and run it]
Si bien es más claro para object (el archivo se procesa y se ejecuta en render), tenemos este concepto de “potencialmente activo” para embed eso puede parecer un poco más complicado. Y aunque hay algunas condiciones adicionales, se ejecutará en el renderizado inicial de manera similar a como lo hace con object.
Como puede ver, técnicamente esto no es un truco en absoluto, pero cómo deberían comportarse todos los navegadores… aunque no es así.
Soporte del navegador
Al igual que con muchos de estos trucos y trucos, la compatibilidad con esta función no es excelente y varía considerablemente de un navegador a otro.
Funciona a las mil maravillas en Opera y Chrome, lo que significa un gran porcentaje del mercado de navegadores. Sin embargo, el soporte es irregular para otros navegadores basados en Chromium. Por ejemplo, Edge en Mac reproducirá el audio correctamente, mientras que el navegador Brave no lo hará a menos que tenga la última versión.
Safari no fue un motor de arranque, y lo mismo puede decirse de Internet Explorer o Edge en Windows. Nada parecido a funcionar en ninguno de estos navegadores.
Firefox reproducirá todos los sonidos a la vez al cargar la página, pero luego no los reproducirá después de que se oculten y se muestren nuevamente. Activará una advertencia de seguridad en la consola cuando los sonidos intenten reproducirse “sin interacción del usuario”, bloqueándolos a menos que el usuario apruebe el sitio primero.
En general, este es un truco divertido con CSS, pero una de esas cosas de “no hagas esto en casa” … que en el desarrollo de software, significa que esto es lo perfecto para hacer en casa. 🙂