Etiqueta audio y autoplay.
La etiqueta audio funciona de manera similiar a la etiqueta "img" en su construcción:
<audio src="s_bach.mp3">
</audio>
El código le dice al navegador que comience a cargar el archivo de audio especificado con el atributo "src", sin embargo, este no se reproducirá hasta que le indiquemos
Atributo "autoplay"
La etiqueta "audio" permite la inclusión del atributo autoplay. En términos de usabilidad, hacer que un archivo de audio o video se reproduzca automáticamente puede ser tremendamente molesto para el visitante, por lo tanto no es recomendable incluirlo a menos que sea estrictamente necesario.
El código entonces luce así:
<audio src="s_bach.mp3" autoplay>
</audio>
Como ves el atributo no necesita de un valor específico, esto es porque el atributo mismo es del tipo booleano, es decir, si está presente el navegador lo utilizará, si no está presente no lo hará.
Loop
Si quieres volver loco a tu usario entonces puedes utilizar el atributo loop a tu audio.
<audio src="s_bach.mp3" autoplay loop>
</audio>
El resultado de este codigo es que el archivo se audio partirá nuevamente una vez que termine, infinitamente.
Controles
La correcta inclusión de un archivo de audio es con el atributo "controls", también es un valor booleano que presenta botones de control al usuario.
<audio src="s_bach.mp3" controls>
</audio>
Ahora el archivo puedo controlarse:
Importante
Cada navegador utilizará un estilo visual diferente para los controles que sea consistente con sus gráficas.
Es posible crear botones de control personalizados con HTML y CSS, sin embargo, su uso debe ser complementado con Javascript y el API de audio.
Pre-carga
La etiqueta audio permite al navegador cargar el audio tras bambalinas, esto es antes que comience la reproducción. La utilidad de este parámetro es que al presionar el botoón "reproducir" el archivo tendrá la suficiente carga como para comenzar a reproducirse inmediatamente.
<audio src="s_bach.mp3" controls preload="none"></audio>
Valores posibles
- none
- Le decimos explícitamente al navegador que no pre-cargue el archivo.
- auto
- Cargar el audio. Si tienes más de un elemento de audio este atributo puede utilizar mucho ancho de banda.
- metadata
- Cargar sólo la metadata del archivo.
Formatos de audio
El mayor problema de los elementos como audio y video es el soporte a distintos formatos.
Como mencionamos al principio, el formato MP3 no es abierto. Eso significa que requiere una patente que algunos navegadores como Firefox(navegador OpenSource) no están dispuestos a pagar.
Para solucionar esta problemática la etiqueta audio permite la inclusión de más de un archivo a través de la etiqueta source
Ejemplo
<audio controls preload="none">
<source src="s_bach.ogg" />
<source src="s_bach.mp3" />
</audio>
Descripción
Los navegadores que puedan reproducir el formato .ogg(formato abierto) lo utilizará e ignorará el resto.
Los navegadores que no reconozcan este formato, utilizarán la segunda opción.
Podemos asistir al navegador en reconocer el formato agregando el tipo de archivo:
<audio controls preload="none">
<source src="s_bach.ogg" type="audio/ogg" />
<source src="s_bach.mp3" type="audio/mpeg" />
</audio>