Insertar audio en un sitio web con HTML5

Con HTML5 dos opciones se abren completamente para eliminar cualquier problema de compatibilidad de plugins, por una parte está el elemento “audio”, y por otro “video”, que si son desarrolladores sabrán que suelen ser un dolor de cabeza para cuando queremos insertar multimedia que no esté en algún servicio de videos o música.

Después del salto vamos a  ver cómo insertar audio en un sitio web con HTML5, claro, después de esto espero que aprendan también a controlarlo y no vuelvan su sitio web un Hi5 moderno; espero les guste el tutorial.

HTML5

Como si fuera cualquier etiqueta más basta con ponerle una URL del elemento que queremos reproducir, por ejemplo

<audio src=”archivo.mp3”> </audio>

Hay que tener cuidado aquí, ya que no todos los formatos de audio son soportados por todos los navegadores, por ejemplo, Chrome es el único que soporta todos los posibles, o bueno, al menos todos los de la siguiente tabla:

Fuente:genbetadev

Sea como sea, ya vimos que insertar un archivo de audio es muy fácil, pero ahora vamos a ver más.

En primer lugar podemos agregar controles, para controlar un poco más nuestro archivo de audio y no matar a los usuarios al entrar.

<audio src=”archivo.mp3” controls> </audio>

También tenemos la posibilidad de hacer un loop o repetición, así como hacer que inicie automáticamente:

<audio src=”archivo.mp3” autoplay loop> </audio>

Y si esto no es suficiente, podemos controlar el elemento directamente desde Javascript, claro, insertando un Id al elemento para luego usarlo, o crearlo, como en el siguiente ejemplo:

// Accedemos al elemento
var audioElement = document.createElement('audio');

// Cambiamos de canción
audioElement.setAttribute('src', 'loading.ogg');

// Comenzamos la reproducción
audioElement.play();

// Definimos el elemento onload
audioElement.addEventListener("load", function() {
 // Comenzamos la reproducción
 audioElement.play();

 // Mostramos la duración del archivo de sonido
 $(".duration span").html(audioElement.duration);

 // Mostramos el nombre del archivo de audio
 $(".filename span").html(audioElement.src);
}, true);

// Ejecutamos el evento onload() del elemento
audioElement.load()

// Pausamos la ejecución
audioElement.pause();

// Definimos el volumen
audioElement.volume=0;

// Indicamos una posición de tiempo
audioElement.currentTime=35;

Esa es la primera introducción al tag audio, espero les haya gustado y puedan desde hoy probar este nuevo elemento que HTML5 nos da. Si tienen alguna duda o comentario no duden en dejarlo abajo en los comentarios y con gusto les responderé.