Javascript: форма ввода аудио в ссылку для загрузки аудио?
Это странный вопрос, но какое-то время он меня сбивал с толку.
У меня есть аудиовход:
<input required type = "file" id = "inputAudio" accept = "audio/*" onchange = "downloadLink(this);">
Когда вы отправляете аудио, я бы хотел добавить ссылку для загрузки на этот элемент:
<a id = "blah">Download Audio</a>
Я пробовал делать такие странные вещи, как это:
function downloadLink(element) {
var file = element.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = file.type + ";charset=utf-8," + encodeURIComponent(e.target.result);
var link = document.getElementById("blah");
link.href = "data:" + data;
link.download = "someName." + file.name.split(".").pop();
};
reader.readAsDataURL(file);
}
Однако вышеуказанное вызывает ошибку загрузки в Chrome.
Вот HTML-файл для тестирования:
<!DOCTYPE html>
<html>
<head>
<title>Weird Problem</title>
<script>
function downloadLink(element) {
var file = element.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = file.type + ";charset=utf-8," + encodeURIComponent(e.target.result);
var link = document.getElementById("blah");
link.href = "data:" + data;
link.download = "someName." + file.name.split(".").pop();
};
reader.readAsDataURL(file);
}
</script>
</head>
<body>
<input required type = "file" id = "inputAudio" accept = "audio/*" onchange = "downloadLink(this);">
<a id = "blah">Download Audio</a>
</body>
</html>
Обновлено: Я только что заметил, что вы можете вставлять файлы HTML:
function downloadLink(element) {
var file = element.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = file.type + ";charset=utf-8," + encodeURIComponent(e.target.result);
var link = document.getElementById("blah");
link.href = "data:" + data;
link.download = "someName." + file.name.split(".").pop();
};
reader.readAsDataURL(file);
}<!DOCTYPE html>
<html>
<head>
<title>Weird Problem</title>
</head>
<body>
<input required type = "file" id = "inputAudio" accept = "audio/*" onchange = "downloadLink(this);">
<a id = "blah">Download Audio</a>
</body>
</html>Любая помощь была бы фантастической!
также github.com/eligrey/FileSaver.js
@nullqube, даже без использования encodeURIComponent, выдает ту же ошибку, загрузка не удалась. Я действительно не хочу использовать для этого какие-либо внешние библиотеки.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Хитрость в том, что вы должны просто превратить его в ObjectURL, а затем, как следует из названия, вы можете использовать его как URL-адрес для href,
Итак, теперь протестировано на Safari, Chrome, FireFox:
var file = element.files[0];
var link = document.getElementById("blah");
link.href = window.URL.createObjectURL(file);
link.download = "someName." + file.name.split(".").pop();
вот он работает на PlayCode.io
Эта версия работает с файлами MP3, но не работает с файлами WAV.
Я просто тестировал его с помощью файла .wav из music.helsinki.fi/tmt/opetus/uusmedia/esim/index-e.html и отлично работал.
Какой браузер вы используете? Я использую Chrome и каждый раз получаю сообщение об ошибке при загрузке
Сафари. и да, вы правы. Он не работает на хроме. так позволь мне проверить
повторно кодировать не нужно, ридер уже выдает данные в base64