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.
Puedes verlo en funcionamiento aquí mismo, ya sea que des play al reproductor, o selecciones una canción de la lista.
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDZgShgKM44R2OY91lLVdWxncwcCuR0N7G51UwzVl6YTsSp1PEYQ_3vLsCGg9-Wq9II1VMxFpe_eL_6uXBKk9176u5wh1epdjB4wx7JplJyieEURKK6tXV6KBuOZ6ZF46xpA4KM4Jgm-Q/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO7iH1_H1y7a7JvIgBVTgkBLu_jzTUKSbaCfWFdiGRvNB_W1VXhXtqhhGOgfbyzX1-9yIFIamgLbUzkNw6-jB8bbwMr6YgpJq-rs-8S0hs6OFaOo5h94s5GDs3No67sI87KeSRS3Rp1hY/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'/>
</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 azul. 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 rojo agrega los nombres de las canciones.
Si quieres 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:
