Múltiples canciones (Playlist) en HTML5

20 de abril de 2014 181 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


181 comentarios en:

" Múltiples canciones (Playlist) en HTML5 "

  1. ¡Buenos días Potro! Genial el post, como siempre :)
    Verás, me gustaría saber como puedo subir un audio mp3 a la red para poder la URL de la canción.
    ¡Muchísimas gracias! ¡Sigue así!

    ResponderEliminar
    Respuestas
    1. Buen día Paula. Hay varios servicios en la nube que puedes usar, uno de ellos es Dropbox:
      http://ciudadblogger.com/2010/04/como-usar-dropbox.html (este artículo está un poco desactualizado debido a los cambios que ha hecho Dropbox)

      Ese es bueno, siempre y cuando tu blog no tenga muchas visitas, de lo contrario pueden inhabilitarte los enlaces por consumir mucho ancho de banda.

      Otra opción es Google Sites, igual es bueno, pero los archivos que subamos no funcionan para los blogs con dominio propio:
      http://ciudadblogger.com/2011/01/como-subir-archivos-en-google-sites.html

      Eliminar
    2. pero tiene que ver que mp3 subira por que creo que en dropbox lo pueda detetar como infraccion de copyright

      Eliminar
    3. Es que bueno... Yo tengo un blog de una cantante, y tengo un apartado con las letras de las canciones con un reproductor de la página GOEAR. El problema es que ahora han añadido publicidad y no me gusta mucho como queda...
      El blog tiene una media de 100-200 visitas diarias, y la mayoría de los post son con audio... Además, mi blog principal sí tiene dominio propio y a este (que es un apartado) me gustaría agregarle un subdominio, por lo que supongo que Google Sites no serviría...
      ¿Algún otro sitio donde pueda subirla? :S ¡Muchas gracias!

      Mi blog es: http://elrincondetaylor-lyrics.blogspot.com.es/ , es un apartado de elrincondetaylor.com

      Eliminar
    4. Yo no conozco más, pero me quedo pendiente por si alguien sugiere otro sitio para alojar canciones, a ver si hacemos una recopilación y lo publicamos ;)

      Eliminar
    5. Hola amigos, en cuanto a tu pregunta.. Yo utilizo KIWI6 Es muy bueno ya que ahi subo mis mp3 y te da la url de cada cancion para colocarlo en tu reproductor lo unico malo es que te permite subir canciones de 5 en 5 pruebalo!
      La web http://kiwi6.com
      mi web: http://abriendoloscielos.blogspot.com

      Eliminar
  2. hola me gusta mucho a ver si soy capaz de ponerlo, me gusta la música que has puesto al reproductor.

    ResponderEliminar
  3. Hola potro, quería agradecerte por tu blog, me ha ayudado mucho y además atiendes todas las consultas que se te hacen lo que facilita mucho a los usuarios principiantes en códigos de html y esas cosas cuando tenemos problemas.
    Yo quería hacerte una consulta sobre otro tema que no he encontrado en tus categorías y que no tiene relación con éste (discúlpame por ello): me gustaría saber cómo se puede hacer un menú en blogger que sea de filtros tipo el de por ejemplo la búsqueda de vuelos y viajes, me explico, un menú o buscador donde tengas que elegir entre dos cosas "esto O esto" pero con varias categorías: "esto O esto" Y "esto O esto" etc, no sé si me he explicado bien, que en el buscador te salgan desplegables con las opciones entre las que se puede elegir en tu blog. Si pudieras hacer algo así sería fantástico. Gracias nuevamente.

    ResponderEliminar
    Respuestas
    1. Gracias Bea Abad por tu comentario. En Blogger las opciones para poner un buscador son muy reducidas, no por la cuestión de diseño, sino por las opciones que puedan tener. Hasta donde sé los buscadores como el que explicas funcionan a base de PHP y una base de datos, y en Blogger carecemos de ellos.

      Si me entero de algo parecido se los haré saber.
      Saludos.

      Eliminar
    2. Muchas gracias, El Potro, por tu ayuda. Ya me comentó mi novio que es informático eso de PHP, ¿no se podría alojar el código y la base en un servidor externo y referenciar nuestro blog como hacemos otras veces cuando subimos archivos .js a un servidor y añadimos la url a nuestro código html para hacer funcional una herramienta? Pregunto desde la total ignorancia, así que discúlpame si he dicho una tontería.

      Eliminar
    3. Supongo que sí, pero habría que ver si dicha base de datos puede leer las entradas del blog para poder mostrar los resultados del buscador. Te respondo también desde la total ignorancia porque de PHP no sé nada :(

      Eliminar
    4. Amigo de ante mano muchas gracias por tomarte el tiempo en compartir lo que sabes, y pues lo que comentan de la conexion con una base de datos desde el codigo creo si es posible mas bien estoy seguro que si es posible no me ah tocado el caso de usarlo pero considero que si. sin ofender algo que me dio un poco de risa es que desconoces PHP siendo mucho mas facil que HTML 5 por lo visto tu eres experto en esto. saludos (Ing. en Informatica)

      Eliminar
    5. Es que verás, todo lo aprendido ha sido por experimentación, nunca lo he estudiado, así que lo poco que sé es consecuencia de la curiosidad, así que de experto nada ;)

      Eliminar
  4. Hola mi amigo, ¿qué quiere que le diga? Buenísimo el aporte. Haré un buen listado de temas para probarlo. Tengo uno en el blog pero ya está un poquito viejito, así que este me vino como anillo al dedo. Gracias y espero que tengas una buena semana.

    ResponderEliminar
    Respuestas
    1. Me alegro que sea de tu agrado. Buen inicio de semana para ti también :)

      Eliminar
  5. se Ve Genial Potro, Una Pregunta, Sera que Este Me Reduce El Peso Del Blog si lo AGrego, En Vez Del SCM Music Player? xq Sino Le Agrego Este Mejor :D
    goo.gl/q1DN67 Mi blog :D

    ResponderEliminar
    Respuestas
    1. Pues... el SCM Music Player pesa aproximadamente 6 kilobytes, mientras que este no llega ni a los 2 kB (683 bytes del script y menos de 1 kB de estilos CSS)

      Eliminar
  6. El otro día precisamente estuve viendo ese mismo código para mi otro blog y observé que no era sencillo acoplar un segundo fichero .ogg. Si lo ves fácil no dudes en actualizar la entrada ;)

    ResponderEliminar
    Respuestas
    1. Ayer probé unos cambios en el código y lo conseguí, pero eso trae dos problemas, uno es que las canciones se reproducen automáticamente al cargar la página, y el otro es que al terminar una canción no reproduce la siguiente a menos que le des play.
      Seguro se le necesita hacer algo más al código, no sé si le quieras echar un vistazo: http://jsfiddle.net/ciudadblogger/F33zU/

      Eliminar
    2. Lo estuve viendo Potro, pero no acabo de sacarle punta con ese sistema que usaste :(
      Quizás en otro rato en que tenga más tiempo.

      Eliminar
    3. Vale, seguiremos intentando ;)

      Eliminar
  7. Buenas tardes potro:
    Muy buena entrada, pero para poner música esta el bloc ahora, con el problema que tengo...
    Si pudiese ayudarme?...resulta que mi bloc no se actualiza, y el feed creo entender que me dice que mi bloc no se reconoce, y además que pesa 150 K, he quitado todas las imágenes y banner, para hacerlo más ligero pero sigue pesando lo mismo, he quitado también muchas entradas, pero el bloc sigue sin actualizarse y esta como loco, y me estoy volviendo yo tambien loca, porque no se ya lo que hacer.
    Si pudieses ayudarme por favor'...
    Espero tu respuesta Potro, gracias.
    Mi bloc: http://rodaryvolar-carmen.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola Carmen, hace unos días te respondí en esta entrada:
      http://ciudadblogger.com/2011/02/como-reducir-el-tamano-del-feed.html

      Es un problema en la configuración de tu feed en Feedburner.

      Eliminar
  8. una buenísima alternativa al ya desaparecido MixPod... ahora solo tengo que buscar un buen servidor (que no sea Dropbox, para que no me lo tiren por si las dudas)

    ResponderEliminar
    Respuestas
    1. Si encuentras uno bueno me avisas, ayer he estado todo el bendito día buscando sitios para subir los archivos porque Dropbox me inhabilitó los enlaces a las pocas horas de haber publicado la entrada porque supuestamente generan mucho tráfico.

      Eliminar
    2. Potro hoy mismo he encontrado kiwi6 , te dan 2Gb gratis , lo he probado y funciona bien y facil, ¿no se si lo conoces? , imagino que si, pero bueno, hay va mi aporte, por si a alguien mas le interesa.
      saludos

      Eliminar
    3. No lo conocía, pero gracias por compartirlo :)

      Eliminar
  9. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hay varias que puedes encontrar en la red, sólo haz una búsqueda como "magazine blogger template". Una de ellas es esta de Sora Templates, sólo que, sus versiones gratuitas no permiten modificar el diseño:
      http://www.soratemplates.com/2014/01/hash-movie-blogger-template.html

      Pd. Elimino el comentario por el aviso que está aquí en el formulario.
      Saludos.

      Eliminar
    2. Amigo, que bien que me ayudes, en esa pagina que me distes he encontrado una plantilla que me gusta, gracias por esa :)

      Pero la plantilla es un poco rara y no la entiendo muy bien, la plantilla se llama "CONFIDENCE", este es el link de la plantilla:

      http://www.soratemplates.com/2012/07/confidence-blogger-template.html


      Los problemas que tengo con esa plantilla son estos:
      1-) la imagen de la cabecera se ve muy finita y no abarca toda la cabecera sino solo un espacio en el medio,
      2-) tiene incluido en la cabecera un banner que no me gusta y me gustaria quitarselo, pero trato de quitarselo por la edicion HTML y me da errores de las etiquetas DIV,
      3-) me gustaria quitarle un cuadro de imagenes que tiene la plantilla incluida que cada determinado tiempo en segundos se van pasando las imagenes con un titulo y una breve description en cada una (supongo que sabes de que hablo)
      4-) que tiene incluido en la parte derecha un botones de suscripcion al Feed (boton amarillo) y al Twitter (boton azul claro) y me gustaria quitarselo.

      Por favor, si me podrias ayudar a solucionar esos problemas que tengo te lo agradeceria mucho ya que eres el unico que se que me puedes ayudar he instruir un poco, mi blog esta actualmente en modo privado, porque no quiero que mis lectores vean los destrozos que hago y hullan jajajajaja, como hariamos en tal caso amigo?

      Pd: disculpame que te molesto tanto, se que soy un poco necio, pero el unico que me puedes ayudar eres tu bro :) :)

      Eliminar
    3. Hola de nuevo Laudy, como te mencioné antes, la desventaja de esas plantillas es que en su versión gratuita no son 100% personalizables.

      La cabecera es así, al igual que la mayoría, la única forma para que ocupe todo el ancho es cambiar la estructura de la plantilla, o bien, cambiar la imagen de fondo del blog para que simule que es parte de la cabecera, pero no podrás hacer eso ya que no tienes acceso a los estilos en la versión gratuita.

      Lo del banner inténtalo de nuevo, seguro estás eliminando algo de más, o algo de menos.

      El slider lo puedes quitar eliminando todo su contenedor, que comienza con <div id='slider-container'>
      Pero también deberás tener mucho cuidado para no eliminar algo de menos o de más.

      El gadget del feed y Twitter lo puedes encontrar en esta área:
      <aside class='widget social-counter-widget clearfix' id='aero-social-counter-widget-2'>

      Saludos.

      Eliminar
  10. Hola amigo potro, le daré un muy buen uso a este tutorial ya que por mi tipo de blog me presta mucha ayuda este reproductor, broder tengo una consulta, tu ya bien sabes el tipo de plantilla que tengo jeje, ahora bien, he intentado cambiar el fondo del blog repetidas veces con tus trucos, sin dar resultado positivo, crees que sepas de que forma puedo cambiarlo?, saludos man, si no es mucha la molesta claro.... :)

    ResponderEliminar
    Respuestas
    1. Ninguna molestia weon, lo sabes.
      El fondo de esa plantilla se cambia modificando el background que está dentro de #block-main {

      Eliminar
  11. Muy buen aporte se te agradece mucho :) pero quería saber como hacer si mi lista de canciones es largar, es decir tratar de ocultar un numero determinado de canciones y que estas sean visible con una barra de navegacion (no se se me explique bien XD ) Gracias de ante mano.

    ResponderEliminar
    Respuestas
    1. Hola Edwin, en ese caso agrega debajo de #playlist { esto:

      height: 150px;
      overflow: auto;

      El valor que está en height será la altura del contenedor, lo que exceda de esa altura se ocultará.

      Eliminar
    2. Muchas Gracias Potro, me sirvio. Sigue Asi! :)

      Eliminar
  12. HOLA,
    Muy agradecido con tu ayuda...
    En mi caso, casi todo salio bien, a excepción de que quisiera que el ancho del contenedor fuera un poco menos,
    probe en el area de (width: 300px; /* Ancho de todo el contenedor */), poniendo valores menores pero todo sigue iguial...
    Agradeceria mucho que me ayudaras con esta inquietud..
    Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Jhon. Lo que sucede es que arriba de los estilos has puesto este comentario:
      <!-- INICIO CODIGO PARA PLAYLIST HTML5 2 PARTE -->

      Ese tipo de comentarios no son permitidos en los estilos, ya que los estilos inmediatos a él se inhabilitan; así que sin importar el ancho que le pongas no verás el resultado. Quitando ese comentario podrás modificar los estilos sin problema.

      Te dejo este enlace con más información acerca de ese tema:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  13. Gracias por tu ayuda, eliminare el comentario.

    ResponderEliminar
  14. Hola Potro.. Una pregunta fuera de este artículo: Como hago mi sitio blogger como responsivo, que se adapte a la pantalla de cualquier dispositivo ( que no sea la versión movil )... Gracias...

    ResponderEliminar
    Respuestas
    1. Basicamente se trata de que cambies las medidas de los anchos de tus contenedores, es decir, cambiar de pixeles a porcentajes, por ejemplo:

      #main-wrapper {
      width:60%;
      }
      #sidebar-wrapper {
      width:40%;
      }

      En el caso del contenedor general le puedes establecer un ancho máximo en pixeles, por ejemplo:

      #outer-wrapper {
      max-width: 980px
      }

      Aclaro, los nombres de los contenedores de los ejemplos pueden variar de plantilla en plantilla.

      Eliminar
  15. Gracias Potro. Voy a iniciar con tus consejos.

    ResponderEliminar
  16. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  17. Hola Potro disculpa que no te devolviera la respuesta. he estado liado. soy el del Slider que quería solo que se viera en la portada del blog. Resulta que encontrado uno que lo tengo en un blog de pruebas www.probandoyblogeaando.blogspot.com.es/ y me gustaría preguntarte si podría ser sacarlo de ahí solo el Slider y colocarlo en el blog donde quiero que este. y por supuesto que me explicaras como. espero tu respuesta. atentamente Miguel Ángel.

    ResponderEliminar
    Respuestas
    1. Hola Miguel, supongo que sí, pero no conozco ese slider, no sé qué tantos scripts de la plantilla necesites también trasladar. A lo que según veo en el código fuente es el Nivo Slider:
      http://chicablogger.com/anadir-nivo-slider-en-blogger/

      Supongo que tendrás que añadir nuevos estilos para imitar al de la otra plantilla.

      Eliminar
    2. Potro ese no es, el que yo digo esta dentro de una plantilla llamada bluilos magazine que esta en PBtemplates.Si tu dices que se puede sacar me gustaría que me ayudaras con ello. sino puede ser no hay problema un saludo

      Eliminar
    3. Potro ese no es, el que yo digo esta dentro de una plantilla llamada bluilos magazine que esta en PBtemplates.Si tu dices que se puede sacar me gustaría que me ayudaras con ello. sino puede ser no hay problema un saludo

      Eliminar
    4. A ese mismo slider me refiero, es el Nivo Slider y puedes ponerlo usando el tutorial que te mostré. Ya sé que no se ve igual, por eso te decía que tendrías que añadir algunos estilos más para que se vea como el de la plantilla que mencionas.
      Saludos.

      Eliminar
  18. Hola amigo perdón por salir de tema pero quisiera saber si hay alguna posibilidad de que visites mi blog pero no como cualquier visita sino de una manera en la que me puedas orientar sobre cosas que debería cambiar en tanto a color dimensión osea los detallitos que estoy seguro son muchos esto con el fin de que mis visitantes se lleven una mejor 1era impresión de el blog y asi poder tener mayor trafico , bueno disculpa por quitarte tu tiempo pero te lo agradecería muchísimo deberás hasta luego.

    ResponderEliminar
    Respuestas
    1. De mi opinión me abstengo Luis, siendo que no soy diseñador mi opinión no te servirá. Siempre he creído que a quién más debe gustar es al dueño del blog, en este caso tu opinión es la más importante ;)

      Eliminar
  19. ¿Volviste? Waw, genial! A lo mejor puedas ayudarme. También dejé un comentario a compartidisimo pero parece que no le interesa :( Pido algo que con blogger parece ser que todavía no se ha hecho, y es un blog un scroll horizontal, es decir, que las entradas en lugar de amontonarse verticalmente lo hagan horizntalmente.
    Obviamente es un tipo de blog estupendo para personas que hacemos foto o dibujo, que es lo que me interesa...
    He encontrado muchos templates para wordpress y tumblr con este tipo de diseño, pero ninguno (y ningún tutorial) para blogger. No uso wordpress porque no sé como va, y la verdad siempre he estado a gusto con blogger y lo tengo más por la mano, y tumblr no me da la opción de páginas con fotos como en blogger.

    Aquí te dejo un link para que sepas exactamente lo que quiero:
    http://www.hongkiat.com/blog/premium-horizontal-scrolling-wordpress-themes/

    Ojalá puedas ayudarme... tengo un poquito de prisa, así que si no te interesa o no puedes ayudarme mejor me lo digas para no hacerme ilusiones :) Yo mientrastanto seguiré investigando por mi misma a ver si lo logro.

    Saluditos y encantada de tenerte por las redes otra vez!

    ResponderEliminar
    Respuestas
    1. Gracias Berta :)
      La autora de Compartidísimo fue mamá hace poco así que su tiempo para el blog es muy limitado, es seguro que por eso no ha podido responder, no por falta de interés.

      Sí se puede crear una plantilla similar, no sé qué tantos conocimientos tengas de HTML y CSS, pero básicamente lo que tendrías que hacer es:
      -Eliminar la sidebar, o al menos ocultarla de la portada, o bien, pasarla del lado izquierdo.
      -Establecer un ancho (grande) para el body, por ejemplo: body {2000px; overflow:auto;}

      Con eso ya tendrías ancha la plantilla, ahora, para poner las entradas en fila tendrías que identificar el contenedor de las entradas, usualmente es <div class='date-outer'> y establecerías un ancho en porcentaje, y una flotación a la izquierda. Si por ejemplo, en tu portada muestras 5 entradas entonces pondrías:

      .date-outer {
      width: 19%;
      float: left;
      }

      Básicamente eso sería a grandes rasgos. Tal vez se tenga que ajustar uno que otro detalle, pero ya lo descubrirás sobre la marcha.

      ¡Saludos!

      Eliminar
    2. ¡Anda! No sabía que había tenido un bebé, que bien, me alegro por ella :) Imagino que estará atareada y disfrutándolo :)

      He seguido los pasos que me has dado (gracias!), pero no consigo el resultado del scroll horizontal, no presenta ningún cambio :(
      http://llunetic-a.blogspot.com.es/

      No sé que será que hago mal...¿?

      Eliminar
    3. Prueba cambiando esto que te dije:
      .date-outer {
      width: 19%;
      float: left;
      }

      Por esto:
      .date-outer, .post-outer {
      width: 50%;
      float: left;
      }
      .post-footer {display:none}

      Ahí le he puesto 50% porque sólo son dos entradas, si mostrarás más tendrás que reducirlo.

      Eliminar
    4. Yeah! Okey, de momento funciona!
      Entonces, si lo que quiero es por ejemplo que se vean 15 entradas, ¿qué % debería poner?
      ¡¡¡Estoy muy contenta!!! Este tuto hay que patentarlo Potro, en serio, no hay NADA de esto para blogger.
      Eres un crack!

      Eliminar
    5. Divide 100 entre 15, o entre el número que entradas que quieras mostrar, ese será el ancho en porcentaje que deberás poner.
      A ver si luego con más tiempo me pongo a hacer una plantilla con esa característica :)

      Eliminar
  20. Primero Que Nada Gracias Potro, Por Tus Trucos Y Todo, Ya Logre Que MI Blog Pesara 3.3 MB :D :::::.... Me Quedo Genial La Barra Del Buscador, Solo Una Cosa Con Este Reproductor, Adonde Puedo Subir Mi Musica, para Obtener En .mp3 ?

    ResponderEliminar
    Respuestas
    1. No conozco muchos sitios, aquí mismo he recomendado Dropbox y Google Sites, pero si te enteras de alguno mejor háznoslo saber ;)

      Eliminar
  21. Hola potro, tengo una duda, meter mi blog en boosterblog,es, me ayuda o me afectaria negativamente, y vos sabes de directorios o otros blogs para intercambiar enlaces, para mejorar mi pr, saludos.

    ResponderEliminar
    Respuestas
    1. No sé decirte, no conozco ese directorio, en realidad no conozco muchos :(

      Eliminar
  22. Hola potro, he visto que tu pagina en google+ aparece tu nombre de el potro, ami me aparece mi nombre, y quisiera que apareciera por ejemplo, un sobrenombre.

    ResponderEliminar
    Respuestas
    1. Entra en tu perfil y da click en el nombre, ahí te dará la opción de cambiar el nombre, luego da click en +más opciones y te aparecerá la opción de sobrenombre.

      Eliminar
  23. Oye Potro me Ayudas? Quiero Poner Un Fondo Color #333333, Detras De La Portada Creo que es el headder, pero no me sale :( osea quiero poner ese fondo detras del Mi Portada Donde Dice
    TutorialesByNeto
    Juegos PC - Programas y Mas
    ???

    ResponderEliminar
    Respuestas
    1. Hola. Sólo agrega estos estilos en tu plantilla:

      header {
      background: #333;
      }

      Eliminar
  24. Hola, disculpa, ¿como hago para que se reproduzca automáticamente, y como hago para que cambie de canción automáticamente?

    ResponderEliminar
    Respuestas
    1. Si le pones el atributo de autoplay dejará de cambiar de canción de forma automática.

      Eliminar
  25. Hola, perdón que lo ponga aquí, pero es que en Twitter no me deja por tener muchas palabras xD

    Mira es que estoy cambiando la plantilla del Blog, y me he descargado una, pero hay algunas cosas que no se como cambiarlas. A ver si tu me puedes ayudar

    Primero, es si me puedes decir como quitar los iconos de las redes sociales de arriba
    Segundo en el menú de abajo de la cabecera voy a Editar HTML y se cambiar los nombres, pero no se como poner para que vayan a alguna página que yo quiera. Sabes como se pone?
    Y tercero es que he quitado para que las entradas se vean normales y no en miniaturas, pero ahora las imágenes se me ven muy grandes, pero luego entras al post y se ven normales, como puedo hacer para que se vean también pequeñas sin entrar a la entrada?

    Este es mi blog para que veas, y espero que me puedas ayudar. http://mangaanimeprobando.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola Mugi, supongo que conseguiste lo primero porque no los veo en tu blog.
      Acerca del menú, justo antes de donde cambias el nombre de la pestaña verás un href="#"
      Cambia ese signo de gato por la URL que quieras añadir, por ejemplo, si quisieras enlazar a Google sería: href="http://google.com"

      Lo tercero creo que también lo has conseguido porque no veo ningún cambio en el tamaño de las imágenes de la portada y las entradas individuales.
      Saludos.

      Eliminar
    2. Hola, el primero y lo segundo ya lo he arreglado, gracias

      Lo tercero no... Se ven muy grandes las imágenes en la vista inicial, pero luego cuando entras a la entrada se ven normales. Como puedo hacer para que no se vean tan grandes y se vean igual que cuando miras la entrada?

      Y otra cosa, veras que los comentarios se ve el cuadro gris y sin icono, como se puede cambiar y que se vean los iconos?

      Eliminar
    3. Mira te dejo unas imagenes para que veas la diferencia

      s1109.photobucket.com/user/Domen1234/media/1.jpg.html (Asi de grandes se ven en la portada)
      http://i1109.photobucket.com/albums/h438/Domen1234/2.jpg (Y luego cuando entras a la entrada se ven normales)

      Eliminar
    4. Gracias por los detalles extra, ahora ya lo he visto. Para resolverlo busca estos estilos en tu plantilla y elimínalos:

      .postright img {
      width: 100%;
      height: auto;
      border-radius: 4px;
      }

      Ese estilo usualmente se usa en plantillas RWD (adaptables) para que la imagen se ajuste a cualquier tamaño de la pantalla, pero si no te interesa esa característica puedes quitarlo.

      Saludos.

      Eliminar
    5. Muchas gracias ya lo he podido resolver!

      Y una ultima cosa xD. Al cambiar la caja de comentarios, cuando le doy a responder no me deja comentar. Como puedo arreglarlo?
      Y otra cosa es que cuando hago el salto de línea no me sale lo de "Seguir Leyendo"

      Eliminar
    6. Tal vez la plantilla no tiene incorporado el "Seguir Leyendo", pero se lo puedes agregar:
      http://chicablogger.com/leer-mas-en-blogger-¡al-fin/

      Sobre lo otro no sé si esta entrada de Karla te pueda servir:
      http://www.compartidisimo.com/2012/02/no-funciona-el-enlace-de-responder-de.html

      Eliminar
    7. Gracias, lo de responder ya está arreglado. Pero lo de "Seguir Leyendo" aún no me sale, ya he hecho lo que pone ahí y nada

      Eliminar
    8. Supongo que tendrás que dejarle la consulta a la autora de ese blog, pero, toma en cuenta que la línea donde se pone el código que te falta es posible que lo tengas dos veces, si así fuera pon el código en el segundo donde no lo has colocado.

      Eliminar
    9. Vale, gracias por la ayuda. Lo he conseguido poner, pero sale en todas las entradas, no solo en donde ponga el salto de línea xD

      Y otra cosa (perdón por preguntar tanto xD), en la primera página solo salen dos entradas, pero en las demás 5. Como hago para que en las demás también se vean solo 2?

      Eliminar
    10. Vale gracias. Ya lo he podido poner, pero lo malo es que se me ven en todas las entradas, no solo en las que ponga el salto de linea

      Y otra cosa (perdon por preguntar tanto xD), en la primera pagina se ven solo 2 entradas, pero en las demas 5. Como hago para que en las demas tambien se vean solo 2?

      No se si se ha enviado el otro mensaje, por eso lo envio otra vez. Si se ha enviado 2 veces perdon

      Eliminar
    11. Lo primero no sé porqué sea, lo segundo es por la velocidad de carga del blog:
      http://ciudadblogger.com/2011/06/cuando-en-el-blog-aparecen-menos.html

      Eliminar
  26. Potro No Me Funciono :(
    header {
    background: #333;
    }
    Lo Puse Debajo De
    ]]>
    Y Nada :(

    ResponderEliminar
    Respuestas
    1. Al poner el código has eliminado una llave de cierre } de los estilos que están arriba, es por eso que no te funcionó.
      Más información: http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  27. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Acuérdate que si ya tienes jQuery debes omitir la primera línea del código.

      Pd. Elimino el comentario por el aviso que está arriba del formulario.
      Saludos.

      Eliminar
    2. Gracias potro quite la primera linea y se arreglo mi slide bar pero ahora cuando escojo alguna canción se abre una pagina solo para la canción, ayudame que codigo me falta

      Eliminar
    3. Debes omitir la primera línea del código, no todo el código, sin él no funcionará. Lee detenidamente las instrucciones ;)

      Eliminar
  28. Hola, El Potro. Tengo un problema. Las canciones suenan, pero no se muestra el playlist completo.

    http://pokemonftproyecto.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola Carlos, puede ser porque un poco más arriba, en el código del #search-box { eliminaste (supongo que por error) la llave de cierre } de ese bloque de estilos.

      Aquí hay un poco más de info sobre ese problema:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  29. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Repito: omite la primera línea, no todo el primer código. La primera línea es la librería jQuery, esa ya la tienes por eso no hace falta ponerla otra vez. El resto es el script que hace que el playlist funcione, si también lo omites no funcionará.

      Eliminar
    2. pues eso es lo que hice talvez el jquery que tengo no es comatible con el del reproductor o es mas antiguo no se porque pasara eso

      Eliminar
    3. ya lo solucione lo que pasaba era que el jquery de el reproductor chocaba con el jquery de slidebar

      Eliminar
  30. Buenas noches, muy bueno el reproductor. Quería preuntarte se habría alguna manera de hacer que sonará al abrir la página directamente y si se podría poner la reproducción en modo shuffle. Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Yo lo he intentado pero no he tenido éxito con ello. Si más adelante me entero cómo hacerlo se los haré saber.

      Eliminar
    2. Muchas gracias!!! estaré atento.

      Eliminar
  31. Perdon pero no encuentro esto: ]]> Gracias

    ResponderEliminar
  32. Perdon gente, pero no encuentro esta etiqueta: ]]>
    Alguien me ayuda? gracias

    ResponderEliminar
    Respuestas
    1. Da click en la flechita que está junto a <b:skin>...</b:skin> luego presiona las teclas CTRL + F y localiza la etiqueta que buscas.

      Eliminar
  33. no me funciona :( solo la primera reproduce y si cambio a la segunda o cualquiera se queda sin hacer nada :(

    ResponderEliminar
    Respuestas
    1. Quizá ya tengas una versión de jQuery, si así fuera deja sólo una, la más reciente y hasta arriba de todo.

      Eliminar
    2. Me refiero a lo de esta entrada:
      http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

      Eliminar
    3. No Potro :( ya puse pero simpre nos e reproducen las demas :( Y Lo Del Chat NO sabes Que Sera?

      Eliminar
    4. No se si Conoces Alguno, Como Para Ponerlo En La Barra Que TEngo Arriba, Con Normal, y Con Una Opcion Para Desplegar El Menu De Canciones Algo como scmplayer, pero mas pequeño la barra no extendida :?

      Eliminar
    5. Nop, pero seguro en la red encuentras más opciones, yo lo único que he publicado sobre esos temas están en la categoría "Música", pero no es mucho en realidad.

      Eliminar
  34. Voy a crear playlist de audio y video , si esto funciona me saco la lotería. Luego recomento.

    ResponderEliminar
    Respuestas
    1. Si me anduvo de 10 con videos alojados en DROPBOX en formato MP4 y WEBM, mirá como quedó http://misvideosinfantiles.blogspot.com/2014/05/canciones-de-la-granja-2-lista-de.html , muchas gracias!!!! Aguante el HTML5

      Eliminar
    2. Entonces te has sacado la lotería :)

      Eliminar
  35. CUANDO LO CREO NO FUNCIONA BIEN
    SE AGREGA


    Hola, tu navegador no está actualizado y no puede mostrar este contenido.

    POR QUE?

    ResponderEliminar
    Respuestas
    1. Hola Jesús, ¿qué navegador usas y qué versión tienes de él?

      Eliminar
  36. Holaa,esto funciona con las vistas dinámicas? Hace rato ando buscando una manera de poner música en las plantillas dinámicas, habrá alguna manera ? Si la hay, me podrías ayudar? Muchas gracias :D

    ResponderEliminar
    Respuestas
    1. No Ana Paula, lamentablemente esas plantillas no admiten prácticamente ningún gadget.

      Eliminar
  37. hola Potro, muchas gracias por tu tiempo. Vengo con una molestia, puse el reproductor y me funciono bien, pero hoy que entre a mi blog, ya no pude reproducir ninguna canción, le doy a play y nada, selecciono otra canción y se ve como que si fuera a funionar pero nada, podrias ayudarme por favor? lo puse en "creaciones arilu" mil gracias

    ResponderEliminar
    Respuestas
    1. Hola Ines, puede ser porque tienes 3 versiones de jQuery y debes tener sólo una:
      http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

      Eliminar
  38. Hey potro gracias por tu aporte..mi blogg lo eh creado a base de tus a aportes..pero el reproductor cuando le doy a elijir una cancion abre un pestaña nueva..y comiensa a descargar el archivo me explicaria como lo puedo resolver...o me dirias cual es mi error...muchas gracias espero tu respuesta

    ResponderEliminar
    Respuestas
    1. Hola Ryuuji T, asegúrate que la URL del archivo sea válida, también que no tengas otra versión de jQuery.

      Eliminar
    2. hola a mi me pasa lo mismo tengo la url valida y no tengo otra version de jquery :/

      Eliminar
    3. perdon pero ya lo solucione habia copiado el script en head... lo cambie al body... ya no esta el problemas

      Eliminar
  39. Oye como podria cambiar el boton de play por el boton de mute para hacerlo como una radio para que nunca se detenga y siga como una radio y tambien para que la musica sea aleatoria?

    ResponderEliminar
    Respuestas
    1. Me temo que tendrás que conseguir otro reproductor más avanzado para lograr lo que deseas.

      Eliminar
  40. Gracias, muy buen aporte pero tengo un problema a la hora de incluirlo en mi web.

    El problema es que a la hora de clickar en las canciones se abre una pestaña nueva. He incluido el CSS y el HTML necesarios, pero el script de JQuery no me lo lee. He probado a quitar la primera línea, a ponerlo en el head, al principio del body, al final, etc, y nada.

    ResponderEliminar
  41. Hola potro, hace un día que he creado este blogg y he seguido los pasos que has mencionado, he revisado si he quitado sin querer algún signo pero no,y también he revisado lo de jQuery pero solo tengo un archivo de ellos. Y aún tengo el problema que no reproduce el audio =C
    ¿Algún Consejo?

    ResponderEliminar
    Respuestas
    1. Hola, ¿en cuál blog lo has puesto?

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Este comentario ha sido eliminado por el autor.

      Eliminar
    4. Ya arregle el problema(estaban mal los url de las canciones), pero gracias me ayudo mucho tu tutorial, ya que fue el único reproductor del cual me gusto su apariencia ^^

      Eliminar
  42. Muchas gracias... Pero No se reproduce
    Le doy en Play y nada :(

    ResponderEliminar
    Respuestas
    1. Sin más detalles me es imposible saber como ayudarte :(

      Eliminar
  43. Hola Potro donde encuentro esta parte ]]> en .html o .php o .css no lo encuentro por ningun lado de antemano gracias

    ResponderEliminar
  44. Hola, Potro
    Me gustaría que al hacer click sobre el nombre de la canción también abra una imágen en una entrada. ¿es posible?
    Gracias

    ResponderEliminar
    Respuestas
    1. Como posible quizá si lo sea, pero ignoro cómo. De poderse hacer supongo que tendrías que editar el script y añadir nuevas funciones, sin duda sería algo mucho más complejo.

      Eliminar
    2. Vale. ¿Y si se agrega en el gadget con las canciones un enlace a imagen para cada una?

      Eliminar
    3. El asunto es que el script agrega una función para que cuando se dé click a una canción se active el archivo de audio. Para cualquier otra función adicional tendrías que editar todo el script.

      Eliminar
  45. Hola, Potro.
    ¿Se puede poner la primera canción en autoplay sin que se afecte la continuidad del resto? Me gustaría que al abrir el blog automáticamente comience la primera canción y al finalizar ésta continúe la reproducción normal de las otras. Gracias

    ResponderEliminar
    Respuestas
    1. Nop, la función del autoplay está en el reproductor, no en cada canción de manera individual.

      Eliminar
  46. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  47. Muchas gracias por compartir este artículo... Me gustaría saber como añadir una barra de desplazamiento a la lista de reproducción..

    ResponderEliminar
    Respuestas
    1. "Hola, tu navegador no está actualizado y no puede mostrar este contenido"... no puedo ver lo que dice allí con ningún navegador... por favor quisiera saber de que se trata.

      Eliminar
    2. Hola DiegoAlberto, actualiza el navegador que utilices a su última versión, de preferencia cualquier otro que no sea Internet Explorer. Saludos.

      Eliminar
  48. Hola:
    Agradezco mucho el tutorial y la atención de los comentarios.
    Mi problema es que tengo alojadas las mp3 en Dropbox y cuando le doy a cualquier canción me cambia la página a la dirección de la canción (en dropboxusercontent.com) apareciendo una barra que reproduce la canción y teniendo que dar atrás para volver al reproductor.
    He probado quitando y poniendo la línea de jQuery pero hace lo mismo.
    Esto me pasa en Firefox. En Internet Explorer no cambia de página, pero se abre el reproductor de Windows Media para reproducirla.

    ResponderEliminar
    Respuestas
    1. Hola pepe, ¿en cuál blog has puesto el reproductor?

      Eliminar
    2. Gracias por responder.
      No es un blog sino una web hecha con Dreamweaver. Tengo el reproductor en un iframe cuya página estoy modificando para cambiarlo por este. De momento se llama can.htm en la web discolo.com

      Eliminar
    3. No veo que tengas la primera línea del script que es jQuery, sin ella no funcionará.

      Eliminar
    4. Lo he probado con y sin línea y el resultado no varía. Acabo de añadirla y sucede lo mismo.

      Eliminar
    5. Hay ciertas normas que se aplican sólo en páginas web, como poner el script así:
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

      En lugar de así:
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'></script>

      Y eliminar estas partes del código que utilizamos los usuarios de Blogger.
      //<![CDATA[
      //]]>

      Eliminar
    6. Hecho; pero sigue ocurriendo lo mismo.

      Eliminar
    7. Hay que revisar bien las instrucciones de la entrada. El script va antes de </body>

      Eliminar
    8. Es verdad, lo había puesto en head y al pasarlo a body funciona perfecto en Firefox. En Internet Explorer sigue abriéndose el reproductor de Windows Media. Tal vez sea debido a la configuración que tengo.
      Sea como sea agradezco mucho tu paciencia y soporte.

      Eliminar
    9. Con Internet Explorer no sabría ayudarte pues no tengo ese navegador, pero hasta donde recuerdo, cuando realicé la entrada lo probé también ahí y funcionaba, eso sí, sólo en la versión más nueva.

      Eliminar
  49. hola potro como puedo agregarle un scroll para que no se me haga tan grande la lista

    ResponderEliminar
    Respuestas
    1. Debajo de #playlist { agrega:

      height:80px;
      overflow:scroll;

      Eliminar
    2. muchas graxias potro si me funciono. saludos....!!

      Eliminar
  50. Hola, antes que nada muchas gracias por el tutorial, me ha parecido muy util, sin embargo al intentar cambiar de una canción a otra, me manda a una pagian diferente, ¿podrías ayudarme con este problema?
    De antemano gracias por la ayuda y nuevamente felicidades por tu blog.

    ResponderEliminar
    Respuestas
    1. Hola, prueba poniendo esta línea:
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'></script>

      Justo después de <head>

      Eliminar
  51. Ayuda amigo muy bueno el reproductor, pero tengo un problema...cuando selecciono la canción siguiente se manda a descargarse y no reproduce cual sera el problema? mi plantilla es muy rara y no encuentro bien las etiquetas y ]]> ise lo q pude en este blog de prubas http://superdoyer.blogspot.com/2015/03/musica-para-tus-oidos.html y dejame felicitarte por tu grandioso blog siempre ayuda.

    ResponderEliminar
    Respuestas
    1. Tal vez pueda ser porque tienes dos veces la versión de jQuery y debes tener sólo una:
      http://www.ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

      Eliminar
  52. Hola Potro, el reproductor se ve excelente pero estaría bueno que el buffer empiece a cargar cuando el usuario quiera escucharlo y no cundo entre al post así no le consume el internet. Se podrá implementar esta opción? Espero tu respuesta.. Saludos.

    ResponderEliminar
  53. Hola. Es muy bueno este reproductor, pero tengo ciertos problemas, por si me los pudieras seleccionar. Primero, cuando cambiar de pista en la playlist, no cambiar el estilo de la canción. Segundo, cuando seleccionas una pista, se abre en una nueva ventana, cuando no debe ser así, según el ejemplo que pones. Muchas gracias por tu atención. Un saludo.

    ResponderEliminar
    Respuestas
    1. Hola ALBERTO, sin ver en cuál blog lo has puesto me es imposible saber cómo ayudarte :(
      Saludos.

      Eliminar
  54. Hola, tengo una pregunta, en la parte de la imagen del reproductor se pone una URL?

    ResponderEliminar
  55. ¿Cómo le podría hacer para no poner las URL a mano de cada canción?, para que se llene automaticamente la lista solo dando la dirección o path de donde se encuentran almacenadas todas las canciones.

    ResponderEliminar
  56. tengo un problema, eh puesto el codigo y eh seguido los pasos, pero al tocar otra cancion, se va a una pagina negra con la cancion en el centro, en vez de reproducirla y ya

    ResponderEliminar
  57. UNA PREGUNTA AMIGO YA LO INSTALE EN MI WEB DE UN DOMINIO PROPIO , LA PREGUNTA ES, ¿CUANTO DE ANCHO DE BANDA ME CONSUMIRIA ? , TE AGRADECERIA TU ASISTENCIAS, GRAX!!! :)

    ResponderEliminar
  58. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  59. como se le agrega el atributo de autoplay?

    ResponderEliminar
  60. quien es la cantante???? de las canciones que tienes en el reproductor.
    muchas gracias

    ResponderEliminar
  61. Una consulta si quisiera que cuando entren a mi blog se reprodusca automaticamente este reproducto donde tendria que hacer el cambio?

    ResponderEliminar
  62. Buenas me parece un gran aporte pero tengo el pequeño problema con el de video que mostrare en esta captura si puedes decirme en que estoy fallando te lo agradeceria en el alma, ando super atrasado en esta pagina por favor.

    http://prntscr.com/9ndvas

    ResponderEliminar
  63. Tengo un problema,cuando hago click en una canción, me salta a otra pagina para reproducirme el archivo y no se como arreglarlo

    ResponderEliminar
  64. me pasa lo mismo que dice francisco seguramente porque yo lo tengo puesto en una pagina web real no en el blog este por ello te digo que hay algo que abria que cambiar o algo, espero que me respondas y que encontremos solucion

    ResponderEliminar
  65. Hola, no entiendo muy bien tus instrucciones, me pierdo en el 2 paso, si pongo el codigo y todo pero se muestra todo el codigo en mi blog hasta arriba

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger