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

現時点では、ミッコの答えが私の質問に対する正しい答えですが、このスレッドに出くわした他の人のために可能な代替案を共有したいと思いました:

この場合、FileSystem API は私のニーズに完全に適合するように見えますが、この記事の執筆時点では Chrome でのみサポートされています。ただし、オーディオの再生が Web アプリのマイナーなアドオン機能である場合、これは Chrome ユーザーにより良いエクスペリエンスを提供するためのオプションである可能性があり、他のユーザーは見逃していることに気付かないだけです。

このHTML5 Rocks articleでは、ユーザーが選択したファイルをローカル ディスク サンドボックスにコピーする方法や、それらのファイルへの URL (私の場合はオーディオ再生に必要) を取得する方法など、その使用方法を著者が示しています。

于 2013-10-26T12:50:35.417 に答える