JMiur [E]

Este es un reproductor de audio que utiiza JavaScript, no requiere librerías externas y nos da la posibilidad de usar la etiqueta de HTML5 <audio>, aún en los navegadores que no la soportan por lo tanto, funcionará bien en Internet Explorer, Firefox, Chorme, Safari y Opera.

Se llama audio.js y si descargamos el ZIP, veremos que en una carpeta audiojs se encuentran los tres archivos necesarios: audio.min.js, audiojs.swf y player-graphics.gif. El primero es el script en si mismo, el segundo un reproductor de Flash para aquellos navegadores que no soportan HTML5 y el tercero un sprite con las imágenes utilizadas.

A diferencia de otros reproductores que usan la etiqueta audio, este, sólo admite archivos MP3s que son los más comunes.

Para usar esto hay una condición que debe cumplirse y e es que los tres archivos deben estar alojados en algún servidor pero, dentro de la misma carpeta. No todos los servicios de alojamiento de archivos permiten eso ya que, por lo general, las carpetas son virtuales y no reales; por ejemplo: DropBox o Fileden.

Para estos demos lo he colocado directamente todo en un post pero, si es algo que se va a usar con regularidad, mejor es colocarlo en la plantilla misma así que allí, antes de </head> agregamos esto:
<script src="URL_audio.js"></script>
<script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>
Y eso es todo; a partir de ese momento, ya podemos usar la etiqueta en cualquier parte y por defecto, sería algo así:
<audio src="URL_archivo.mp3" preload="auto" />
El script nos permite agregarle parámetros como autoplay para que comeince a reproducirse automáticamente o loop para que el audio se reproduzca de modo indefinidamente:
<audio src="URL_archivo.mp3" autoplay />

<audio src="URL_archivo.mp3" loop />
Para quienes les gustan las listas de reproducción, también es posible crearlas pero, para eso deberán estudiar el demo ya que no hay muchas explicaciones al respecto pese a que el script está muy bien documentado.

Es importante decir que si vamos a colocar varios reproductores, lo mejor es colocar la etiqueta dentro de un DIV o de un párrafo:
<div> <audio src="URL_un_archivo.mp3" preload="auto" /> </div>

<div> <audio src="URL_otro_archivo.mp3" preload="auto" /> </div>
Y para quines tengan paciencia, pueden sobrescribir el CSS por defecto, agregando el estilo en la plantila, justo después del script; por ejemplo, podríamos cambiar el tamaño y el color de fondo ya que por defecto, dice esto:
<style>
  .audiojs {
    width: 460px;
    height: 36px;
    background: #404040;
    overflow: hidden;
    font-family: monospace;
    font-size: 12px;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444)); \
    background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%);
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
  }
</style>
Por ejemplo, para centralo, simplemente he puesto:
.audiojs {margin:0 auto;}

75 comentarios:

Alexis  

¿Entonces cuando el mp3 en html5 no es compatible pasa al flash? Yo hice pruebas con el audio en html5 y se me complicaba con los formatos. No todos los navegadores admiten usar la etiqueta audio con mp3, por ejemplo. Por ahí hay una tabla que explica eso.
Mi problema está en que yo quiero evitar usar flash para reproducir audio, sin importar el navegador, pero me parece que es imposible, ¿no?

Saludos.

Responder
Albus Dumbledore  

JMiur, de nuevo en tú blog, en cuanto a mí último problema ya lo pude solucionar, pero ahora tengo un problema con los títulos de las entradas, cuando guardo una entrada con el título Hechizos [B] la url del post es http://elclubdedumbledore.blogspot.com/2008/11/hechizos-b.html pero cuando quiero guardar una entrada con el título Hechizos [A] en vez de aparecer http://elclubdedumbledore.blogspot.com/2008/11/hechizos-a.html aparece esto http://elclubdedumbledore.blogspot.com/2008/11/hechizos_9868.html ¿Por qué suceden estas cosas, hay alguna solución?. Por cierto sólo pasa con la letra A porque todas las demás letras me funcionan perfectamente, claro obviamente a excepción de la ñ.

