Foro de elhacker.net

---

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.

---

• 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í (https://www.dropbox.com/sh/fmk4tnoe7ya57hb/AAA2zlB-S2cbnw7n5XzKqVXMa?dl=0).
  
  
• (http://i.imgur.com/DGEAJz4.png?1) Se ha añadido soporte para reproducción aleatoria.
  
  
  
  IMÁGENES

  ---

  
  
  (http://i.imgur.com/HnkMfCf.png)
  
  
  (http://i.imgur.com/OdRAYZj.png)
  
  
  
  (http://i.imgur.com/4M3qRq2.png?1)DESCARGA

  ---

  
  
  
  Para el que quiera modificarlo, se puede descargar desde mi Github: HTML5 MP3 player (https://github.com/GusGarsaky/HTML5-MP3-Player/).

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.

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.

El CSS es tuyo o es editado?

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.

Pues enhorabuena :-)

Me parece que no es necesario usar PHP para esto, puedes usar los nuevos metodos para manejar archivos en HTML5 y puedes usar createObjectUrl para tener una url del objeto cargado en lugar de la ruta en el disco duro.

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

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.

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 (https://github.com/jimmytheleaf/chromatophore/blob/master/chromatophore/minim.js) por si te interesa

Saludos.

Te recomendaria que le pusieras github pages con el cambio a blobs. Asi todos los pueden probar desde sus navegadores.

@Maurice Claro, me interesaría ver el code.

@MinusFour Sí lo haré en un momento, ahora estoy haciendo un POS en PHP, que me desocupe un tanto aprovecho para actualizar todo el repo.



Gracias por comentar.