オフラインで使用するためのファイルをダウンロードするCordova/PhoneGap build

Question

私はアプリの開発に関しては初心者です。私はアンドロイドとiOS用のシンプルなオーディオプレーヤーアプリを作り、phonegapビルドでそれを構築しました。

アプリはそうのようなリモートサーバ上に配置されているMP3ファイルをロードするために<audio> htmlタグを使用しています。

明らか

  <div class="mobileui-music-cover-controls"> 
    <audio ontimeupdate="udpateProgress()" id="player"> 
     <source src="http://www.myserver.com/audiofile.mp3" type="audio/mpeg">   
    </audio> 
      <a id="playKnop" href="JavaScript:playMusic()" class="play"><i class="ion-ios-play"></i></a> 
      <a id="pauseKnop" href="JavaScript:pauseMusic()" class="play"><i class="ion-ios-pause"></i></a> 
     </div> 

を、私はこの例ではscrを変更しました。

インターネット接続が安定していても接続の低下などの問題が発生している人は、問題なく動作します。 ユーザーの要求に応じてファイルをオフラインにしたいと考えています。だからオプションでなければならない（ボタンをクリックするなど）。 ファイルがデバイスに存在するかどうかを検出し、そうであればリモートファイルを介してローカルファイルを選択する必要があります。

要するに、2つの質問があります。

1. ユーザーリクエストに応じて特定のファイルをダウンロードするにはどうすればよいですか？
2. ファイルが存在するかどうかを確認して正しいファイルを再生するにはどうすればよいですか？

私はこれを行う方法を理解していないようです。私はここ数日間は作業していますが、これを達成する方法については正直なところありません。どんな助けでも大歓迎です。

Answer 1

あなたのデバイスにファイルをダウンロードする必要があると言われました。コードバを使用しているので、fileTransferを使用してオーディオをダウンロードできます。

// !! Assumes variable fileURL contains a valid URL to a path on the device, 
// for example, cdvfile://localhost/persistent/path/to/downloads/ 

var fileTransfer = new FileTransfer(); 
var uri = encodeURI("http://some.server.com/download.php"); 

fileTransfer.download(
    uri, 
    fileURL, 
    function(entry) { 
     console.log("download complete: " + entry.toURL()); 
    }, 
    function(error) { 
     console.log("download error source " + error.source); 
     console.log("download error target " + error.target); 
     console.log("download error code" + error.code); 
    }, 
    false, 
    { 
     headers: { 
      "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA==" 
     } 
    } 
); 

次回音声を再生するときは、ローカルバージョンがあるかどうかを確認する必要があります。そのファイルが存在するかどうか（多くの方法があります、たとえばCordova check if file in url exists）、または基本的に単純なlilデータベースであるlocalStorageのようなものを使用してください。

私はこのことができますし、あなた自身をキャッシュする簡単な達成するためにどのようにアイデアを提供します:)

を願ってい

// more or less pseudo code!!! 

// callback from fileTransfer when your file was downloaded 
function downloadSuccess(entry) { 
    // save it to localStorage 
    // key: the remote URL, value: the local URL 
    localStorage.setItem(remoteURL, entry.toURL()); 
} 

... 
... 

// the check if there is a cached file 
var remoteSrc = "http://www.myserver.com/audiofile.mp3"; 
var localSrc = localStorage.getItem(remoteSrc); 

if(localSrc === null) { 
    // when there is NO cached version, use remote 
    audioElement.src = remoteSrc; 
} else { 
    // when there IS a cached version, use local 
    audioElement.src = localSrc; 
}