comparte el articulo 

Audio con HTLM5

Actualizado el 10/04/2012 < > 3 Cometarios

Resumen: Explicamos la etiqueta audio de HTML5, que brinda un soporte nativo de este tipo de contenido multimedia a los navegadores, sin la necesidad de usar plugins de flash o javascript.

La inclusión de la etiqueta audio en HTML5, nos ofrece la posibilidad de ofrecer sonido en nuestra página de forma nativa para el navegador, de una manera muy similar a lo que hace la etiqueta video.

El audio como un recurso nativo e integrado, junto con el resto de etiquetas multimedia de HTML5, es una de las noticias más esperadas dentro de los nuevos desarrollos. Ya no debemos recurrir a herramientas externas, aunque de todas formas es posible utilizar plugins (Flash, Java Script) y hoy en día se siguen usando en masa.

Etiquetas Para Reproducción de Audio con HTML5

La etiqueta elemental nos permite reproducir el sonido en forma directa desde HTML5.

Etiqueta <audio>

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

Eso es todo, algo muy sencillo. Sin embargo, aquí no queda la cosa, siempre necesitaremos otros elementos que nos permitan controlar la emisión del sonido así como los controles para que el usuario disfrute y maneje a voluntad la reproducción. Todo ello lo conseguiremos a través de los atributos de la etiqueta audio.

Por suerte, el elemento audio ya es reconocido por la mayoría de los navegadores más usuales. A pesar de ello, no todos manejan los mismos formatos, por lo cual es una buena idea presentar la misma pieza de sonido en varias modalidades. El atributo “src=” informa sobre el archivo a reproducir. Pero existe una etiqueta especial para ofrecer más opciones en cuanto a formato.

Etiqueta <source>

<audio>
    <source src="micancion.ogg" type="audio/ogg" />
    <source src="micancion.mp3" type="audio/mpeg" />
    <source src="micancion.wav" type="audio/mpeg" />
</audio>

Ahora sí estaremos en condiciones de incluir música en nuestra página, de tal forma que el navegador elija el formato que le sea compatible, en este caso ogg, mp3 o wav, aunque pueden agregarse líneas con otros archivos, para tener la seguridad de que el browser encontrará el que pueda reproducir.

Los Atributos de <audio>

La fuente de sonido

El atributo <src>, como se puede ver en el primer ejemplo, es el que indica la URL del archivo de sonido, cuando éste es único. Si disponemos de más formatos a elegir, como vimos, debemos utilizar la etiqueta <source>.

Los controles del audio con HTML5

Claro que en la mayor parte de los casos deseamos que nuestro lector tenga acceso a controles mínimos como los botones de play y pause. Para ello contamos con el atributo <controls>. Este atributo, de sencilla implementación, mostrará los controles habituales en pantalla. Cada navegador tiene un modelo diferente en cuanto al aspecto gráfico, aunque sus funciones son idénticas.

<audio controls>
    <source src="micancion.ogg" type="audio/ogg" />
    <source src="micancion.mp3" type="audio/mpeg" />
</audio>

Cuándo Comenzar la Reproducción

Siempre podemos decidir que el usuario vea los controles de audio y presione play para comenzar, o de lo contrario que la reproducción se inicie de inmediato, una vez que la página termine de cargarse. Para esta última opción, utilizaremos el atributo autoplay.

<audio controls autoplay>
    <source src="micancion.ogg" type="audio/ogg" />
    <source src="micancion.mp3" type="audio/mpeg" />
</audio>

Si deseamos evitar demoras, convendrá que nuestro archivo de sonido se cargue en una memoria especial o buffer, durante la carga de la página. Esta necesidad está resuelta por HTML5 a través del atributo preload.

<audio controls autoplay preload=”auto”>
    <source src="micancion.ogg" type="audio/ogg" />
    <source src="micancion.mp3" type="audio/mpeg" />
</audio>

El atributo preload cuenta con tres parámetros posibles que indican al navegador el momento en que el autor de la página decidió comenzar la reproducción.

  • preload=”auto” indica que el archivo deberá cargarse durante el tiempo de carga de la página.
  • preload=”none” especifica que esta acción no se realice.
  • preload=”metadata” se utiliza para que el navegador cargue por anticipado sólo los elementos de información adicional asociada con el archivo, que no incluyen el sonido.

Hay que tener cuidado con este atributo, no recomiendo usarlo si no es estrictamente necesario, puesto que resulta muy molesto entrar en una página web y empezar a eschucar sonido sin saber de donde, a parte de que consumimos ancho de banda innecesario.

Escuchar y Volver a Escuchar

El atributo loop cumple con la misión del título. Es decir, una vez que se ha reproducido todo el archivo de audio, éste se reiniciará.

<audio controls loop>
    <source src="micancion.ogg" type="audio/ogg" />
    <source src="micancion.mp3" type="audio/mpeg" />
</audio>

Los Controles: Integración con Java Script

Probablemente deseamos ofrecer mayor control sobre nuestro elemento de audio al cliente o lector de nuestra página. Para lograr este objetivo, vamos a encontrar que HTML5 está integrado con Java Script de una forma sencilla y eficaz. Algunos de los elementos (funciones, métodos) JS que podemos utilizar son los siguientes:

  • currentTime, para mostrar el tiempo de reproducción actual.
  • duration, que nos muestra el tiempo total esperado de reproducción.
  • onplay(), una indicación de que la reproducción está en marcha.
  • onpause(), nos permite saber que la emisión ha sido suspendida (está en pause).
  • onerror(), nos indica que se ha producido un error y la reproducción ha sido suspendida.

También podemos utilizar los controles de reproducción, pausa y volumen a través de funciones:

<audio id=”reproductor”>
    <source src="micancion.ogg" type="audio/ogg" />
    <source src="micancion.mp3" type="audio/mpeg" />
    <source src="micancion.wav" type="audio/mpeg" />
</audio>

<div>
    <button onclick=”document.getElementById(‘reproductor’).play()”>Reproducir</button>
    <button onclick=”document.getElementById(‘reproductor’).pause()”>Pausa</button>
    <button onclick=”document.getElementById(‘reproductor’).volume+=1”>Aumentar</button>
    <button onclick=”document.getElementById(‘reproductor’).volume-=1”>Disminuir</button>
</div>

Como es notorio, se ha abierto una gran variedad de posibilidades para que nuestra música y sonido en general lleguen a nuestros usuarios. Disfrutemos de esta novedad de HTML5. La emisión de sonido a través de Internet y de nuestros desarrollos nunca había sido tan sencilla.

Publicado el 04/04/2012, última actualización 10/04/2012.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Verónica Milán

URL: LaWebera.es :: Diseño de paginas web

Añadir Comentario (Subir al texto)

3 Cometarios

  1. Rodolfo Güiza F.

    Felicitaciones por su información muy productiva

    Domingo, 12 de agosto 2012

  2. RodrigoCeu

    /////////////////////////////////REPRODUCTOR DE MUSICA//////////////////////////////////

    //Global variable to track current file name
    var currentFile = “”;

    //display and update progress bar
    function progressBar() {
    var oAudio = document.getElementById(‘myaudio’);
    //get current time in seconds
    var elapsedTime = Math.round(oAudio.currentTime);
    //update the progress bar
    if (canvas.getContext) {
    var ctx = canvas.getContext(“2d”);
    //clear canvas before painting
    ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
    ctx.fillStyle = “rgb(255,0,0)”;
    var fWidth = (elapsedTime / oAudio.duration) * (canvas.clientWidth);
    if (fWidth > 0) {
    ctx.fillRect(0, 0, fWidth, canvas.clientHeight);
    }
    }
    }
    //Play and pause function
    function playAudio() {
    try {
    //return objects we need to work with
    var oAudio = document.getElementById(‘myaudio’);
    var btn = document.getElementById(‘play’);
    var audioURL = document.getElementById(‘audiofile’);

    //Skip loading if current file hasn’t changed.
    if (audioURL.value !== currentFile) {
    oAudio.src = audioURL.value;
    currentFile = audioURL.value;
    }

    //Tests the paused attribute and set state.
    if (oAudio.paused) {
    oAudio.play();
    btn.textContent = “Pause”;
    }
    else {
    oAudio.pause();

    btn.textContent = “Play”;
    }
    }
    catch (e) {
    // Fail silently but show in F12 developer tools console
    if (window.console && console.error(“Error:” + e));
    }
    }

    //Rewinds the audio file by 30 seconds.
    function rewindAudio() {
    try {
    var oAudio = document.getElementById(‘myaudio’);
    oAudio.currentTime -= 30.0;
    }
    catch (e) {
    // Fail silently but show in F12 developer tools console
    if (window.console && console.error(“Error:” + e));
    }
    }

    //Fast forwards the audio file by 30 seconds.
    function forwardAudio() {
    try {
    var oAudio = document.getElementById(‘myaudio’);
    oAudio.currentTime += 30.0;
    }
    catch (e) {
    // Fail silently but show in F12 developer tools console
    if (window.console && console.error(“Error:” + e));
    }
    }

    //Restart the audio file to the beginning.

    function restartAudio() {
    try {
    var oAudio = document.getElementById(‘myaudio’);
    oAudio.currentTime = 0;
    }
    catch (e) {
    // Fail silently but show in F12 developer tools console
    if (window.console && console.error(“Error:” + e));
    }
    }

    function lessVolume() {
    try {
    var oAudio = document.getElementById(‘myaudio’);
    oAudio.volume -= 0.1;
    }
    catch (e) {
    // Fail silently but show in F12 developer tools console
    if (window.console && console.error(“Error:” + e));
    }
    }

    function moreVolume() {
    try {
    var oAudio = document.getElementById(‘myaudio’);
    oAudio.volume += 0.1;
    }
    catch (e) {
    // Fail silently but show in F12 developer tools console
    if (window.console && console.error(“Error:” + e));
    }
    }

    //added events

    function initEvents() {
    var canvas = document.getElementById(‘canvas’);
    var oAudio = document.getElementById(‘myaudio’);

    //set up event to toggle play button to pause when playing
    oAudio.addEventListener(“playing”, function() {
    document.getElementById(“play”).textContent = “Pause”;
    }, true);

    //set up event to toggle play button to play when paused
    oAudio.addEventListener(“pause”, function() {
    document.getElementById(“play”).textContent = “Play”;
    }, true);
    //set up event to update the progress bar
    oAudio.addEventListener(“timeupdate”, progressBar, true);
    //set up mouse click to control position of audio
    canvas.addEventListener(“click”, function(e) {
    //this might seem redundant, but this these are needed later – make global to remove these
    var oAudio = document.getElementById(‘myaudio’);
    var canvas = document.getElementById(‘canvas’);

    if (!e) {
    e = window.event;
    } //get the latest windows event if it isn’t set
    try {
    //calculate the current time based on position of mouse cursor in canvas box
    oAudio.currentTime = oAudio.duration * (e.offsetX / canvas.clientWidth);
    }
    catch (err) {
    // Fail silently but show in F12 developer tools console
    if (window.console && console.error(“Error:” + err));
    }
    }, true);
    }
    //this event gets fired when a page has loaded
    window.addEventListener(“DOMContentLoaded”, initEvents, false);

    /***********************************************************************************************************************/
    /************************************************************************************************************************/
    /*******************************************ESTO EN EL DOCUMENTO HTML**********************************/
    /************************************************************************************************************************/
    /************************************************************************************************************************/

    Play

    Rewind

    FF

    RePlay

    More Volume

    Less Volume

    canvas not supported

    //Check for support and enable buttons
    if (window.HTMLAudioElement) {
    document.getElementById(“play”).disabled = false;
    document.getElementById(“rewind”).disabled = false;
    document.getElementById(“forward”).disabled = false;
    document.getElementById(“restart”).disabled = false;
    document.getElementById(‘less’).disabled = false;
    document.getElementById(‘more’).disabled = false;
    }

    Jueves, 30 de mayo 2013

  3. RodrigoCeu

    pues lo siento pero esto no me deja poner parte del codigo…. si alguien puede aprovecharlo me alegrare por el.

    De todos modos donde pone Play, FF y tal teneis que poner
    <button id="play" onclick='playAudio(); disabled y cerrarlo con el cierre de html, luego escribir Play o lo que sea y cerrar el buttom con </buttom y el cierre.

    En cuanto a lo del canvas falta solo hacer un div cuyo id sea canvas y el width de 100 y height de 20 (es asi como yo lo tengo)

    Suerte

    Jueves, 30 de mayo 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras