与MP3播放有关的Phonegap下载/解压缩问题

Question

I am having issues playing mp3s on my iphone 6 using phonegap.

I am downloading a zip file from the server which contains 1 mp3 file and 3 image files.

All seem to download correctly but I am not too sure about the mp3 file as it just wont play.

To test if the files are there I am doing this:

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

The 3 images show up so I know all the files must be there but although I get the audio player it wont play anything so I created a like too to the mp3 which doesnt play either.

Here is the function I used below:

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

}

Now, as far as the alerts go, the zip file was successfully downloads and uncompressed.

Any ideas on how I can troubleshoot or fix this?

Answer 1

I just ran into a similar problem, I wasn't able to show images from the local filesystem.

According to the docs at https://www.npmjs.com/package/cordova-plugin-file (under cdvfile protocol), I changed the Content Security rules:

<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://*" />

Maybe it helps.

Update for clarification:

Put

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

into the root config.xml file of your project under the widget. It should look like this:

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

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

...
</widget>

Put in your HTML the Content Security Rules like:

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

...

And then make the build with:

cordova build

Answer 2

Here is what worked in my case:

cdvfile:// did not work for me.

It was all a problem with the path.

In my case using "cordova.file.dataDirectory" fixed the problem.