En algunos casos, la
reproducción de audio en el fondo de forma automática, causa incomodidad al
usuario, por lo tanto, es preferible agregar controles, a fin de ser
manipulados por él cuando lo desee. Debido a ello aplicaremos la etiqueta controls de HTML y evaluremos las diferentes
vistas para algunos navegadores web.
A fin de mostrar botones
mediante un navegador web para la
reproducción, implementaremos audios controlados por el usuario en documentos
HTML, según las recomendaciones de este lenguaje.
Para
insertar un audio en un documento HTML, seguimos la instrucción a continuación:
- Se abre la etiqueta de inicio con la palabra audio.
- Se llama al atributo src
acrónimo de source en inglés,
para especificar la ubicación o ruta de archivo.
- Se agrega el nombre del audio dentro de las comillas. En este
caso, solo con el nombre porque está en la misma carpeta del documento HTML.
- Se crea la etiqueta de cierre, para culminar la forma básica de
ingreso de audio en una página web.
061-01_1202_ilu01.
Inserción de un audio con atributo autoplay
De la
forma mostrada en la ilustración anterior, introducimos el audio en una página web,
sin embargo, solo es visualizado por el programador. Si deseamos la
reproducción automática del audio para causar sensación de tranquilidad al
usuario, agregamos el atributo llamado autoplay,
en español reproducir automáticamente.
En cierto
tipo de páginas es favorable un audio de fondo, sin embargo, depende de la finalidad
del sitio web, por lo tanto, lo ideal
es darle al usuario la posibilidad de pausar o reproducir el audio. Para ello, es
necesario agregar atributos adicionales para mostrar controles como los de la siguiente
ilustración.
061-01_1202_ilu02. Visualización
de audio con controles
Para
mostrar controles a través del navegador web,
agregamos el atributo controls, en
español controles a la etiqueta de audio. Con la siguiente instrucción, se reproduce
el audio automáticamente y se muestran los controles cuando se cargue la página
web.
061-01_1202_ilu03. Creación
de atributo controls
El
atributo controls es mostrado de
formas diferentes según cada navegador web.
Para ver la diferencia, haremos la prueba en tres diferentes y observemos lo
siguiente:
- Google Chrome: muestra controls
con un fondo blanco.
- Internet Explorer: muestra controls con un fondo negro y un poco más grande.
- Mozilla Firefox: muestra controls con apariencia similar a Internet
Explorer, sin embargo, más pequeño.
061-01_1202_ilu04. Visualización de controles
en diferentes navegadores web
Keynotes
- Para insertar un audio en un
documento HTML, seguimos la siguiente instrucción: Se abre la etiqueta de
inicio con la palabra audio. Se llama
al atributo src acrónimo de source en inglés, para especificar la
ubicación o ruta de archivo
- Si deseamos la reproducción
automática del audio para causar sensación de tranquilidad al usuario, debemos
agregar el atributo llamado autoplay,
en español reproducir automáticamente.
- Para mostrar controles a través del
navegador web, agregamos el atributo controls, en español controles.
RetoMarca dos audios diferentes
en un documento HTML, según las recomendaciones de este lenguaje. Implementa
audios controlados por el usuario.
¡Comparte el resultado
final del reto en tu vBox y pide a
tus compañeros debatir sobre el proceso que sigue cada uno de ellos!
Tiempo disponible: entre 15
y 30 minutos.
CierreGracias a la implementación
de audios controlados por el usuario en documentos HTML, según las
recomendaciones de este lenguaje, los visitantes podrán pausarlos,
reproducirlos o pararlos cuando lo deseen. Con precisión y organización aplicaremos
correctamente la etiqueta controls a
la de audio, y aseguraremos la exposición correcta de botones mediante
cualquier navegador web.
