JavaScriptで外部ファイルのコレクションをローカルで読む

Question

私は、外部ファイルのコレクションにアクセスする必要があるアプリケーションで作業しています。それは基本的に音楽プレーヤーです。それはWebサーバーの下で期待どおりに動作しますが、私はまた、ブラウザでローカルに作業したいと思います。

一般概要：

• のindex.htm（マークアップと小インデックスファイル、外部jsファイルを収集し、CSS）
• index.js（ここではすべてのアプリのコード）
• dir.js（すべての音楽ファイルのファイルパスのアレイ）
• /AHX /（音楽ファイルの場所）
• ahx.js（音楽プレーヤコード）

このため

二つの主な困難は以下のとおりです。

1. JavaScriptは、それが子供のディレクトリである場合でも、ディレクトリの内容を一覧表示することはできません。代わりに、ファイルパスを文字列の配列として表現します。
2. XMLHttpRequestを使用してのみ外部ファイルを読み込むことができます。これはローカル/オフラインを実行しているときにセキュリティの制限がありますが、他の環境（HTTPやChromeアプリケーション、おそらく他のプラットフォームの下ではわかりません）で動作します。

奇妙なことに、最新のFirefoxでは、2）はもう問題ではありません。 XMLHttpRequestは、security.fileuri.strict_origin_policyを無効にすることなくローカルで動作します。私はそれが標準的な動作であるかどうかはわかりませんが、Chromeはそれを許可するようには見えません。

私の現在の解決策は、.jsファイル（以前はXHRを必要とするtxtファイルを使用）でファイルパスのリストを生成し、XMLHttpRequestを使用して音楽ファイルをロードしています。もちろんこれは、シェルスクリプトを使用してdir.jsファイルを再構築することで、フォルダ構造とファイルパスデータベースを同期させておく必要があることを意味します。

XHRはHTTP経由でしか動作しないため、Webサーバーが必要です。私はそのアプリケーションをローカルで（そしてユーザーに強制的にChromeアプリケーションとしてインストールさせるだけではなく）働かせたいと思っています。だから私はこの質問をして、データを読むための別の方法を見つけるよう求めています。

私が試した1つの選択肢は、1000個のファイルをすべてbase64文字列でエンコードし、それをJSオブジェクトに格納することでした。これにより、かなり大きな8MBの.jsファイルが生成されます。それは読み込みが遅くないようですが、私はそれが正確に効率的ではないと推測しています...それは更新/維持する苦痛です。

localStorage、IndexedDB、Web SQLはすべてオプションですが、アプリケーションを実行する前にストレージを事前に設定する方法はありません。おそらくFile APIを利用して、ストレージデータベースの1回限りの設定を行うことができます。

私の質問に戻る：大量のバイナリファイル（200以上のファイル、6MB以上など）にアクセスするための解決策は何ですか？（つまり、.htmlファイルを直接開きます）？

編集：The app in question on GitHub、私の使用例の混乱を解消する。しかし、一般的に、私はクロス・オリジン・エラーを起こすことなく、これらの音楽ファイルをローカルからアプリから自動的に読み込む方法を探しています。また、hereは 'js-database'バージョンです。これは、8MBのjsファイルに1000個のファイルをすべて保存します。

[{data:"base64-string-of-data-here",path:"original-path-here"}, ...] 

このようにして、XHRの必要性が回避されます。

Edit2：jszipとIndexedDBを使用したソリューションが有望です。選択した複数のフォルダから複数のファイルをロードすることはできませんが、ディレクトリツリーが圧縮されている場合、jszipは/FOLDER_HERE/FILE_HEREという形式のすべてのファイルの配列にアクセスできます。パスとバイナリデータは、一度のセットアップでIndexedDBにインポートできます。また、重要なURLのfile://では正常に動作します。

jszipを使用して、コンテンツのBASE64文字列の大きなJSON構造を効果的に構築/更新することもできますが、これはユーザーが設定する必要はありません。しかし、まだテストする必要があります。

Answer 1

が決定的な答えとしてこれを取ることはありません人々は周りの答えを詳しく説明するために時間を取りたいいけない場合、このテーマは、私も興味、コメントしてください、それは投票よりも有用であろう。..

からJavaScriptのリソースで学んだことは、あなたが実際に質問のセキュリティ面をバイパスすることはできないと考えています。オープンソースの場合でも、セキュリティを考慮していないと明示的に警告する必要があります。人々は、例えば、リソースの修正版を配布することができる。それはリソースで何が行われているかによって異なります。

これはプレーヤーのためのものです。セキュリティのため（文字列を評価しない限り）、スクリプトリソースとしてではなく、データリソースとして扱うことをお勧めします。 JSONデータはここで仕事をすることができますが、1000ファイルを処理する必要があります。しかし、ファイルを処理するスクリプトを書くのは難しくありません。

HTML5ファイルAPI

私はまだそれを使用していないので、私はちょうどあなたに1つのまたは2つのリンクを与えることができます。欠点は、あなたのプレーヤーを最近のブラウザに制限することです。

https://www.html5rocks.com/en/tutorials/file/dndfiles/

HTML5 File API read as text and binary

（私は知っている、いない答え）ライブラリを使用します。この場合、その除き

、これは本当がないという理由だけで、その答えかもしれませんjavascriptの普遍的なデータ収集。良いライブラリがそれを追加し、古いブラウザをサポートします。

たとえば、jQuery JSONPでは動的ドメイン間GET要求が可能です。データの書式設定（スクリプトではない）では、注入する方がはるかに安全です。しかし、プレイヤーがバイナリで何をしているのか、どのように危険にさらされるのかを細かく認識しておく必要があることに注意してください。スクリプトの

http://api.jquery.com/jQuery.getJSON/

直接含める：ローカルフォルダ構造で直接スクリプトを含めるためとして

<script src="./sameFolderFile.js"></script> 

をお勧めしません、それは実際にローカルで動作します。 IEには、ActiveXコンテンツがあり、使用許可が求められていますが、FirefoxやChromeで動作します。タグは動的に追加することができますが、ここに大きなセキュリティリスクがあります。リソースに悪質なjavascriptコードが追加されて実行されます。これにより、ユーザーにリスクが発生する可能性があります。