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

标签 html browser local-storage html5-audio fileapi

我正在尝试制作一个网络应用程序,它将从远程服务器加载页面,但允许用户播放本地驱动器上的文件(不是从远程服务器下载的)中的音频。我能够让它工作,但我还需要它来保存用户为后续访问所做的操作。例如:用户加载页面,单击“选择文件”按钮,选择 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,因为在没有用户交互的情况下自动播放本地文件系统中的文件可能是个坏消息。

最佳答案

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

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

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

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

关于html - 在 HTML5 中跨页面加载存储本地音频文件数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19548834/

相关文章:

php代码显示页面上的显示而不是联系表单

php - 浏览器关闭时自动注销

javascript - 使用 localstorage 重新加载页面时如何更新输入值?

javascript - 如何在 JQuery 中使用 localStorage 为 ajax 调用创建自定义缓存机制?

node.js - JWT - 将它们存储在 LocalStorage 与 SessionStorage 中

javascript - 启动计时器后按钮不存在

javascript - 我没有得到标签文本,就像在文本区域中修改一样......我怎样才能得到它?

javascript - 手机无法点击菜单按钮

c# - 从 Web 浏览器控件打开证书信息

html - 手机/iPhone 上不显示的字体