Phonegap 下载/解压缩 mp3 播放问题

Question

我在 iPhone 6 上使用 phonegap 播放 mp3 时遇到问题。

我正在从服务器下载一个 zip 文件，其中包含 1 个 mp3 文件和 3 个图像文件。

似乎都可以正确下载，但我不太确定 mp3 文件，因为它无法播放。

为了测试文件是否存在，我这样做：

<img src="cdvfile://localhost/persistent/audio/1.jpg" alt="" /><br> 
<img src="cdvfile://localhost/persistent/audio/2.jpg" alt="" /><br>
<img src="cdvfile://localhost/persistent/audio/3.jpg" alt="" /><br>

<a href="cdvfile://localhost/persistent/audio/1.mp3">MP3HERE</a><br>

<audio class="audio" controls>
    <source src="cdvfile://localhost/persistent/audio/1.mp3" type="audio/mpeg">
</audio>

显示了 3 张图片，所以我知道所有文件都必须在那里，但是虽然我得到了音频播放器，但它不会播放任何东西，所以我也为 mp3 创建了一个同样不播放的文件。

这是我在下面使用的函数：

function downloadAndUnzip() {

var fileTransfer = new FileTransfer();

fileTransfer.download(
    "http://myserver.com/test.zip",
    "cdvfile://localhost/persistent/audio/test.zip",
    function(entry) {
        alert("download complete: " + entry.fullPath);

        zip.unzip("cdvfile://localhost/persistent/audio/test.zip", 
           "cdvfile://localhost/persistent/audio/", 
           function(){
              alert('Zip decompressed successfully'); //I get this alert

              alert('Checking if test.zip exists');
              checkIfFileExists("/audio/test.zip"); //returns that it exists

              alert('Checking if 1.jpg exists');
              checkIfFileExists("/audio/1.jpg");

              alert('Checking if 2.jpg exists');
              checkIfFileExists("/audio/2.jpg"); //returns that it exists

              alert('Checking if 3.jpg exists');
              checkIfFileExists("/audio/3.jpg"); //returns that it exists

              alert('Checking if 1en.mp3 exists');
              checkIfFileExists("/audio/1.mp3"); //returns that it exists

           }
        );

    },
    function(error) {
        alert("download error source " + error.source);
        alert("download error target " + error.target);
        alert("upload error code" + error.code);
    });

}

现在，就警报而言，zip 文件已成功下载并解压缩。

关于如何解决或解决此问题的任何想法？

Answer 1

我刚刚遇到了类似的问题，我无法显示本地文件系统中的图像。

根据https://www.npmjs.com/package/cordova-plugin-file 的文档（在 cdvfile 协议下），我更改了内容安全规则：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap:cdvfile:https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

<access origin="cdvfile://*" />

也许有帮助。

更新说明：

放

<access origin="cdvfile://*" />

进入小部件下项目的根 config.xml 文件。它应该是这样的：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget ...>
...

 <access origin="cdvfile://*" />

...
</widget>

在您的 HTML 中添加内容安全规则，例如：

<meta http-equiv="Content-Security-Policy" content="
            default-src 'self' data: gap: cdvfile:

...

然后使用以下命令进行构建：

cordova build

Answer 2

以下是我的情况：

cdvfile:// 对我不起作用。

都是路径有问题。

在我的情况下，使用 "cordova.file.dataDirectory" 解决了这个问题。