Algunos sitios web, como sitios web de música, proveedores de canciones en línea, cursos en línea u otros, por supuesto, deben incluir archivos de audio como contenido del sitio web. En general, hay tres tipos de archivos de audio que se pueden reproducir: audio digital, archivos de música y texto a voz. Además, también podemos añadir audio en línea en un sitio web.
El audio en línea es un sonido que se incluye en una página web o como parte de una página web donde se reproducirá el sonido cuando se cargue el navegador. Pero antes de instalar audio en línea en el sitio web, primero preste atención a si el uso de audio en línea no interfiere con los visitantes que leen el contenido del sitio web. Debe instalar audio en línea en las páginas web donde los visitantes esperan escuchar sonido.
En este material, discutiré cómo agregar canciones en HTML usando elementos de audio. Para más detalles, veamos la explicación a continuación:
Elementos de audio
El elemento de audio es un nuevo elemento de salida de HTML5 que se utiliza para insertar audio, como una canción, en HTML reproducible. El uso de elementos de audio se indica mediante el par de etiquetas . Entre los pares de etiquetas
En el elemento de audio también hay varios atributos, a saber:
| Atributo | Marcos | Función |
| auto-reproducción | – | Especifica que el audio se reproducirá instantáneamente cuando la página se cargue automáticamente. |
| control S | – | Muestra que los controles de audio (cada navegador tiene una visualización diferente de los controles de audio) se muestran como un reproductor que normalmente contiene comandos como el botón de reproducción/pausa, control deslizante, volumen, etc. |
| apagado | – | Se usa para silenciar o silenciar el sonido, lo que significa que el audio se reproducirá en silencio al comienzo de las iniciales. |
| círculo | – | Se utiliza para reproducir audio que ha terminado de reproducirse. |
| origen | URL de ubicación del archivo de audio | Indica la ubicación donde se almacena el archivo de audio o una URL que indica el paradero del archivo de audio. |
| precarga | automático, ninguno, metadatos | Indica qué tan importante es que el audio se cargue cuando se carga la página web. |
src y controles .atributos
El siguiente es un código de ejemplo para usar el atributo scr y los controles en HTML:
<!DOCTYPE html> <html> <head> <title>Atribut src di elemen audio</title> </head> <body> <audio src="https://www.nesabamedia.com/cara-menambahkan-audio-lagu-di-html/honestly.mp3" controls></audio> </body> </html>
El uso del atributo de controles da como resultado controles de audio que se ven diferentes para cada navegador. Le recomiendo que agregue este atributo. Vea la diferencia a continuación:
Cromo
Firefox
En el atributo src, acabo de escribir honestamente.mp3 solo porque la ubicación del archivo de audio está en la misma carpeta que el archivo HTML. He explicado varias veces cómo escribir la URL de ubicación del archivo en este atributo src, uno de los cuales puede ver en el material sobre cómo agregar imágenes en HTML.
Si solo usa el atributo src directamente en la etiqueta
Para que el audio aún pueda ser compatible con diferentes navegadores, se usa más de un formato de audio usando el elemento fuente que está marcado por el uso de la etiqueta
| Atributo | Marcos | Función |
| origen | URL de ubicación del archivo de audio | Indica la ubicación donde se almacena el archivo de audio o una URL que indica el paradero del archivo de audio. |
| escribe | Tipo de Mimica | Determinar el tipo MIME del audio |
Aquí hay una tabla de tipos MIME:
| Formatos de archivo | Tipo de medio |
| Mp3 | audio/mpeg |
| onda | audio/wav |
| Ogg | audio/ogg |
El siguiente es un ejemplo de escribirlo y usarlo en HTML:
<!DOCTYPE html> <html> <head> <title>Elemen source di HTML</title> </head> <body> <audio controls> <source src="https://www.nesabamedia.com/cara-menambahkan-audio-lagu-di-html/honestly.mp3" type="audio/mpeg"> <source src="honestly.ogg" type="audio/ogg"> <source src="honestly.wav" type="audio/wav"> Gagal memutar lagu </audio> </body> </html>
Cuando se ejecuta el archivo HTML, la salida será algo como:
Si se ejecuta el código HTML anterior, solo se carga un audio, no los tres, porque este atributo de tipo solo se usa para determinar el tipo MIME de un archivo, pueden ser imágenes, audio, video, etc.
Antes de la etiqueta de cierre, agregué la frase “Error al reproducir la canción” que aparecerá cuando el navegador que esté utilizando no admita elementos de audio. Se ve así en el navegador (por ejemplo, yo uso el navegador Safari 5.7.1):
Atributo de reproducción automática
Como se explicó anteriormente, el atributo de reproducción automática se usa para que el audio se reproduzca inmediatamente cuando la página web termina de cargarse o puede denominarse audio en línea.
Para aquellos de ustedes que administran sitios web de música, fanpages u otros, el uso de este atributo sin duda animará el ambiente. El siguiente es un ejemplo de su código de uso en HTML:
<!DOCTYPE html> <html> <head> <title>Atribut Autoplay di elemen audio</title> </head> <body> <audio src="https://www.nesabamedia.com/cara-menambahkan-audio-lagu-di-html/honestly.mp3" autoplay controls></audio> </body> </html>
La visualización del código anterior después de ejecutarlo en el navegador:
Si se ejecuta el código HTML anterior, el audio se reproducirá automáticamente tan pronto como la página web termine de cargarse.
Atributo de bucle
Esta función de atributo se utiliza para reproducir la canción repetidamente. Entonces, mientras el visitante aún abra la página web, la canción siempre se reproducirá una y otra vez (no solo una vez).
El siguiente es un ejemplo de su código de uso en HTML:
<!DOCTYPE html> <html> <head> <title>Atribut loop di elemen audio</title> </head> <body> <audio src="https://www.nesabamedia.com/cara-menambahkan-audio-lagu-di-html/honestly.mp3" loop controls></audio> </body> </html>
La visualización del código anterior después de ejecutarlo en el navegador:
Si se ejecuta el código HTML anterior, la canción continuará sonando continuamente hasta que el visitante cierre la página.
Muy bien, ahora puedes agregar audio o canciones en HTML. El siguiente material que necesita aprender es cómo hacer que la escritura se ejecute en HTML.
