загрузка локального аудиофайла и воспроизведение его с помощью Audio ()

Question

Я пытаюсь загрузить локальный аудиофайл с помощью элемента (input: file) Elem, и когда я передаю его в аудио-конструктор Audio () как объект, он не загружается / не воспроизводится.

файл Параметры и методы объекта:

lastModified: 1586969070000
lastModifiedDate: Wed Apr 15 2020 18:44:30 GMT+0200 (Central European Summer Time) {}
name: "audio.mp3"
size: 15235482
type: "audio/mpeg"
webkitRelativePath: ""

Я попытался указать только имя, относительный путь, но ничего не работает.

Js Код

var track = new Audio(file Object);
track.play();

при попытке устранить неполадки:

console.log(track);

<audio preload="auto" src="[object File]">
#shadow-root (user-agent)
</audio>

и при срабатывании play ():

GET http:// **Local IP** /[object%20File] 404 (Not Found)
index.html:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.

хотя перед тем, как я начал проект, я провел небольшое тестирование и он работал отлично, но теперь это не так ... любая помощь будет потрясающей, спасибо

Answer 1

Это работает по-другому. Вы должны добавить свой файл, после этого поймать его узел (вход) и создать из него URL. Этот URL-адрес работает как обычный URL-адрес, но с вашими локальными файлами.

Извините за это плохое объяснение, здесь вы можете прочитать больше

https://javascript.info/file https://javascript.info/blob

Тоже создаю сниппет. Выберите локальный файл -> Добавить SR C в «player» -> Нажмите Play btn.

const btn = document.querySelector("#btn");
const yourMusic = document.querySelector("#yourMusic");
btn.addEventListener("click", () => {
  let music = document.querySelector("#file").files[0];
  yourMusic.src = URL.createObjectURL(music);
});

<input id="file" type="file" />
    <button id="btn">Add to player</button>
    <audio controls id="yourMusic"></audio>