Responder
Admin Com.Multimed.  

Buen hallazgo Miur :) Ya me he hecho eco de él. Aunque el formato MP3 que usa me plantea una duda: ¿que pasará con navegadores que acepten HTML5? ¿Aceptará MP3? Lo digo porque HTML5 usará OGG, ¿no?

Responder
Anónimo  

Hola Jmiur oye tengo una duda google o los buscadores indexan todos los links de mi blog cada cierto tiempo, entonces si por ejemplo alojo mi imagen en picasa: http://lh3.ggpht.com/_Nvr4cjMytyk/TN207naTHuI/AAAAAAAAA3U/MDkGO0iQHNc/180x40.png

y si pongo el enlace y la imagen en otro blog y cada vez que los buscadores osea google indexe el blog donde coloque la imagen con el link indexara el mio aunque este alojado en picasa?

Ejemplo:

<a href="http://nitragames360.blogspot.com/"><img alt="Nitra Games 360! Download Games XBOX 360 Free" src="http://lh3.ggpht.com/_Nvr4cjMytyk/TN207naTHuI/AAAAAAAAA3U/MDkGO0iQHNc/180x40.png" border="0" style="width:165px; height:34px;" /></a>

los buscadores indexaran la imagen con el link asia mi blog si la imagen esta alojado en picasa?

Responder
JMiur  

Alessis:
Tanto los archivos de audio como los de video en el futuro HTML5 aún están en discusión (patentes, dinero, egos, etc,etc) y los navegadores admiten formatos diferentes y los van adaptando a las diferentes versiones. Aún no existe nada definitivo y dudo mucho que haya algo definitivo a corto plazo por lo tanto, todo este tipo de scripts resuelve el problema de las compatibilidades.
No, no hay forma de reproducir MP3s sin Flash en el 100% de los casos. Tal vez, nunca lo haya.

Albus Dumbledore:
La verdad, lo desconozco. Preuba guardar lae entradas con el título tal como quisieras que se vea la URL: hechizos-a y luego, editas la entrada y le pones el título que quieras; la URL inicial no cambiará.

Santi Folch:
Los formatos aceptados aún están en discusión; nada es definitivo y aún falta mucho para que se pongan de acuerdo si es que alguna vez se ponen de acuerdo. Todos los scripts que hacen uso de este tipo de cosas, tienen en cuenta esos detalles.

Responder
JMiur  

Admin:

No sé que quieres hacer pero, da la impresión que lo estás mostrando es un banner. No tiene la menor importancia si la imagen está en Picasa o en cualquier otro lado.

Los enlaces de las páginas son indexados cada vez que un motor de búsqueda las visita pero, eso no significa que "visiten" todos los sitios que indexan; lo harán cada cierto tiempo de acuredo a lo que sus algoritmos le indiquen en función de la relevancia del contenido que encuentren y de los cambios que haya entra una visita y otra.

En las Herramientas para Desarrolladores de Google hay una opción que define eso y se llama Frecuencia de Rastreo. Puedes cambiarla para sugerirle que lo haga más seguido durante cierto tiempo y luego volverá a la normalidad,

En Blogger, todas las entradas son indexadas lo que no significa que aparecerán en algún lugar privilegiado de los resultados de una búsqueda; eso, dependerá del contenido.

Responder
David  

cuales son las instrucciones para usarlo?tengo que hacerlo en la opción de "Edición de HTML" de mi blog?soy un novato,agradecería tu ayuda

Responder
JMiur  

Las instruccione son las que indiaca la entrada. Si; debe colocarse ne la plantilla.

Responder
Stranno  

El que yo estoy utilizando ahora es el 1Bit Audio Player, ocupa muy poco (pero no un bit :-P) y está preparado para no descuadrar las lineas de texto, la verdad es que es muy estético. El problema es que solo tiene play/pause, no se puede subir el volumen o avanzar/retroceder en el audio


