跨頁面加載本地音頻文件數據在HTML5中

我想製作一個web應用程序，它將從遠程服務器加載一個頁面，但允許用戶從本地驅動器上的文件播放音頻（不是從遠程服務器）。我能夠得到這個工作，但我也需要它來保存用戶爲後續訪問所做的事情。例如：用戶加載一個頁面，點擊一個「選擇文件」按鈕，選擇一個mp3並播放它。用戶然後關閉瀏覽器，再次打開它，返回到頁面，並且能夠播放相同的音頻而無需再次選擇它。跨頁面加載本地音頻文件數據在HTML5中

據我所知，音頻播放與保存用戶的選擇是分開的，但在這種情況下，人們似乎要指定另一個。

我能夠獲得選擇和播放功能，與此有關的工作：

<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以某種方式可能無法出於安全考慮，因爲自動播放從本地文件系統中的文件，而無需用戶交互可能是個壞消息。

來源

2013-10-23 user605331

文件打開對話框中的文件句柄不能跨不同的頁面加載會話回收。

您可以做到這一點，您可以將音頻數據複製到HTML5 localStorage並從此處播放。或者將數據上傳到服務器並從那裏播放。

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

localStorage的僅限於依賴於瀏覽器幾兆。

來源

2013-10-25 07:07:09

無賴，聽起來好像沒有可行的選擇。用戶上傳音樂可能存在版權問題，因此無法使用。 localStorage上的低存儲限制也是如此。從更多的閱讀來看，它聽起來像FileSystem API將做我所需要的，但它現在只在Chrome中。 – user605331

這時，米克的答案是我的問題的正確答案，但我想我會分享了其他人誰碰到這個主題而來的，是可能的選擇：

文件系統API看起來像它會完美套裝在這種情況下我的需求，但在撰寫本文時，它僅在Chrome中受支持。如果音頻播放功能對您的網絡應用程序而言只是次要附加功能，那麼這可能是爲Chrome用戶提供更好體驗的一種選擇，而其他用戶只是不知道他們錯過了。

在this HTML5 Rocks article中，作者展示瞭如何使用它，包括如何將用戶選擇的文件複製到本地磁盤沙箱，以及如何獲得這些文件的URL（在我的情況下需要音頻播放）。

來源

2013-10-26 12:50:35 user605331

跨頁面加載本地音頻文件數據在HTML5中

回答

相關問題