我如何使用 <input> 保存上傳到一個javascript變量？

Question

我正在嘗試學習如何使用輸入的上傳標簽來獲取音頻文件並播放它們。

在我的HTML中，我有一個輸入：

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

這樣的想法是，一旦從用戶的計算機上載了歌曲，就會調用updateSong()函數，並且系統會自動將歌曲另存為javascript中的var。

這可以通過updateSong()函數完成：

function updateSong(){
  song = document.getElementById("song");
  console.log(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)

我缺少什么主意，導致代碼無法運行？ 我建立了歌曲，然后用歌曲更新變量。 這似乎很簡單，所以我不確定為什么它不起作用。

Answer 1

文件輸入具有files屬性 ，該屬性允許您枚舉其文件列表。

從那里，您可以使用URL.createObjectURL創建一個臨時的Blob樣式的對象URL，該URL引用用戶計算機中的文件。

使用該URL，您可以實例化一個新的Audio元素並開始播放 。 例如：

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： https ://jsfiddle.net/6tkxw0aj/）

完成操作后，別忘了撤消對象URL ！