Question

在开发应用时，我是新手。我为Android和iOS制作了一个简单的音频播放器应用程序，并使用phonegap build构建它。

该应用使用<audio> html标记来加载位于远程服务器上的mp3文件，如下所示：

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

只要您拥有稳定的互联网连接，但很少有人遇到连接丢失等问题，它的工作正常。我想根据用户请求使文件脱机。所以它必须是可选的（通过点击按钮或类似的东西）。应用程序应检测设备上是否存在该文件，如果是，则选择远程文件上的本地文件。

简而言之，我有两个问题。

如何根据用户请求下载特定文件？
如何检查文件是否存在并播放正确的文件？

我似乎无法弄清楚如何做到这一点我在过去的几天里一直在研究它但我真的不知道如何实现这一目标。任何帮助将不胜感激。

Answer 1

正如您所说，您需要将文件下载到您的设备。由于您使用cordova，您可以使用fileTransfer下载音频。这非常简单（这是官方的代码示例）：

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

下次要播放音频时，需要检查是否有本地版本。你检查你的设备是否存在该文件（有很多种方法，例如Cordova check if file in url exists），或者你使用localStorage之类的东西，它基本上是一个简单的lil数据库。

{{1}}

我希望这会有所帮助，并让您了解如何自己完成简单的缓存：）

下载文件以供离线使用Cordova / PhoneGap构建

1 个答案: