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?