html - 从台式机上的外部服务器播放本地HTML5音频

Question

我的问题对应于以下假设情况:

我有一个带有博客的网站，该网站存储音乐的播放列表(仅文件名)。我可以远程编辑此播放列表，例如在旅途中通过手机编辑。网站的内容存储在服务器(MySQL)上的数据库中，该数据库无法远程访问。

当我回到家并且正在写博客时，我想使用HTML5音频在同一网站上播放列表中的文件。这些文件位于我本地的本地计算机上。因此，我想通过我的网站访问这些本地文件。

我如何处理本地文件的一个示例是file:///M:/music.mp3。
如果我从本地主机工作，则整个设置都可以工作，因此我认为这不是编码问题。

问题是我最喜欢的浏览器Firefox和Chrome都不允许第三方网站在没有我的 Activity 输入的情况下访问我的本地文件。

有意义的是，由于安全问题，用户代理阻止了上述构造。由于使用浏览器集成的HTML5音频，我希望找到一个解决方案。 IMO，不会有安全问题，因为HTML5音频加载的文件无法通过DOM进行访问，因此浏览器的某些正确编码将在此处留出一些喘息的空间。

一些额外的条件:

我正在寻找博客和音乐播放器以保持集成。

我不想远程存储音乐文件。

我不想设置本地服务器。

也许有一种方法可以将我的网站的安全异常(exception)添加到我的浏览器中，但是Firefox似乎不再是这种情况。

任何建议都是最欢迎的!

Answer 1

我建议看看File System API。不幸的是，这是一个非常新的API，它是currently only working with chrome:/

您基本上可以做的是使用window.requestFileSystem()或window.webkitRequestFileSystem()请求访问本地文件系统，该文件具有FileSystem对象的成功回调。使用此对象root(一个Directory Entry对象)，您可以使用root.getFile()查找文件。它有一个带有FileEntry对象的回调。然后，您可以使用此文件条目使用File获取实际的fileEntry.file()对象，并将其传递给FileReader对象以获取数据url。下面未经测试的示例，可能并不完美，您可能需要调整webkit前缀。

// when file system loads
function onFs(fs){
    // locate file 
    fs.root.getFile('M:/music.mp3', {/*options*/}, function(fileEntry){
         // get file / blob
         fileEntry.file(function(file) {
             // read file
             var reader = new FileReader();
             reader.onload = function(event) {
                  var dataUrl = event.target.result;
                  // create new audio object with data url
                  // e.g. <audio src="dataUrl" />
             };
             reader.readAsDataURL(file);
         // handle error
         } , onError);
    // handle error
    }, onError);

 }

 // Opening a file system with temporary storage
 window.requestFileSystem(TEMPORARY, 1024*1024 /*1MB*/, onFS, onError);

(我也想提一提，我从未使用过File System API，但似乎很有希望)