Estoy usando el elemento HTML5 <audio> en una aplicación de Node.js y tengo problemas con las referencias del archivo y los caracteres especiales al configurar src.track . Al hacer referencia a la ubicación del archivo desde mi base de datos mySQLite3, enviaré una ubicación formateada como:
/Users/admin/Music/iTunes/iTunes Music/Nelly/Nellyville/13 #1.mp3Obtuve el siguiente error:
GET file:///Users/admin/Music/iTunes/iTunes%20Music/Nelly/Nellyville/13%20 net::ERR_FILE_NOT_FOUND Obviamente, se está equivocando en el "#" en esta cadena en particular e ignorando el resto de la cadena. Este formato funciona para todas las referencias excepto para aquellas con caracteres especiales. He probado todos los tipos de codificación, escape y formateo que se me ocurren, incluidos encodeURIComponent() y encodeURI() .
Puedo generar una cadena en javascript usando encodeURIComponent() que produce un enlace de trabajo que puedo pegar en mi navegador para hacer referencia correctamente al archivo. Sin embargo, si configuro mi track.src usando la salida de encodeURIComponent() , agrega el directorio de mi proyecto a la cadena y genera errores de la siguiente manera:
GET file:///Users/admin/Code/project/src/%2FUsers%2Fadmin%2FMusic%2FiTunes%2FiTunes%20Music%2FNelly%2FNellyville%2F13%20%231.mp3 net::ERR_FAILEDDe acuerdo, después de probablemente 100 variaciones diferentes de entrada src en el elemento <audio> , determiné que, al menos en mi aplicación Electron, usa algún tipo de híbrido entre encodeURI y encodeURIComponent . encodeURIComponent codifica el "/" que no funcionará, pero encodeURI no codifica los caracteres que estaban causando el problema, como "#". Entonces, esta es la forma en que descubrí cómo hacer que esto funcione:
function URLFormat(input){ let URIencodedURL = encodeURIComponent(input); let EncodedURL = 'file:///' + URIencodedURL.replaceAll("%2F","/"); return EncodedURL; } Esto me proporciona una ruta de entrada adecuada para el elemento <audio> incluso en el caso de archivos con caracteres especiales.