Question

我正在尝试制作一个可以从远程服务器加载页面的webapp，但允许用户从本地驱动器上的文件播放音频（不是从远程服务器下载的）。我可以让它工作，但我还需要它来保存用户为后续访问所做的事情。例如：用户加载页面，单击“选择文件”按钮，选择一个mp3并播放它。然后，用户关闭浏览器，再次打开它，返回页面，并且无需再次选择即可播放相同的音频。

据我所知，音频播放与用户选择的保存是分开的，但在这种情况下，似乎可以指示另一个。

我可以使用选择和播放功能：

<html><body>

<script type='text/javascript'> 
        function handleFiles(files){ 
                var file = window.URL.createObjectURL(files[0]); 
                document.getElementById('audioPlayer').src = file; 
        }
</script>

<audio id='audioPlayer' controls ></audio> 
<input type='file' id='selectedFile' 
onchange='handleFiles(this.files)' /> 

</body></html>

...但我不知道如何存储所选文件数据的方式我可以在下次访问时自动加载它。我可以使用什么来存储该文件位置（甚至整个文件本身），这样我仍然可以在没有用户再次选择文件的情况下播放音频？

我有点怀疑出于安全原因可能无法以某种方式保存本地文件URL，因为在没有用户交互的情况下从本地文件系统自动播放文件可能是坏消息。

Answer 1

“文件打开”对话框中的文件句柄不能在不同的页面加载会话中循环使用。

您可以做到最好，将音频数据复制到HTML5 localStorage并从那里播放。或者将数据上传到服务器并从那里播放。

http://docs.webplatform.org/wiki/apis/web-storage/Storage/localStorage

localStorage仅限于几兆字节，具体取决于浏览器。

Answer 2

目前，Mikko的答案是我的问题的正确答案，但我想我会为遇到这个问题的其他人分享一个可能的选择：

在这种情况下，FileSystem API看起来非常适合我的需求，但在撰写本文时，它仅在Chrome中受支持。如果音频播放是您的网络应用的一个次要附加功能，这可能是一个选项，为Chrome用户提供更好的体验，而其他用户只是不知道他们错过了。

在this HTML5 Rocks article中，作者展示了如何使用它，包括如何将用户选择的文件复制到本地磁盘沙箱以及如何获取这些文件的URL（在我的情况下需要音频播放）。

在HTML5中跨页面加载存储本地音频文件数据

2 个答案: