TRUCOS y
TUTORIALES
para tu blog
No, no vendemos
camisetas... aun
Camiseta Ciudad Blogger

Múltiples canciones (Playlist) en HTML5

20 de abril de 2014 | Número de comentarios37 comentarios

En la entrada anterior vimos cómo insertar música en el blog usando la etiqueta <audio>, lo mismo que videos con la etiqueta <video>.
Ahora veremos cómo crear un pequeño reproductor para reproducir múltiples canciones en HTML5, es decir, cómo crear un playlist con el elemento <audio>

Este es un sencillo reproductor de MP3 que permite incluir múltiples canciones con loop de manera que cuando acabe una canción pasará a la siguiente por si sola. El único problema es que sólo admite MP3 así que en el navegador Opera no se escuchará. Con el resto de los navegadores que admitan el elemento <audio> no habrá ningún problema.

Puedes verlo en funcionamiento aquí mismo, ya sea que des play al reproductor, o selecciones una canción de la lista.


Parece que fuera complejo pero no es así, de hecho el script que usa es muy corto, prácticamente todo es CSS.
Para poner este reproductor de múltiples canciones en tu blog entra en Plantilla | Edición de HTML y antes de </body> agrega lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
var audio;var playlist;var tracks;var current;initaudio();function initaudio(){current=0;audio=$('audio');playlist=$('#playlist');tracks=playlist.find('li a');len=tracks.length-1;audio[0].volume=1;playlist.find('a').click(function(e){e.preventDefault();link=$(this);current=link.parent().index();runaudio(link,audio[0])});audio[0].addEventListener('ended',function(e){current++;if(current>len){current=0;link=playlist.find('a')[0]}else{link=playlist.find('a')[current]}runaudio($(link),audio[0])})}function runaudio(link,player){player.src=link.attr('href');par=link.parent();par.addClass('active').siblings().removeClass('active');audio[0].load();audio[0].play()}
//]]>
</script>
Si ya tuvieras jQuery en tu plantilla entonces omite la primera línea.
Luego, ahí mismo en la Edición HTML busca la etiqueta ]]></b:skin> y antes de ella pega los estilos:
#playlist, #player {
width: 400px; /* Ancho de todo el contenedor */
padding: 20px;
margin: 0 auto;
display: block;
text-align: center;
}
#player {
/* Imagen de fondo del primer contenedor */
background: url(//lh3.googleusercontent.com/-9dx_GmP6Yeg/U06qBO9M4EI/AAAAAAAAFEY/FXrhlltF7xc/s300/bg.png);
padding: 10px 20px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
audio {
width:300px; /* Ancho del reproductor */
margin:0 auto;
display: inline-block
}
#player:after {
/* Imagen animada */
content: url(//lh3.googleusercontent.com/-KoD5KVOAsGQ/U1B_dWFttoI/AAAAAAAAFFc/uJ3SjLPlDHQ/s75/equalizador.gif);
padding-left: 10px;
}
#playlist {
margin: 0 auto 20px auto;
display: block;
background: #424242; /* Fondo del segundo contenedor */
border-top: 5px solid #9F111B;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
text-align: left;
font-size: 12px; /* Estilos de fuente */
font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
font-weight: normal;
}
#playlist li, #playlist ul li {
background-image: none;
list-style-type: none;
padding: 0;
margin: 0;
}
#playlist li a {
color: #CCC; /* Color de las canciones */
background: #222; /* Fondo de las canciones */
padding: 7px 5px;
display: block;
padding-left: 10px;
text-decoration: none;
}
#playlist li a:hover{
background: #9F111B; /* Color de fondo al pasar el cursor */
text-decoration: none;
}
#playlist .active a {
color: #B11623; /* Color de la canción activa */
font-style: italic;
text-decoration: none;
}
#playlist .active a:before {
content: "\25B6";
color: #CCC;
font-style: normal;
padding-right: 8px;
}
#playlist .active a:hover {
color: #222; /* Color de la canción activa al pasar el cursor */
}
Por último, en un gadget HTML/Javascript o en una entrada de tu blog agrega la estructura:
<div id='player'>
<audio controls='' id='audio' preload='auto' tabindex='0' type='audio/mpeg'>
<source src='URL de la primera canción' type='audio/mp3'/>
Hola, tu navegador no está actualizado y no puede mostrar este contenido.
</audio>
</div>
<ul id='playlist'>
<li class='active'><a href='URL de la primera canción'>Nombre de la primera canción</a></li>
<li><a href='URL de la segunda canción'>Nombre de la segunda canción</a></li>
<li><a href='URL de la tercera canción'>Nombre de la tercera canción</a></li>
</ul>
Ahí deberás poner las URLs de tus canciones donde se señala en color rojo. Nota que la URL de la primera canción se agrega dos veces, una dentro del reproductor y otra dentro de la lista de reproducción. Todas las URLs de tus canciones deberán ser en formato MP3.
En color azul agrega los nombres de las canciones.
Si quisieras personalizarlo puedes hacerlo siguiendo las anotaciones que está en color verde, ahí verás dónde se cambian los tamaños, colores, fondos, etc.

