0

Aviso de antemano que esto no funciona solo en dispositivos moviles, si esto mismo lo intento ejecutar en el navegador con el mismo archivo que tengo en el móvil funciona de manera correcta, ademas me encuentro utilizando el navegador chrome en el móvil

Cosas importantes a tener en cuenta:

  • Se esta usando nodejs como servidor junto con express y socket.io, se indica al servidor que sea estatico.

  • El servidor esta siendo ejecutado en linux-ubuntu18.04LTS-64bits.

  • Se esta usando el metodo estatico readAsDataUrl de la clase FileReader para leer la información, es decir el valor devuelto es una cadena codificada en base64.

Curiosidad:

Con FileReader no solamente intento leer archivos de audio, en especifico el tipo mp3 si no que tambien leo otro tipo de archivos como documentos de texto, archivos de word, excel, power point e incluso vídeos, sin embargo.

Lo extraño de esto es que FileReader no esta teniendo problemas para leer ninguno de los archivos mencionados arriba, incluyendo los de vídeo, esto tanto en chrome móvil como en chrome de escritorio, pero cuando se trata de archivos de audio la cosa es diferente, no lee los archivos correctamente o no encuentra el MIME type adecuado para el archivo... esto como digo, solo me pasa en el chrome de móvil.

Los tipos de archivo que puedo leer de manera correcta tanto en móvil como en escritorio son los siguientes:

  • Archivos de imagen: .jpg, .png, .bitmap, .jpeg
  • Archivos de video: .mp4, intente .avi pero al parecer no lo soporta el navegador, y no se si aún no lo soporta.
  • documentos: .txt, .pdf, .doc, .xls, .ppt, .docx, .xlsx, .pptx

Problema:

Cuando intento leer archivos de tipo audio en especifico el formato mp3, solo funciona en escritorio, ya que cuando lo hago en el el móvil lo que me devuelve FileReader cuando ejecuto su metodo estatico readDataAsUrl es lo siguente:

"data:application/octet-stream;"

Lo que necesito o espero que me devuelva es:

"data:audio/mp3;"

O algo parecido, y como ya imaginareis, hacer que se soporte el tipo application/octet-stream no es una muy buena idea... debido a que trae diferentes complicaciones e implicaciones de seguridad, ya que según tengo entendido octect-stream puede ser cualquier cosa.

Ahora bien la forma en la que leo el archivo es la siguiente:

html:

<input type="file" name="fileData" id="fileData" accept=".mp3, .mpg, .mpeg,.mpeg-4, .wav, .flac"
            multiple onchange = "handleFiles(event)"/>

js:

//Código reducido, (no es el original):
function handleFiles(ev){

    const files = ev.target.files;

    //Devuelve un File, pero este contiene como type una cadena vacía
    console.log(files[0]);

    const fileReader = new FileReader;

    fileReader.readAsDataUrl(files[0]).then(base64String =>{

       /*
         Imprime un string códificado en base64 pero con data:application/octet-stream
         solo si es un archivo tipo audio y esta siendo leido desde móviles.
       */
       console.log(base64String);

    });

}

Ahora bien, me desconcierta algo... ¿Cómo es que FileReader tiene problemas para leer archivos tipo audio mp3 en móviles pero no tiene problemas para leer algo mas complejo como lo es un vídeo mp4?, ¿Hay alguna forma de solucionar esto para obtener el MIME type correcto y por lo tanto dejar de obtener un string codificado en base64 con extension application/octet-stream?

2
  • Acabo de darme cuenta de algo importante, solo pasa con algunos archivos... otros no.
    – Layer
    Commented el 22 mar. 2020 a las 20:53
  • Encontre el porque pasa esto... la forma mas simple de reproducir esto es cambiar el valor del atributo accept a * para que deje obtener cualquier archivo que se requiera, si no no te dejará elegir archivos aunque nosotros sepamos que son de audio, lo unico que hay que hacer es quitarle la extension al archivo, es decir, si el archivo se llama por ejemplo sample.mp3, cambiarlo a sample, FileReader automaticamente devolvera octet-stream.
    – Layer
    Commented el 22 mar. 2020 a las 22:13

1 respuesta 1

0

Me da la idea que si el solo hecho de cambiar la extensión ya despista al FileReader, entonces el diagnóstico es medio superficial. Para saber el tipo es más confiable usar los primeros bytes del contenido binario, de los cuales usualmente bastan 4 para consultar algún diccionario (ref: List of file signatures)

Para leer el contenido binario, en vez de dataURL lo lees como ArrayBuffer:

async function getMagicBytes(file) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.onerror = (err => reject(err))
    fileReader.onloadend = ({
      target
    }) => {
      const magic_bytes = (new Uint8Array(target.result)).subarray(0, 4).map(chunk => {
        return chunk.toString(16).padStart(2, '0').toUpperCase();
      });

      console.log(file.name + ', type: ' + file.type + ', signature:', magic_bytes.join(' '));
      resolve(magic_bytes)
    };
    fileReader.readAsArrayBuffer(file);
  });

}

document.getElementById("archivo").addEventListener("change", function(event) {
  const files = document.getElementById("archivo").files;
  getMagicBytes(files[0])

}, false);
<input type="file" id="archivo">

En ese snippet si leo un archivo musica.mp3 me dice:

 musica.mp3, type: audio/mpeg, signature: 49 44 33 4

Si le cambio la extensión y vuelvo a subirlo como musica.mov

 musica.mov, type: video/quicktime, signature: 49 44 33 4

El browser ingenuamente se basa en la extensión, pero los magic bytes permanecen inalterados. Y si miras un diccionario, verás que 49 44 33 indica que es un MP3 file with an ID3v2 container.

No incluyo acá el diccionario mismo pero puedes usar por ejemplo https://www.npmjs.com/package/magic-bytes.js o elaborar tú mismo un objeto plano con las extensiones que te interesan.

(me funcionó en android)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.