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