是否可以通过 Javascript 下载数据，然后通过文件路径引用该数据？答案

【问题标题】：Is it possible to download data via Javascript and then reference that data via a file path?是否可以通过 Javascript 下载数据，然后通过文件路径引用该数据？
【发布时间】：2015-10-27 04:03:38
【问题描述】：

我想这样做：

通过 Javascript 从服务器下载数据（我知道我可以做到）
将其存储在磁盘上（我知道我可以使用 IndexedDB 做到这一点）
将该数据引用为文件路径。（例如：如果我下载一个 mp3，我希望它能够将它作为“foo.mp3”传递到 HTML5 音频标签中）

#3 可能吗？

我知道我可以只使用 base64 并创建一个数据 URI，但这很慢并且（至少对于音频）似乎不适用于 Android 或 iOS（我已经使用纯 HTML5 音频标签和 SoundManager2 对此进行了测试） )。

注意：我只对跨浏览器、跨平台的解决方案感兴趣。

【问题讨论】：

标签： javascript html browser cross-browser indexeddb

【解决方案1】：

表面上你应该能够做到以下几点：

从数据库中读回 blob
使用 URL.createObjectURL() 为 blob 构造 URL
将 URL 分配给 audio 元素
可选：URL.revokeObjectURL() 在不再需要 blob 时释放它（例如，如果为音频元素提供了新 URL）

例如：

<!DOCTYPE html>
<title>IndexedDB / Blob / URL Example</title>
<p>Select audio file here: <input type=file>
<p>Then play here: <audio controls></audio>
<script>
// When a file is selected...
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
  var file = e.target.files[0];

  // Open the database connection.
  var open = indexedDB.open('blob-test');
  open.onupgradeneeded = function() {
    // Define the database schema if necessary.
    var db = open.result;
    var store = db.createObjectStore('files');
  };
  open.onsuccess = function() {
    var db = open.result;
    var key = 1;

    // Write file to DB
    var tx = db.transaction('files', 'readwrite');
    var store = tx.objectStore('files');
    store.put(file, key);

    // Later, read file back out of DB
    var tx2 = db.transaction('files');
    var store2 = tx2.objectStore('files');
    var request = store2.get(key);
    request.onsuccess = function(e) {
      // Got the file!
      var file = request.result;
      // Construct a URL for it
      var url = URL.createObjectURL(file);
      // Update audio element with the URL
      document.querySelector('audio').src = url;
    };
  };
});
</script>

.. 但你仍然想在任何地方进行测试。最近修复了一些错误，例如Android 上的 Chrome 会对此产生影响（例如 https://crbug.com/227476）

【讨论】：