Audio HTML – ¿Cómo insertar un audio en HTML?

Introducción:
Hace poco cree un fondo animado con música y lo publiqué; pero como no lo expliqué a profundidad, hoy veremos una parte de ese código, que es la inserción de audio.

2 Formas de insertar un audio en HTML (2 ways to insert audio in html)

Ejemplo I

Para insertar un audio en tu documento HTML y escribir el código completamente en HTML, podemos hacerlo de la siguiente forma.

<!-- agregando un archivo de audio en la etiqueta <audio> -->
<audio class="Audio-1" src="sonido/haha.ogg" controls>
</audio>

Donde:

<audio>: Es un elemento de HTML, se utiliza para incrustar archivos de audio, puede contener una o muchos archivos.

src: En este atributo colocamos la URL o ruta de la ubicación del archivo de audio.

controls: También es un atributo, este permite ver y usar los botones de reproducción como play (reproducción de audio), pausa, volumen del sonido etc.

Ejemplo II

En este segundo ejemplo crearemos un botón, este botón será una imagen de volumen, el cual, al ser presionado reproducirá el sonido que establecimos.

<!-- agregando audio en la etiqueta audio -->
<button name="button" onclick="Sonido()">
    <img class="Musi-Off" src="icono/No_Music.svg">
    <audio id="Audio-2">
    </audio>
</button>

Donde:

<button> : Es un elemento (botón) de HTML, al que podemos cliquear (hacer clic).

name: Indica el nombre que le damos al elemento button.
onclick: Es un evento, básicamente llama la función que ponemos entre comillas.

<img> : Como su nombre lo dice, es un elemento en el que colocamos una imagen, en este caso la imagen de volumen, a la cual haremos clic para producir un sonido, esto lo veremos en el javascript.

Nota: Un evento  es una acción echa por un usuario ej. cliquear un enlace o botón, presionar una tecla, etc.

Para que esta parte del ejemplo funcione tenemos que crear la función Sonido() en javascript, yo lo hice de la siguiente forma:

let sound = true;

let MiAudio = document.getElementById("Audio-2");

function ChangeImgOn(){
   document.querySelector(".Musi-Off").src="icono/No_Music.svg";
}

/*-------------------------------------------------------------------*/
//Cambia el icono de volumen cuando termina de reproducirse el audio.//
/*-------------------------------------------------------------------*/
MiAudio.addEventListener('ended', ChangeImgOn);
/*-----------------------------------------------------*/
//Otra forma de cambiar el icono, al terminar el audio.//
/*-----------------------------------------------------*/
/*
MiAudio.addEventListener('ended', (event) => {
   document.querySelector(".Musi-Off").src="icono/No_Music.svg";
})
*/

function Sonido(){
   if(sound){
      document.querySelector(".Musi-Off").src="icono/Si_Music.svg";
      MiAudio.src="../Sonido/haha.ogg";	
      MiAudio.volume = 0.7;
      MiAudio.play();	
   }

}

Donde:

let: Declara una variable, esta puede inicializare dándole un valor por defecto o no.

document.getElementById(): Es un metodo, que accede al ID especifico de un elemento y lo devuelve.

document.querySelector(): Este metodo resive ID, class o etiqueta que luego es comparado con los elementos del documento HTML si hay coincidencia devuelve ese elemento, de lo contrario devuelve nulo.

addEventListener(): Añade al evento una determinada función, donde evento y función son parámetros de entrada.

ended: evento  de la etiqueta <audio>, se ejecuta cuando la reproducción se ha detenido porque llegó al final de la reproducción.

volume: Es una propiedad que asigna un valor entre 1 y 0 al volumen.
Ejemplo:

• 1: Es el valor más alto dado al volumen del audio.
• 0.5: Es la mitad del volumen.
• 0: Si es 0 el audio esta en silencio.

play: Es un evento que da comienzo a la reproducción.

Nota:

Para ver el código de estos ejemplos funcionando clic aquí. Y si quieres descargar el código junto con los otros archivos clic aquí.

Si encuentras un error u otro detalle 🤯, por favor déjalo en los comentarios, para que pueda corregirlo.