Блог

Главная - Вопросы по программированию - Как я могу правильно отформатировать ссылку на файл для аудиоэлемента HTML5?

Как я могу правильно отформатировать ссылку на файл для аудиоэлемента HTML5?

#javascript #node.js #html5-audio

Вопрос:

Я использую элемент HTML5 <audio> в Node.js приложение, и я сталкиваюсь с проблемами со ссылками на файлы и специальными символами при настройке src.track . При ссылке на местоположение файла из моей базы данных mySQLite3 я отправлю местоположение в формате:

 /Users/admin/Music/iTunes/iTunes Music/Nelly/Nellyville/13 #1.mp3

Я получаю следующую ошибку:

 GET file:///Users/admin/Music/iTunes/iTunes Music/Nelly/Nellyville/13  net::ERR_FILE_NOT_FOUND

Это, очевидно, ошибка в «#» в этой конкретной строке и игнорирование остальной части строки. Это форматирование работает для всех ссылок, за исключением ссылок со специальными символами. Я перепробовал все типы кодирования, экранирования и форматирования, которые только мог придумать, включая encodeURIComponent() и encodeURI() .

Я могу вывести строку в javascript, используя encodeURIComponent() которую создается рабочая ссылка, которую я могу вставить в свой браузер, чтобы правильно ссылаться на файл. Однако, если я настрою track.src использование вывода из encodeURIComponent() , он добавит каталог моего проекта в строку и выдаст ошибку как таковую:

 GET file:///Users/admin/Code/project/src//Users/admin/Music/iTunes/iTunes Music/Nelly/Nellyville/13 #1.mp3 net::ERR_FAILED

Комментарии:

1. Это не удается, потому что вы не можете использовать file:// URI на веб-страницах, если сама страница также не загружена из file:// URI. Поскольку вы используете сервер NodeJS, который, как я предполагаю, включен localhost , вам также потребуется прокси-сервер для этих файлов через NodeJS. Следите за атаками на обход каталогов.

2. @Dai Это электронное приложение, поэтому оно будет загружать веб-страницу из того же локального каталога проекта. Я передаю строку без file:// , я просто передаю необработанный путь к каталогу, как указано выше, затем я предполагаю audio , что элемент выполняет какую-то кодировку URI и добавляет file:// . Если я не закодирую URI, он не сможет разрешить путь, если я это сделаю, произойдет описанное выше.

Ответ №1:

Хорошо, после, вероятно, 100 различных вариантов src ввода в <audio> элемент, я определил, что, по крайней мере, в моем приложении Electron он использует какой — то гибрид между encodeURI и encodeURIComponent . encodeURIComponent кодирует»/», который не будет работать, но encodeURI не кодирует символы, которые вызвали проблему, такие как «#». Итак, вот как я понял, как заставить это работать:

 function URLFormat(input){
    let URIencodedURL = encodeURIComponent(input);
    let EncodedURL = 'file:///'   URIencodedURL.replaceAll("/","/");
    return EncodedURL;
}

Это дает мне правильный путь ввода для <audio> элемента даже в случае файлов со специальными символами.

Метки: