Hola a todos, hoy os voy a explicar como usar la etiqueta audio de HTML 5.
Esta etiqueta permite reproducir un audio en HTML 5.
Veamos como funciona de forma sencilla. Se suele poner un texto dentro de la misma para que se muestre si tu navegador no lo puede usar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio</title>
</head>
<body>
<audio src="grito.mp3" controls>
Tu navegador no soporta la etiqueta audio
</audio>
</body>
</html>
El atributo src indica la ruta del fichero a reproducir, en mi caso lo tendría junto a mi index.html.
Para que se muestre, es necesario que tenga el atributo controls. Se puede mostrar sin controls y que se reproduzca automáticamente.
Podemos hacer que se reproduzca automáticamente con el atributo autoplay.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio</title>
</head>
<body>
<audio src="grito.mp3" controls autoplay>
Tu navegador no soporta la etiqueta audio
</audio>
</body>
</html>
Si queremos que se reproduzca en bucle, lo podemos hacer con el atributo loop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio</title>
</head>
<body>
<audio src="grito.mp3" controls loop>
Tu navegador no soporta la etiqueta audio
</audio>
</body>
</html>
Para mutearlo, lo podemos hacer con el atributo muted.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio</title>
</head>
<body>
<audio src="grito.mp3" controls muted>
Tu navegador no soporta la etiqueta audio
</audio>
</body>
</html>
Os dejo todos los ejemplos en nuestro github aquí.
Espero que os sea de ayuda. Si tenéis dudas, preguntad. estamos para ayudarte.
Deja una respuesta