La imagen del ecualizador es un GIF animado, puedes eliminarlo si crees que es muy llamativo, o puedes sustituirlo por el logotipo de tu blog o cualquier otra imagen.

Para añadir más canciones sólo agrega antes del </ul> una línea como esta por cada canción extra que quieras añadir al reproductor:
<li><a href='URL de la otra canción'>Nombre de la otra canción</a></li>

Y si quisieras crear un reproductor de videos usando el elemento <video> igual en HTML5 entonces añadirías este código antes de </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
var video;var vplaylist;var vtracks;var vcurrent;initvideo();function initvideo(){vcurrent=0;video=$('video');vplaylist=$('#vplaylist');vtracks=vplaylist.find('li a');vlen=vtracks.length-1;video[0].volume=1;vplaylist.find('a').click(function(e){e.preventDefault();link=$(this);vcurrent=link.parent().index();runvideo(link,video[0])});video[0].addEventListener('ended',function(e){vcurrent++;if(vcurrent>vlen){vcurrent=0;link=vplaylist.find('a')[0]}else{link=vplaylist.find('a')[vcurrent]}runvideo($(link),video[0])})}function runvideo(link,player){player.src=link.attr('href');par=link.parent();par.addClass('active').siblings().removeClass('active');video[0].load();video[0].play()}
//]]>
</script>
Así mismo omite la primera línea si es que ya tienes jQuery en tu plantilla.
Luego, antes de ]]></b:skin> se agregan los estilos:
#vplaylist, #vplayer {
width: 400px; /* Ancho de todo el contenedor */
padding: 20px;
margin: 0 auto;
display: block;
text-align: center;
}
#vplayer {
padding: 10px 20px;
background: #000; /* Color de fondo primer del contenedor */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
video {
width:400px; /* Ancho del reproductor */
padding-top: 10px;
margin:0 auto;
display: inline-block
}
#vplaylist {
margin: 0 auto 20px auto;
display: block;
background: #424242; /* Color de fondo del segundo contenedor */
border-top: 5px solid #9F111B;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
text-align: left;
font-size: 12px;
font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
font-weight: normal;
}
#vplaylist li, #vplaylist ul li {
background-image: none;
list-style-type: none;
padding: 0;
margin: 0;
}
#vplaylist li a:hover{
background: #9F111B; /* Color de fondo al pasar el cursor */
text-decoration: none;
}
#vplaylist .active a {
color: #B11623; /* Color de la canción activa */
font-style: italic;
text-decoration: none;
}
#vplaylist .active a:before {
content: "\25B6";
color: #CCC;
font-style: normal;
padding-right: 8px;
}
#vplaylist .active a:hover {
color: #222; /* Color de la canción activa al pasar el cursor */
}
Y por último en tu gadget o entrada del blog agrega esto:
<div id='vplayer'>
<video controls='' height='224' width='400' id='video' preload='auto' tabindex='0' type='video/mp4'>
<source src='URL del primer video' type='video/mp4'/>
Hola, tu navegador no está actualizado y no puede mostrar este contenido.
</video>
</div>
<ul id='vplaylist'>
<li class='active'><a href='URL del primer video'>Nombre del primer video</a></li>
<li><a href='URL del segundo video'>Nombre del segundo video</a></li>
<li><a href='URL del tercer video'>Nombre del tercer video</a></li>
</ul>

Ahí también deberás cambiar las URLs de los videos en color rojo pero esta vez los archivos serán en formato MP4. De igual forma, la URL del primer video va dos veces.
Los nombres de los videos se cambian en la parte de color azul. En negrita verás dónde se cambia el tamaño del reproductor.

Para añadir más videos deberás también agregar antes del </ul> una línea como esta:
<li><a href='URL del otro video'>Nombre del otro video</a></li>

El resultado será este:



De esta manera podrás tener un reproductor de audio o video con playlist en HTML5. El único problema será el navegador Opera, pero el resto de los navegadores modernos no tendrán problema.

Vía | Last Rose

Música y Video en el blog con HTML5

14 de abril de 2014 | Número de comentarios63 comentarios

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.

Atributo AUDIO de HTML5 en diferentes navegadores

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='//lh6.googleusercontent.com/-RV4oNQFconM/U0mzxz8RLhI/AAAAAAAAKcY/v71P7Eim36A/s28/icon_play.png' /></a>
<a onclick="document.getElementById('player').pause()"><img src='//lh4.googleusercontent.com/-obsfym3iMu4/U0mzxW7RFWI/AAAAAAAAKcg/q2eHJ8Lk9UM/s28/icon_pause.png' /></a>
<a onclick="document.getElementById('player').volume+=0.1"><img src='//lh4.googleusercontent.com/-IQ5ufJ-pOls/U0mzxetxX6I/AAAAAAAAKcU/cNjUSNictQI/s18/icon_increase.png' /></a>
<a onclick="document.getElementById('player').volume-=0.1"><img src='//lh4.googleusercontent.com/-dmBa3ahBI9w/U0mzxa4ZEWI/AAAAAAAAKcQ/QT-o9L-VqUM/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
 
Ir Arriba Ir Abajo
¿Te gusta Ciudad Blogger?