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

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

html browser

在HTML5中跨页面加载存储本地音频文件数据,html,browser,local-storage,html5-audio,fileapi,Html,Browser,Local Storage,Html5 Audio,Fileapi,我正在尝试制作一个webapp，它将从远程服务器加载页面，但允许用户播放本地驱动器上的文件（不是从远程服务器下载的）中的音频。我可以让它工作，但我也需要它来保存用户所做的后续访问。例如：用户加载页面，单击“选择文件”按钮，选择mp3并播放。然后，用户关闭浏览器，再次打开，返回页面，可以播放相同的音频，而无需再次选择我知道音频播放与用户选择的保存是分开的，但在这种情况下，一个似乎决定了另一个我可以使用“选择并播放”功能来处理以下内容： <html><body> <

我正在尝试制作一个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>


函数句柄文件（文件）{
var file=window.URL.createObjectURL（文件[0]）；
document.getElementById（'audioPlayer'）.src=file；
}

…但我不知道如何存储选定的文件数据，以便下次访问时自动加载。我可以使用什么来存储该文件位置（或者甚至是整个文件本身，如果涉及到它），以便我仍然可以播放音频，而无需用户再次选择该文件

我有点怀疑，出于安全原因，保存本地文件url可能是不可能的，因为在没有用户交互的情况下从本地文件系统自动播放文件可能是个坏消息。

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

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

本地存储限制为几兆字节，具体取决于浏览器。

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

在本例中，文件系统API看起来非常适合我的需要，但在撰写本文时，它仅在Chrome中受支持。如果音频播放是你的webapp的一个次要附加功能，这可能是给Chrome用户更好体验的一个选项，其他用户可能不知道他们错过了

在中，作者演示了如何使用它，包括如何将用户选择的文件复制到本地磁盘沙盒中，以及如何获取这些文件的url（在我的音频播放中需要该url）。

糟糕，听起来我没有可行的选项。上传音乐的用户可能会有版权问题，所以这是不可能的。本地存储的低存储限制也排除了这一点。从更多的阅读中，听起来文件系统API正是我所需要的，但它现在只在Chrome中。