Как использовать <input> для сохранения загруженного в переменную javascript?
Я пытаюсь научиться использовать входной тег загрузки, чтобы брать аудиофайлы и воспроизводить их.
В моем HTML у меня есть ввод:
<h3>Upload Song: <input id = "song" type = "file" accept = "audio/*" oninput = "updateSong()"></input></h3>
Идея состоит в том, что как только песня загружается с компьютера пользователя, вызывается функция updateSong(), и система автоматически сохраняет песню как var в javascript.
Это можно сделать с помощью функции updateSong():
function updateSong(){
song = document.getElementById("song");
console.info(song)
song.value.play();
}
var song;
Затем, как только песня будет сохранена, я хотел бы, чтобы она воспроизводилась — просто в качестве теста, чтобы я знал, что она работает.
Однако, когда я использую этот код для реализации своей идеи, я получаю сообщение об ошибке:
TypeError: song.value.play is not a function
at updateSong (/script.js:32:14)
at HTMLInputElement.oninput (/:17:91)
Какую идею я упускаю из-за того, что код не запускается? Я установил песню, а затем обновил переменную с песней. Это кажется простым, поэтому я не уверен, почему это не работает.
Значит, type = "file" не сообщает компьютеру, что это файл?
Нет... он сообщает браузеру, что это входные данные, что файлы принимает
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Входной файл имеет files недвижимость, что позволяет перечислить его список файлов.
Оттуда вы можете использовать URL.createObjectURL для создания временного URL-адреса объекта в стиле BLOB-объектов, который ссылается на файл с компьютера пользователя.
С помощью этого URL-адреса вы можете создать новый экземпляр Audio элемент и начать воспроизведение. Например:
document.querySelector('input[type = "file"]').addEventListener('input', (e) => {
console.info(e.target.files);
if (e.target.files.length) {
const audio = new Audio(
URL.createObjectURL(e.target.files[0])
);
audio.play();
}
});
(JSFiddle: https://jsfiddle.net/6tkxw0aj/)
Не забудьте отозвать URL вашего объекта позже, когда закончите!
song— это<input>, а не файл. Не могу сыграть<input>. Узнайте, как читать файлы и как преобразовывать их в элементы dom.