如何使用<；输入>；要将上传的文件保存到javascript变量？

我正在尝试学习如何使用输入上传标签来获取音频文件并播放它们

在我的HTML中，我有一个输入：

<h3>Upload Song: <input id="song" type="file" accept="audio/*" oninput="updateSong()"></input></h3>

然后，一旦歌曲被保存，我想播放这首歌-作为一个测试，所以我知道它的作品

但是，当我使用此代码执行我的想法时，我得到了错误：

TypeError: song.value.play is not a function
    at updateSong (/script.js:32:14)
    at HTMLInputElement.oninput (/:17:91)

我遗漏了什么导致代码无法运行的想法？我建立了歌曲，然后用歌曲更新变量。这似乎很简单，所以我不确定为什么它不起作用。

文件输入有一个，允许您枚举其文件列表

从那里，您可以使用创建一个临时Blob样式的对象URL，该URL引用来自用户计算机的文件

使用该URL，您可以实例化一个新的和。例如：

document.querySelector('input[type="file"]').addEventListener('input', (e) => {
  console.log(e.target.files);
  if (e.target.files.length) {
    const audio = new Audio(
      URL.createObjectURL(e.target.files[0])
    );
    audio.play();
  }
});

（JSFiddle:）

---

完成后别忘了稍后再做

歌曲

是一个

，而不是一个文件。无法播放

。阅读如何读取文件以及如何转换为dom元素SSO type=“file”不会告诉计算机它是一个文件？不会……它会告诉浏览器它是一个接受文件的输入

document.querySelector('input[type="file"]').addEventListener('input', (e) => {
  console.log(e.target.files);
  if (e.target.files.length) {
    const audio = new Audio(
      URL.createObjectURL(e.target.files[0])
    );
    audio.play();
  }
});