Para scripts/flash/pequeños archivos yo ahora estoy utilizando Dropbox y va de lujo, más simple y rápido que Google Sites o FileDen que también soportan flash o scripts. Y mira que no me mola demasiado DropBox por el hecho de tener que mendigar referidos para conseguir 10 cochinos gigas, pero para estos menesteres lo borda

Responder
Gem@  

Al final y después de consultarte por mail me decanté por este reproductor y ahí va la pregunta.
¿Se puede añadir para que la reproducción sea automática al acceder al blog sin necesidad de editar el script ? :(
Algo como agregarle un parámetro igual que se hace con loop por ejemplo?

Responder
JMiur  

Según leo, si. Debería ser algo así:

<audio autoplay="autoplay" src="URL_archivo"></audio>

Responder
Gem@  

Pues no salta la música así es como lo tengo puesto y es necesaria el play :(
Voy a comprobar.

Responder
Gem@  

Perfecto!! no estaba añadiendo autoplay="autoplay" Gracias :D

Responder
JMiur  

Perfecto :D

Responder
ofo1965  

Este script sirve para reproducir una lista de reproducción, o sea, varios temas mp3, o solo un tema.

Gracias de antemano.

Responder
JMiur  

También soporta listas de reproducción. Ese detalle debes verlo en la página del autor.

Responder
Adolfo Rodríguez  

Gracias J.

Responder
SubiOnBass  

Hola, soy otro novato que hace poco he conocido el html a través de blogger. Agradecería mucho que me ayudaras. Soy músico y creo que este es el reproductor que estaba buscando para colgar canciones en las entradas de mi blog.
He probado dewplayer y el de Yahoo, pero ahora ya más o menos entiendo porqué no funcionaban en el ipad, etc...
Por cierto, el dewplayer se me "movía" al publicar la entrada. El sistema de los div lo soluciona, no? Se puede aplicar a todo bicho moviente?

En fin, que lo he pobado de varias maneras, siguiendo tus instrucciones i las de otros blogs y no hay forma de implementarlo (se dice así?).
Se debe a que tengo los 3 archivos del reproductor en dropdox? (En la misma carpeta que los mp3). No entiendo si el ejemplo que pones son de servidores válidos o no... Si no, dónde podría colgarlos?
Otra duda es si sólo tengo que poner la URL de la canción o también la del reproductor. También he probado de poner la de la carpeta del dropbox entre las comillas en lugar de URL_audio.js

Doctor, es muy grave?
SOS

Responder
JMiur  

No entiendo eso de que "se movía"; debería ver un ejemplo concreto para decirte el motivo.

El reproductor y el resto de los carchivos que conforman el script deben estar en la misma carpeta; losa rchivos MP3, pueden estar en cuaqluier otro lado. En el post, se alojan todos en DropBox.

No hace falta indicar la URL del reproductor SWF ya que el script presupone que está en la misma carpeta; lo único que debe indicarse es la URL del archivo de audio a reproducir.

Responder
SubiOnBass  

Gracias, JMiur.
Al final lo conseguí, pero tuve que ponerle la URL del reproductor... El caso es que funciona.
Sólo me da un error en Safari 5: el primer reproductor de la primera entrada no se carga. ¿Alguna idea del porqué?

¿Álguien ha conseguido hacer una lista de reproducción? Tengo previsto hacer unos posts com mi discografia y quería poner unas 5 canciones en cada uno. Si pongo 5 reproductores quedará muy aparatoso.

Respecto a lo de 'moverse' me refería a que se descentraban en el post respecto a la edición. Creo que es un problema frecuente en Blogger. Con este nuevo reproductor ya no tengo problema ya que en tu post está la manera de centrarlo.

Un saludo.

www.subionbass.blogspot.com

Responder
Juan Luis  

hola he añadido a mi pagina el reproductor de musica que aqui se comenta pero tengo una duda yo en el scr de la etiqueta necesito darle una ruta absoluta yo tengo una cosa así:


el problema es que no carga.

el problema es el tema del servidor tengo un servidor con dos discos duros c que es donde tengo alojado todo el proyecto y d un disco duro con una gran capacidad y pretendo guardar ahi los archivos que cada usuario suben entonces no me sirve una ruta relativa y tampoco me serviria una ruta absoluta del tipo www.konecting.com/...... ya que esa carpeta estaria en c que es donde esta el proyecto.

Si lo hago con ruta relativa es decir no salgo de c se reproduce sin problemas y la verdad es lo único que me falta para poder terminar la aplicación.

Un saludo.

Responder
JMiur  

No entiendo a que te refieres porque no se ve la dirección URL a la que haces referencia.

Responder
Fuera de Tiempo  

Hola Jmiur, no es la primera vez que visito el blog pero si la primera que escribo y creo que te voy a llenar de preguntas!! pero de a poco.
Es la primera vez que armo un blog y me fué bastante bien (aunque todavia le falta). Este se trata de un programa de radio en el que alojo los programas grabados, el programa dura dos horas y los divido en dos partes (mp3) que tienen mas o menos 50 mb cada uno, los subo a 4shared que me da la posibilidad de incrustar el reproductor flash y hasta ahora no tuve problemas. Ahora la pregunta es la siguiente: estoy recargando demasiado el blog con esto? si es no lo sigo usando y si es si, hay otra posibilidad de algo mas liviano?. Probe con otros reproductores pero no funcionaron. Que me recomendás para esto?
Disculpá que me extienda con la pregunta, pero en su mayoria se habla de como reproducir un tema o un playlist, pero no de un archivo solo de 50 mb o 100 mb (si no lo quiero dividir)y no he encontrado nada al respecto en la web ni mucho menos de programas de radio. Con 4shared hasta ahora va bién, pero qué va a pasar mas adelante?
Te dejo la dirección del blog para que lo veas. Desde ya Muchas Gracias!!
http://fdtenradio.blogspot.com/

JMiur  

Si el audio está en un archivo externo, el blog no influye ya que el que tiene el peso del ancho de banda es el servidor donde está el archivo.

Si 4shared admite ese uso y no tiene problemas o limita el ancho de banda, no hay problemas. Caso contrario, deberás buscar alternativas distintas y servicios de podcasts que seguramente no podrían funcionar en Blogger.

Responder
Fuera de Tiempo  

Muchisimas gracias!!

Responder
dp  

muy buenas tardes una consulta tengo una pagina en joomla 1.5 y trate de colocar el codigo audio
en un articulo con el editor html; pero a lo q guardo dicho articulo se borra el codigo y no sale nada en la pagina donde quiero mostrar el reproductor; segui todos los pasos coloco en los archivos en mi servidor coloque script en mi plantilla y todo segui todos los pasos pero no sale nada ME PUEDEN AYUDAR PROFAVOR

JMiur  

Lo desconozco. Hay sistemas de blogs cuyos editores filtran determinados códigos HTML impidiendo que puedan ser agregados. En WordPRess es algo usual y se resuelve editando el PHP correspondiente; en joomla puede ser que haya algo similar; deberías consultar en foros especializados.

Responder
Kikehdz  

Amigo una preguntota!! como le hago para pausar el audio??

JMiur  

Lo desconozco; no sé si tiene esa opción. Fíjate en al web del desarrollador.

Responder
Unknown  

Muy bueno este aporte, pero hay algo que no me funciona y cuando pongo el formato mp3 al codigo que pusieron. cuando guardo para ver el enlace me el reproductor pero no me lo dejas reproducir.
Ayudenme ahy Saludos.

JMiur  

Tendrías que mostrar tu jemplo, caso contrario, es imposible adivinar.

Unknown  

Osea yo puse el reproductor y se ve pero cuando quiero reproducirlo no me aparece el botin de Play.

JMiur  

Insisto. Sin ver el ejemplo ¿cómo podría intentar saber si hay alguna clase de error en alguna parte?

Unknown  

Ta bn pero como puedo subir los esa carpeta a DropBox ese es mi problema

JMiur  

Tal como se sube cualquier otra cosa. En todo caso, mira en el servicio y fíjate en la ayuda

Unknown  

Muchaas gracias ya lo puse mira entra aqui, pero ahora no me aparece el boton de play
http://www.mundodecristo.net/2012/07/elvin-mejia-presenta-sencillo-creyendo.html

JMiur  

La plantilla que estás usando tiene una regla de estilo muy absurda que deberías eliminar, busca esto:

.post-body p {

y allí verás algo como:

height: 1%

elimina esa propeidad que n otiene sentido alguno y, en este caso impide que se vean los botones.

Unknown  

Muy bueno y excelente aporte ya me funciono. mira pero ahora es q cuando pongo en enlace de descargar en la web en el mozilla no me funciona, pero en internet explorer me funciona el boton de descargar. mira entra y observa. Disculpeme por la molestia
http://musicabacanard.blogspot.com/2012/07/elvin-mejia-presenta-sencillo-titulado.html#more

JMiur  

Porque está poniendo el enlace adentro del div con el audio y debe estar afuera.

Unknown  

Me puede poner un Ejemplo por que el div no lo veo

Unknown  

Pero si pongo el enlace de descargar arriba no se me oculta solamente es cuando esta abajo se me oculta en mozilla, pero en el internet explorer se ve el boton.

JMiur  

No dije que lo pusieras arriba sino afuera del DIV del audio:
<div> ....... el audio....... </div>
<div> ....... la descarga ....... </div>

Unknown  

Ey disculpenme por su molesta quieri agradecerle por su colaboración muy bueno el aporte. me fue muy utíl me funciono. Muchas Bendiciones. Dios le bendiga.

Responder
Neonius  

Buen script. Sería bueno que hubiera algo así también para usar la etiqueta video.

Gracias por el aporte :D

Responder
-  

Hola que tal, donde debo alojar mis archivos para luego llamarlos?
Se puede usar dropbox?
Gracias

JMiur  

Sí; DropBox sirve para eso.

Responder
Eugenia  

De donde se baja el audio.js?? No encuentro el link

JMiur  

Allí esta:

Se llama audio.js y si descargamos el ZIP ..............

Responder
julian hernandez  

Buenas

No consigo que se vean los reproductores. Seturo que estoy haciendo algo mal. Lo que no entiendo es proque se habla de un archivo audio.js, cuando el que viene en el zip se llama audio.min.js ¿No estaré haciendo a una llamada a un archivo incorrecto? He probado todas la convinaciones renombrando el archivo y cambiando las rutas pero nada. Por favor, te rogaría que fueras mucho más específico a la hora de indicar que arvhivo va en cada carpeta y cual es el código, especificando el nombre de los arvhivos exacto. Estoy muy confundido, llevo toda la mañana con varios navegadore y variaciones y no consigo nada. Muchas gracias.

JMiur  

audio.js y audio.min.js son el mismo archivo, uno común y otro minimizado.

No hay necesidad de ser "más específico" ya que el contenido del ZIP puede variar a lo largo del tiempo y esos cambios, si existen, están claramente indicado en la página del desarrollador:
http://kolber.github.com/audiojs/

Responder
Unknown  

Excelente aporte unos de los mejores, pero quiero informale que el reproductor suena con la canción pero despues deja de funcionar y no suena mas, me puede ayudar ahy

JMiur  

No veo que ocurra eso acá pero, debería ver tu ejemplo.

Responder
Unknown  

Si yo lo pongo me suena el audio y bien en todos los navegadores pero luego de un ratico dejan de funcionar y no suena mas, hasta que vuelva y ponga otra entrada.

JMiur  

Los reproductores no tienen términos medios, funcionan o no funcionan, si se corta el audio, es probable que sea porque el sitio donde está alojado tiene alguna restricción pero, sin ver el ejemplo, no puedo agregar nada más.

Unknown  

Mire esta entrada
http://www.mundodecristo.net/2012/08/jl-jesus-liberta-lanza-sencillo-vamos.html
Mire ver si le funciona y me dice...

JMiur  

Tal vez lo escuches porque estás logueado en mediafire pero, para cualquier otra persona, el audio es inaccesible ya que la direccion:

http://205.196.123.15/e3hec1b76hyg/4iqlgj8ploi752o/JL+%28Jes%C3%BAs+Liberta%29+-+Vamos+A+Celebrar.mp3

te lleva a la página de descarga.

Unknown  

Si esa es entonces que debo de hacer en ese caso me puede ayudar.

JMiur  

Debes subir el audio a algún servicio que permita usarlo, por ejemplo, DropBox o Google SItes.

Unknown  

Muchisimas gracias lo subi a Dropbox y me da este codigo pero no me suena
https://www.dropbox.com/s/pt5mw50wjvqemx7/Elvin%20Mej%C3%ADa%20-%20No%20es%20mi%20Batalla.mp3

JMiur  

Probablemente, la dirección es errónea porque se abre una página web. Debes usar el acceso directo. Tal vez, esta entrada ayude.

Responder
Miguel Ángel  

Hola que tal, disculpa la molestia, vi el blog y está muy interesante tu publicación, pero el audio se puede agregar de manera directa o se tiene que alojar primero, lo digo por que hice algo como y me sale un error, no carga el archivo de audio. Te agradezco de antemano. Saudos

JMiur  

¿Qué significa agregarlo directamente? Todo archivo de una página web, sea el que sea, debe estar alojado en alguna parte.

Miguel Ángel  

Me refiero, por ejemplo si se puede especificar la ruta en donde se encuentran los archivos de música dentro de la etiqueta audio, pero que estos archivos estén en alguna carpeta de la PC.

JMiur  

Como dije antes, los archivos de una pagina web deben estar en un servidor; caso contrario, las personas no podrán acceder a ellos.

Responder
Miguel Perilla  

Buenas tardes si mira yo lo utilizo y me funciona muy bien pero cuando intento llamarlo desde un archivo php que se carga en un div atraves de ajax no carga el reproductor al guien me podria ayudar con mi caso gracias de ante mano.

JMiur  

Habría que ver la forma en que lo haces. Si usas AJAX, debes verificar que el código no sólo se cargue sino que además, se ejecute el script.

Miguel Perilla  

Primero que todo gracias por responder, el scrip se ejecuta perfectamente ya que no solo cargo el reproductor de audio sino tambien cargo un contenido en texto y un video y estos me cargan perfectamente.

Aclaro que el audio lo invoco en el index,solo pongo la etiqueta en el php que se carga en el div ya lo intente invocandolo en el php pero aun asi no funciona.

Gracias,

JMiur  

Habría que ver tu ejemplo y el código que utilizas. Con Ajax, se carga todo pero, si hay scripts, por defecto, estos no se ejecutan. Deberías hacer un debug y ver si salen errores en las funciones o si estas se ejecutan.

Miguel Perilla  

estoy mirando y alparecer me esta es ingnorando la etiqueta como puedo solucionar eso muchas gracias

JMiur  

Como dije, sin ver el ejemplo y el código, es imposible saberlo.

Responder
Miguel Perilla  

si mira la paguina es la siguiente https://www.ustarizabogados.com/utlr/index.php?option=com_content&view=article&id=2177&Itemid=623

de antemano muchas gracias

JMiur  

Es que la función no se ejecuta. Sólo lo hace con aquellas etiquetas que hay en la página al momento de ejecutarse. Cuando cambias ese contenido con Ajax, deberías volver a ejecutar la función.

audiojs.events.ready(function() {var as = audiojs.createAll();});

Por otro lado, parece que no no hay un reproductor para MP3s por lo tanto, en ciertos navegadores no escucharás nada:
https://www.ustarizabogados.com/utlr/templates/pruebautlr/audiojs/audiojs.swf

Miguel Perilla  

Lo hice de esta forma ya sale el reproductor pero no se puede dar play ya que se queda cargando.


De nuevo muchas gracias por su colaboración.

Responder
MyEspacioOnline.com  

Hola me gustaría saber como cambio el tamaño del reproductor audiojs. Al cambiar el alto y ancho, no lo hace proporcionalmente. Gracias

JMiur  

Si cambias el ancho y el alto la proporción es otra, será esa que has definido con ambos datos.

Responder
 
CERRAR