 Autor
|
Tema: [HTML5] Reproductor MP3 (Leído 17,397 veces)
|
Usuario Invitado
 Desconectado
Mensajes: 625
|
HTML5 MP3 Player
He creado un reproductor de audio en base a la API audio de HTML5. Solo lo hice por diversión, así que tal vez haya algún bug, aunque he tratado de no dejarlos xD. NOTA: También hace uso de PHP. El uso que hace de PHP es en unas pocas líneas. Como sabrán los navegadores no permiten que desde un servidor se pueda acceder a los archivos locales del cliente, por cuestión de seguridad. Tampoco se puede obtener la ruta absoluta de los archivos que se arrastren mediante el API de drag and drop de HTML5. Por tal motivo, se me ocurrió tener toda la música en nuestro document root de Apache: Y con PHP escanear el directorio que se arrastre en busca de archivos .mp3. Luego, agregarlos a la lista de reproducción. FUNCIONAMIENTO
- Para agregar música se aprovecha el API drag and drop de HTML5 para arrastrar directorios donde tengamos música.
- Para eliminar canciones de la lista de reproducción se hace click derecho sobre la canción y en el menú contextual, pulsar Eliminar (no se puede eliminar una canción que se está tocando actualmente).
- Las imágenes del reproductor se pueden descargar desde aquí.
-
 Se ha añadido soporte para reproducción aleatoria.
IMÁGENES
 DESCARGA
Para el que quiera modificarlo, se puede descargar desde mi Github: HTML5 MP3 player.
|
|
|
|
« Última modificación: 17 Febrero 2015, 19:59 pm por Gus Garsaky »
|
En línea
|
"La vida es muy peligrosa. No por las personas que hacen el mal, si no por las que se sientan a ver lo que pasa." Albert Einstein |
|
|
Maurice_Lupin
Desconectado
Mensajes: 356
GPS
|
Hola Gus Garsaky, me gusta la interfaz, me parece raro que con javascript no se pueda listar archivos en el cliente, si me hago un tiempito lo reviso y te comento.
Saludos.
|
|
|
|
|
En línea
|
Un error se comete al equivocarse.
|
|
|
Usuario Invitado
Desconectado
Mensajes: 625
|
Por razones de seguridad no se puede acceder al sistema de archivos local, ni siquiera puedes saber la ruta absoluta al soltar elementos mediante drag and drop de HTML5. Creo que con Firefox es la única forma de obtenerlo.
He aprovechado para actualizar el post para agregar el modo random que había olvidado implementar.
Salu2 y gracias por comentar.
|
|
|
|
|
En línea
|
"La vida es muy peligrosa. No por las personas que hacen el mal, si no por las que se sientan a ver lo que pasa." Albert Einstein |
|
|
|
dimitrix
|
El CSS es tuyo o es editado?
|
|
|
|
|
En línea
|
|
|
|
Usuario Invitado
Desconectado
Mensajes: 625
|
Sí, es mío. No me gusta usar bibliotecas CSS como Bootstrap o Foundation. Tampoco me gusta usar JQuery para el desarrollo común, prefiero javascript a pelo o como le dicen VanillaJS xD.
|
|
|
|
|
En línea
|
"La vida es muy peligrosa. No por las personas que hacen el mal, si no por las que se sientan a ver lo que pasa." Albert Einstein |
|
|
|
|
|
|
Usuario Invitado
Desconectado
Mensajes: 625
|
Tienes razón @MinusFour, aunque no se podría trabajar con directorios, si no directamente con los MP3s pero eso no cambia nada. Me inclino por usar Blobs. Simplemente se haría así: function handleDrop(e) { e.stopPropagation(); e.preventDefault(); document.querySelector(".translate-tier").style.width = "0%"; buildTrackList(e.dataTransfer.files); }
function buildTrackList(files) { var i = Object.keys(trackList).length; for(i; i<files.length; i++) { trackList[i] = createMP3(files[i]); tracksNames[i] = formatTrackName(files[i].name); attachAudioListeners(trackList[i]); } }
function createMP3(file) { var audio = new Audio(); audio.src = window.URL.createObjectURL(file); audio.type = "audio/mpeg"; return audio; }
Y ya no habría razón para usar PHP. Gracias por el dato. |
|
|
|
« Última modificación: 18 Febrero 2015, 16:37 pm por Gus Garsaky »
|
En línea
|
"La vida es muy peligrosa. No por las personas que hacen el mal, si no por las que se sientan a ver lo que pasa." Albert Einstein |
|
|
Maurice_Lupin
Desconectado
Mensajes: 356
GPS
|
Lo probe en firefox 14 y la interfaz se desconfigura un poco, requiere algunos cambios en Css para que sea compatible. En chrome no hay problema. Por ahi tengo un codigo para reproducir mp3 o OGG por si el navegador no soporta mp3, lo malo es tener una copia de la musica en 2 formatos. Usé la libreria minim.js por si te interesa Saludos. |
|
|
|
|
En línea
|
Un error se comete al equivocarse.
|
|
|
|
MinusFour
|
Te recomendaria que le pusieras github pages con el cambio a blobs. Asi todos los pueden probar desde sus navegadores.
|
|
|
|
|
En línea
|
|
|
|
|
| Mensajes similares |
|
Asunto |
Iniciado por |
Respuestas |
Vistas |
Último mensaje |
|
|
|
Reproductor flash/HTML5(?) o lo que sea en mi web, de vídeos y música
Desarrollo Web
|
Kasswed
|
1
|
3,146
|
3 Enero 2012, 15:50 pm
por Carluís
|
|
|
|
Reproductor con HTML5 y javascript
Desarrollo Web
|
IlyaBakhlin
|
0
|
2,326
|
15 Abril 2012, 01:06 am
por IlyaBakhlin
|
|
|
|
Youtube en opera nunca carga el reproductor html5 solo flash
Software
|
seu230
|
6
|
1,939
|
15 Julio 2015, 20:42 pm
por seu230
|
|
|
|
Twitch empieza a migrar su reproductor de videos a HTML5
Noticias
|
wolfbcn
|
0
|
1,571
|
23 Julio 2015, 02:11 am
por wolfbcn
|
|
|
|
Netflix anuncia mejoras para su reproductor HTML5 con especial atención para ...
Noticias
|
wolfbcn
|
0
|
10,379
|
22 Marzo 2017, 15:25 pm
por wolfbcn
|
 |
