リモート サーバーからページをロードする 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を保存することはできないのではないかと思います。