Phaser HTML5 app cannot play sound after porting by Phonegap Cloud Build

问题

This's a simple Phaser audio example. It works well on my Android web browser. However, it's muted after porting to Android app by Phonegap cloud build.

I know how to play sound (and loop) in Phonegap app (How to loop a audio in phonegap?) but don't know how to apply it into the Phaser JS framework.

Here's the ported app. I can install and run it but without sound. Do I miss something or Phonegap Cloud Build does support the WebAudio in Phaser JS?

https://build.phonegap.com/apps/1783695/

My config.xml is:

<?xml version="1.0" encoding="UTF-8" ?>
  <widget id="com.phaser.phasersound" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>Phaser sound complete</name>
<description>
   Phaser sound phonegap
</description>
<gap:plugin name="org.apache.cordova.media" />
<icon src="icon.png" />
<preference name="splash-screen-duration" value="1"/>

<!--
  If you do not want any permissions to be added to your app, add the
  following tag to your config.xml; you will still have the INTERNET
  permission on your app, which PhoneGap requires.
-->
<preference name="permissions" value="none"/>
  </widget>

The source code is: (I changed the local audio files from local to github links to run on code snippet)

var game = new Phaser.Game(600, 800, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });

function preload() {

	game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    
    //have the game centered horizontally
    game.scale.pageAlignHorizontally = true;
    game.scale.pageAlignVertically = true;

    game.stage.backgroundColor = '#414040';

    // I changed the local audio files from local to github links to run on code snippet

    /*
    game.load.audio('explosion', 'assets/audio/SoundEffects/explosion.mp3');
    game.load.audio('sword', 'assets/audio/SoundEffects/sword.mp3');
    game.load.audio('blaster', 'assets/audio/SoundEffects/blaster.mp3');
    */

    game.load.audio('explosion', 'https://raw.githubusercontent.com/nguoianphu/phaser-sound-complete-phonegap/master/www/assets/audio/SoundEffects/explosion.mp3');
    game.load.audio('sword', 'https://raw.githubusercontent.com/nguoianphu/phaser-sound-complete-phonegap/master/www/assets/audio/SoundEffects/sword.mp3');
    game.load.audio('blaster', 'https://raw.githubusercontent.com/nguoianphu/phaser-sound-complete-phonegap/master/www/assets/audio/SoundEffects/blaster.mp3');

}

var explosion;
var sword;
var blaster;

var text;

var text1;
var text2;
var text3;

function create() {



    var style = { font: "65px Arial", fill: "#52bace", align: "center" };
    text = game.add.text(game.world.centerX, 100, "decoding", style);
    text.anchor.set(0.5);

    explosion = game.add.audio('explosion');
    sword = game.add.audio('sword');
    blaster = game.add.audio('blaster');

    //  Being mp3 files these take time to decode, so we can't play them instantly
    //  Using setDecodedCallback we can be notified when they're ALL ready for use.
    //  The audio files could decode in ANY order, we can never be sure which it'll be.

    game.sound.setDecodedCallback([ explosion, sword, blaster ], start, this);

}

var keys;

function start() {

    text.text = 'Press 1, 2 or 3';

    var style = { font: "48px Arial", fill: "#cdba52", align: "center" };

    text1 = game.add.text(game.world.centerX, 250, "Blaster: Stopped", style);
    text1.anchor.set(0.5);

    text2 = game.add.text(game.world.centerX, 350, "Explosion: Stopped", style);
    text2.anchor.set(0.5);

    text3 = game.add.text(game.world.centerX, 450, "Sword: Stopped", style);
    text3.anchor.set(0.5);

    explosion.onStop.add(soundStopped, this);
    sword.onStop.add(soundStopped, this);
    blaster.onStop.add(soundStopped, this);

    keys = game.input.keyboard.addKeys({ blaster: Phaser.Keyboard.ONE, explosion: Phaser.Keyboard.TWO, sword: Phaser.Keyboard.THREE });

    keys.blaster.onDown.add(playFx, this);
    keys.explosion.onDown.add(playFx, this);
    keys.sword.onDown.add(playFx, this);

    //  And for touch devices you can also press the top, middle or bottom of the screen
    game.input.onDown.add(onTouch, this);

}

function onTouch(pointer) {

    var b = game.height / 3;

    if (pointer.y < b)
    {
        playFx(keys.blaster);
    }
    else if (pointer.y > b * 2)
    {
        playFx(keys.sword);
    }
    else
    {
        playFx(keys.explosion);
    }

}

function playFx(key) {

    switch (key.keyCode)
    {
        case Phaser.Keyboard.ONE:
            text1.text = "Blaster: Playing";
            blaster.play();
            break;

        case Phaser.Keyboard.TWO:
            text2.text = "Explosion: Playing";
            explosion.play();
            break;

        case Phaser.Keyboard.THREE:
            text3.text = "Sword: Playing";
            sword.play();
            break;
    }

}

function soundStopped(sound) {

    if (sound === blaster)
    {
        text1.text = "Blaster: Complete";
    }
    else if (sound === explosion)
    {
        text2.text = "Explosion: Complete";
    }
    else if (sound === sword)
    {
        text3.text = "Sword: Complete";
    }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.4/phaser.js"></script>

UPDATE 2015-12-01

Here is my completed source code. It has both .mp3 and .ogg sound files. You can play them on Android native browser (tested on 4.4.4 Samsung E5).

Source: https://github.com/nguoianphu/phaser-sound-complete-phonegap

Here is the ported app on Phonegap. It can display the screen but can't play sounds. https://build.phonegap.com/apps/1783695/builds

回答1:

You are trying to play the audio with the webview library. It is likely using the HTML5 API for audio or webaudio. If it is neither of these, then you need to ask the author.

Next, it is not best practice to use external source (http:). Your assests (javascript, css, audio files, etc) should live on the device. If you load files from the web, then the sound quality could be poor (or the audio may not play at all - see whitelist below). Load from the device.

Android 4.4.4 is Kitkat. The standard webview library was exchanged for the chromium version. This means your audio library might be confused about this or you need to give the library knowledge about this library. This also means your code may not work on devices before 4.4.4. (Mostly, because you cannot test it.)

The link you point to is likely using the core media plugin, even though they dont say so. In addition, the post is over 3 years old. Many thing have changed since them. NOTE: you have installed the media plugin in your config.xml. This is likely why your loop works.

You should start over. You've made many errors. In addition, to all that you have, You will need to implement the whitelist plugin (if you are going to import files, or talk to the network).

FIRST TRY this sample app - example plays on Android and iOS. You can download the Android version and test it. The iOS version requires I have your UUID compiled in.

There are 16 audio plugins you can choose from. I know a few do real time audio playback and have better control than the "core" plugin.

You should read:

Top Mistakes by Developers new to Cordova/Phonegap - read the bold sentences.
HOW TO apply the Cordova/Phonegap the whitelist system
HOWTO Core Plugins Setup
Phonegap--Generic-Boilerplate7 - just wrote this. It works.
Phonegap Demo Apps
Phonegap-Media-Test - source code for the example that plays on Android and iOS. You can download the Android version and test it.

UPDATE: 2015-12-01 - 2am Previously, I had forgotten to add a wild-card (*) to the CSP meta tag. I am now including this. This meta tag should be added to the header of the index.html file that is playing the audio.

NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.

<meta http-equiv="Content-Security-Policy" 
         content="default-src *; 
                  style-src * 'self' 'unsafe-inline' 'unsafe-eval'; 
                  script-src * 'self' 'unsafe-inline' 'unsafe-eval';">

UPDATE: 2015-12-01 - 3pm
@Tuan, I've applied all the fixes as outlined in

HOW TO apply the Cordova/Phonegap the whitelist system
HOWTO Core Plugins Setup
Phonegap--Generic-Boilerplate7 - just wrote this. It works.

The audio is now working on my Android LG Leon/Android 5.1.1 Truthfully, I would never do this on my own, but your code had enough working that after I tested it on my firefox(v34) browser, I was fairly certain it would work.

UPDATE: 2016-04-15
The code has been removed. Ask in the comments, if you need code.

~~There should be enough code in place for you to work off of.~~