Question

我的问题与以下假设情况相符：

我有一个博客网站，其中存储了音乐播放列表（只是文件名）。我可以远程编辑此播放列表，例如我在移动时从手机编辑。网站的内容存储在服务器（MySQL）上的数据库中，无法远程访问。

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

我如何寻址本地文件的示例是file:///M:/music.mp3。如果我在localhost工作，整个设置都有效，所以我不认为这是编码问题。

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

由于安全问题，用户代理阻止了上述构造。我希望找到一个解决方案，因为我使用浏览器集成的HTML5音频; IMO，没有安全问题，因为HTML5音频加载的文件无法通过DOM访问，所以浏览器的一些正确编码会留下一些喘息的空间。

一些额外条件：

我正在寻找博客和音乐播放器以保持整合。
我不想远程存储我的音乐文件。
我不想设置本地服务器。

也许有一种方法可以将我的网站的安全例外添加到我的浏览器中，但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，但看起来很有希望）

从桌面上的外部服务器播放本地HTML5音频

1 个答案: