Download file for offline use Cordova/PhoneGap build

Question

I'm a novice when it comes to the development of apps. I made a simple audio player app for android and iOS and build it with phonegap build.

The app uses the <audio> html tag to load mp3 files that are located on a remote server like so:

            <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>

obviously, I changed the scr for this example.

It works fine as long as you have a stable internet connection but a few people are experiencing connection drops etc. I would like to make the files offline available on user request. So it has to be optional (by clicking a button or something like that). The app should detect if the file is present on the device and if so choose the local file over the remote file.

In short, I have 2 questions.

1. How can I download a specific file on user request?
2. How can I check whether the file is there or not and play the right file?

I can't seem to figure out how to do this I'm working on it for the last couple of days but I honestly have no clue on how to achieve this. Any help would be greatly appreciated.

Answer 1

As you said you need to download the file to your device. Since your using cordova you could use fileTransfer to download the audio. This is very straight forward (this is the offical example code):

// !! 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=="
        }
    }
);

The next time you want to play the audio you need to check if there is a local version. Either you check your device if that file exists (there are many ways, eg Cordova check if file in url exists ) or you make use of something like localStorage which basically is a simple lil database.

// 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;
}

I hope this helps and gives you an idea how to accomplish simple caching yourself :)