2

我正在尝试制作一个 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，因为在没有用户交互的情况下从本地文件系统自动播放文件可能是个坏消息。

4

2 回答 2

1

文件打开对话框中的文件句柄在不同的页面加载会话中不可回收。

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

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

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

于 2013-10-25T07:07:09.130 回答
1

目前，Mikko 的答案是我问题的正确答案，但我想我会为遇到此线程的其他人分享一个可能的替代方案：

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

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

于 2013-10-26T12:50:35.417 回答