M?sica y Video en el blog con HTML5

Cuando ponemos m?sica en el blog nos topamos con un problema, que no se escucha en dispositivos m?viles. Lo mismo puede pasar con algunos videos. Esto es porque en los blogs solemos usar reproductores hechos en flash para poner la m?sica (o el video) y la mayor?a de los dispositivos m?viles no soporta este formato.

Para algunos esto puede ser muy frustrante, y no es para menos considerando que en la actualidad un gran n?mero de usuarios navegan desde su tel�fono o tableta, as? que quienes tengan un podcast o m?sica en su blog se quedar?n con un gran n?mero de visitantes decepcionados por no poder escuchar el contenido.

?La soluci?n? Usar HTML5

Una de las tantas ventajas que nos ofrece el HTML5 es poder usar dos etiquetas para reproducir audio o video, las cuales por s? mismas son <audio> y <video>.

Estos elementos son soportados en todos los navegadores modernos incluyendo los navegadores de los dispositivos m?viles, con excepci?n de Internet Explorer 8 para abajo.

Su uso es bastante sencillo, s?lo tenemos que a?adir la etiqueta <audio> y la etiqueta <source> que es la fuente de donde se toma la direcci?n del archivo multimedia.

El c?digo es el siguiente:

<audio controls>
<source src="URL del archivo mp3" type="audio/mpeg">
<source src="URL del archivo ogg" type="audio/ogg">
?Hola usuario de Internet Explorer!, si tuvieras un navegador moderno estar?as escuchando una hermos?sima canci?n en lugar de estar leyendo esto :(
</audio>

Ah? debes a?adir la URL de tu canci?n en formato MP3 y otra URL de tu misma canci?n pero en formato OGG. Esto es porque algunos navegadores no admiten aun el formato MP3, espec?ficamente el navegador Opera pues seg?n s� Firefox desde la versi?n 21 ya admite MP3.

Hay varios programas para PC y Mac que convierten archivos de audio y video en formato OGG, pero adem?s hay varios sitios en l?nea que tambi�n lo hacen, uno de mis favoritos es media.io

En cursiva ver?s que hemos a?adido un texto para los usuarios de navegadores antiguos ya que ellos no podr?n ver el reproductor pero s? el mensaje.

Ahora que si eres demasiado buena gente y no quieres que ellos se queden sin escuchar el contenido puedes a?adir dentro del mismo c?digo el elemento EMBED. De esta forma los usuarios de IE8 y anteriores aunque no puedan ver el reproductor en HTML5, podr?n ver el reproductor del plugin que tengan instalado en su navegador.

<audio controls>
<source src="URL del archivo mp3" type="audio/mpeg">
<source src="URL del archivo ogg" type="audio/ogg">
<embed src="URL de tu archivo mp3" type="audio/mp3" width="200"
height="100"/>
</audio>

Los atributos del elemento AUDIO y VIDEO son: controls, autoplay, loop, muted, y preload

• controls permite que se muestren los controles y el reproductor en s?.
• autoplay hace que el archivo se reproduzca al cargar la p?gina.
• loop reproducir? el archivo una y otra vez.
• muted quitar? el audio del archivo.
• preload define si el reproductor se debe cargar cuando se cargue la p?gina.

Un ejemplo del reproductor con varios atributos ser?a de esta forma:

<audio controls autoplay loop>
<source src="URL del archivo mp3" type="audio/mpeg">
<source src="URL del archivo ogg" type="audio/ogg">
<embed src="URL de tu archivo mp3" type="audio/mp3" width="200"
height="100"/>
</audio>

En el caso del elemento VIDEO es igual, s?lo que aqu? establecemos un ancho y un alto.

<video width="320" height="240" controls>
<source src="URL del archivo mp4" type="video/mp4">
<source src="URL del archivo ogv" type="video/ogg">
?Hola usuario de Internet Explorer!, ?qu� crees? aqu? se est? reproduciendo un video incre?ble, pero no puedes verlo porque tu navegador es antiguo :(
</video>

Y si quieres dar soporte completo para IE el c?digo ser?a as?:

<video width="320" height="240" controls>
<source src="URL del archivo mp4" type="video/mp4">
<source src="URL del archivo ogv" type="video/ogg">
<object data="URL del archivo swf" width="320" height="240" type="application/x-shockwave-flash">
<param value="URL del archivo swf" name="movie"/>
</object>
</video>

Quiz? un inconveniente de usar estos reproductores de HTML5 sea tener que convertir los archivos en diferentes formatos, pero habiendo tantas herramientas para convertir formatos, como la que mencion� anteriormente, el problema se disminuye.
En cuanto al aspecto, aqu? s? nos topamos con una traba, y es que cada navegador muestra el reproductor de una forma distinta.

Seguro pensar?s que con CSS podr?amos mejorarlo, pero la mala noticia es que no es as?. La ?nica forma de cambiar completamente su aspecto es usando Javascript. En la web hay muchas opciones y seguro m?s adelante publicaremos alguna de ellas.
Por lo pronto, lo que s? podemos hacer es usar muy poquito Javascript y CSS por fuera del reproductor para crear algo como esto:

0%

No es la gran cosa, pero mis habilidades inform?ticas no dan para m?s. Aun as? dejo el c?digo aqu? por si alguien lo quiere, pero ojo, no funcionar? en Opera ya que s?lo a?adiremos el archivo en MP3, y en cuanto a IE9 la barra de progreso no se ver? pero en cambio se mostrar? el porcentaje que se ha reproducido.

<div class='player-wrapper'>
<audio id='player' src="URL del archivo MP3"></audio>
<div class='player-controls'>
<div class='player-thumb'>
<img src='URL de la imagen miniatura' />
</div>
<a onclick="document.getElementById('player').play()"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHDZy-YMrr0oplAlFtJxF_GPtM9vwpCiVc8LKLMWSQ0qqaHs8xz8Fb0JZ6iWj_cDbkAIaoCDw7R8Ki45La42mzejan6JGGsrC9Sgyi7Z09LndgCL4ldF2-lhj3UcHGpgpW2FhDL-3VmGmP/s28/icon_play.png' /></a>
<a onclick="document.getElementById('player').pause()"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKr3wi3aKjYW7E1i_aYNKU1AHmt4F-UcsFquWYqYHFz-Msf_h1Tnpk4r_TCThPsBtufDQSGJx_wki-0k6IZ3rHXnFMnWoNTvj8ur1wqu_VaKZXQSAATaoFShOHqjLMmAdPvh1TGBglWaxc/s28/icon_pause.png' /></a>
<a onclick="document.getElementById('player').volume+=0.1"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9461-B_8Ec90wEl-oclV0Pn2XTAiiTafJO9FS2FCIjTnzK9itqj3llbCkxbGx2NTxPxuG3tunQ1-IotY2-KXkXIHt-XiCLHhYtf8JOYdejZLmn0yI_b4DTIurDZ1fZS1h-5Gv-o8Q9kuh/s18/icon_increase.png' /></a>
<a onclick="document.getElementById('player').volume-=0.1"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB4_BiSK3IyFMbf8wrVlWkE7yVUknB9EfnWgUWHu6T92_COQvg_GTZhZeKomrVnHb7HNKCtaOEZ-3_sU3-TR9gG-7rnA9fwhOXOSgyHpDDPJaz5jxErRu3XZKcgbR92p3ewyfkNGkuqTKW/s18/icon_decrease.png' /></a>
<progress id='progress' max='100' value='0'><span>0</span>%</progress>
</div>
</div>
<style>
.player-wrapper {
display: table;
height: auto;
width: 180px; /* Ancho del reproductor */
background: #FA5858; /* Color del reproductor */
border-radius: 13px;
position: relative;
margin: 0 auto;
}
.player-thumb img {
width: 160px; /* Tama?o de la miniatura */
padding:10px 0;
margin: 0 auto;
text-align: center;
}
.player-controls {
text-align: center;
display: table-cell;
vertical-align: middle;
padding:0 0 10px;
}
.player-controls a {
margin: 0 2px;
cursor: pointer;
cursor: hand;
}
.player-controls progress {
width:75%;
height: 7px;
background: #FFF;
color: #484848;
margin-top: 5px;
}
::-moz-progress-bar {background: #484848;} /* Color de fondo barra de progreso */
::-webkit-progress-bar {background: #fff;} /* Color de fondo barra de progreso */
::-webkit-progress-value {background: #484848;} /* Color del indicador */
</style>
<script>
var audio=document.getElementById('player');var pBar=document.getElementById('progress');audio.addEventListener('timeupdate',function(){var percent=Math.floor((100/audio.duration)*audio.currentTime);pBar.value=percent;pBar.getElementsByTagName('span')[0].innerHTML=percent},false);
</script>

Usar HTML5 para incrustar audio me parece que es la mejor opci?n, no s?lo porque nos adentramos a la modernidad del HTML sino porque evitamos dejar fuera a los usuarios de dispositivos m?viles. Adem?s, al ser nativo del navegador consume much?simos menos recursos que cualquier otro reproductor. Y por si fuera tampoco tambi�n puede servir para reproducir audio en streaming, o como muchos lo conocen, radio en vivo.

Blues Radio 1.FM