Phaser HTML5 应用程序通过Phonegap Cloud Build 移植后无法播放声音

Posted 2023-03-07

【中文标题】Phaser HTML5 应用程序通过Phonegap Cloud Build 移植后无法播放声音

【英文标题】：Phaser HTML5 app cannot play sound after porting by Phonegap Cloud Build

【发布时间】：2015-11-27 03:33:32

【问题描述】：

这是一个简单的 Phaser 音频示例。它在我的 android 网络浏览器上运行良好。但是，通过 Phonegap 云构建移植到 Android 应用后，它会静音。

我知道如何在 Phonegap 应用 (How to loop a audio in phonegap?) 中播放声音（和循环），但不知道如何将其应用到 Phaser JS 框架中。

这是移植的应用程序。我可以安装和运行它，但没有声音。我错过了什么还是 Phonegap Cloud Build 支持 Phaser JS 中的 WebAudio？

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

我的config.xml 是：

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

源代码是：（我把本地音频文件从本地改成github链接运行在代码sn-p上）

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>

2015 年 12 月 1 日更新

这是我完成的源代码。它同时具有 .mp3 和 .ogg 声音文件。您可以在 Android 原生浏览器上播放它们（在 4.4.4 Samsung E5 上测试）。

来源：https://github.com/nguoianphu/phaser-sound-complete-phonegap

这是 Phonegap 上移植的应用程序。它可以显示屏幕但不能播放声音。 https://build.phonegap.com/apps/1783695/builds

【问题讨论】：

我看不到，您正在监听cordova deviceready-event。另一方面，加载外部脚本不是一个好主意，但如果你想这样做，你必须将 url 列入白名单。

@Joerg，谢谢。我编辑了 Phonegap 构建链接。该应用可以在 Android 上显示和触摸，但不能在音频上显示和触摸。

对于我的项目我使用this plugin 但是，这意味着你不能在浏览器上播放声音。如果它适合您，我可以将我的评论扩展为正确的答案，向您展示详细信息。

@Apovtx，谢谢。但是很难将您的插件应用到我的 Phaser 现有源代码中。我正在寻找 Phaser - Phonegap cloud build with sound 的示例。

@Tuan，所有平台都存在多个音频错误。你的目标设备是什么？ （iPhone、iPad、Android 手机、平板电脑等） 操作系统的版本？ （ios 8、iOS9、SDK-14、SDK-21 等）您使用的是标准的 webview 库还是插件（如 WKWwebview）？

【参考方案1】：

您正在尝试使用 webview 库播放音频。很可能使用html5 API for audio 或webaudio。如果两者都不是，则需要询问作者。

接下来，使用外部源 (http:) 不是最佳实践。您的资产（javascript、css、音频文件等）应该存在于设备上。如果您从 Web 加载文件，那么音质可能很差（或者音频可能根本无法播放 - 请参阅下面的 whitelist）。从设备加载。

Android 4.4.4 是 Kitkat。标准的 webview 库是exchanged for the chromium version。这意味着您的音频库可能对此感到困惑，或者您需要向图书馆提供有关此库的知识。这也意味着您的代码可能无法在 4.4.4 之前的设备上运行。 （主要是因为你无法测试它。）

您指向的链接可能使用核心media plugin，即使他们没有这么说。此外，该职位已超过 3 年。自他们以来，许多事情都发生了变化。 注意：您已在您的config.xml 中安装了media 插件。这可能就是您的循环起作用的原因。

你应该重新开始。你犯了很多错误。此外，除了您所拥有的一切，您还需要实现 whitelist 插件（如果您要导入文件或与网络通信）。

首先尝试这个sample app - 示例在 Android 和 iOS 上播放。您可以下载Android版本并进行测试。 iOS 版本需要我把你的 UUID 编译进去。

您可以选择16 audio plugins。我知道有一些做实时音频播放并且比“核心”插件有更好的控制。

你应该阅读：

Top Mistakes by Developers new to Cordova/Phonegap - 阅读

粗体

句子。 HOW TO apply the Cordova/Phonegap the whitelist system 如何Core Plugins Setup Phonegap--Generic-Boilerplate7 - 刚刚写了这个。它有效。 Phonegap Demo Apps Phonegap-Media-Test - 在 Android 和 iOS 上运行的示例的源代码。您可以下载 Android 版本并进行测试。

---

更新：2015-12-01 - 2am 以前，我忘记在 CSP 元标记中添加通配符 (*)。我现在包括这个。此元标记应添加到正在播放音频的index.html 文件的标题中。

请注意，您的应用现在不安全。保护您的应用由您决定。

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

---

更新：2015-12-01 - 下午 3 点 @Tuan，我已经应用了

中概述的所有修复程序 HOW TO apply the Cordova/Phonegap the whitelist system 如何Core Plugins Setup Phonegap--Generic-Boilerplate7 - 刚刚写了这个。它有效。

音频现在可以在我的 Android LG Leon/Android 5.1.1 上运行 老实说，我永远不会自己这样做，但是你的代码已经足够工作了，在我在我的 firefox(v34) 浏览器上测试它之后，我相当肯定它会工作。

更新： 2016-04-15 该代码已被删除。如果您需要代码，请在 cmets 中询问。

应该有足够的代码供你使用。

-Code

-Working Android App

- Phonegap Build Documentation

【讨论】：

谢谢，但我知道 Phonegap 可以播放音频。我的问题是Phaser游戏通过Phonegap移植后可以播放声音。您的示例有效，因为它不通过 Phaser 的功能播放音频。

显然我不够清楚。您对未来的任务知之甚少，您可能会花费数周和数月而永远找不到答案 - 主要是因为您对 Cordova/Phonegap 做出了错误的假设。要解决您的问题 1) 不要从 Internet 加载音频样本 2) 如果您必须加载音频样本 Internet，则需要实现 whitelist 系统 - 否则您的请求将被阻止。 3) 可能不支持 Phaser 的音频库 - 您需要有关它的详细信息才能做出合理的决定。

为了更加清楚，您的帖子现在看起来很混乱。主要是因为你做出了错误的假设。并且不会让您更接近您的目标 --- 这似乎是播放此 Phase 音频库。这就是我发布链接的原因。祝你好运。

嗯...我不清楚这一点。您的浏览器不是 Cordova/Phonegap 使用的 webview 库。你可以阅读我的Notes on webview here。简而言之，每个浏览器都使用它自己的自定义库。 （这是caniuse.com的原因）音频部分一直是最不一致的。了解音频库是否有效的唯一方法是进行最简单的测试。否则，你就是在浪费时间。祝你好运。

@Tuan，我在我的CSP 中发现了一个错误，这可以解释为什么你听不到声音。以前，我有script-src 'self' 'unsafe-inline' 'unsafe-eval';。我没有用于加载网络的通配符。应该是script-src * 'self' 'unsafe-inline' 'unsafe-eval';。大约一个小时前我在测试一个新应用程序时发现了这一点。我很惊讶直到现在还没有人提到它。让我知道。我将此添加到我的原始答案中。