Phaser HTML5应用程序在通过PhoneGap Cloud Build移植后无法播放声音 [英] Phaser HTML5 app cannot play sound after porting by Phonegap Cloud Build
问题描述
这是一个简单的Phaser音频示例。它在我的Android Web浏览器上运行良好。
我知道如何在Phonegap应用中播放声音（和循环）（如何在phonegap中循环音频？），但不知道如何将其应用到相位JS框架。
这是已移植的应用程序。我可以安装和运行它，但没有声音。我错过了什么或Phonegap Cloud Build是否支持Phaser JS中的WebAudio？
https://build.phonegap.com/apps/1783695/
我的 config.xml 是：
<？xml version =1.0encoding =UTF-8？ >
< widget id =com.phaser.phasersoundversion =1.0.0xmlns =http://www.w3.org/ns/widgetsxmlns：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-durationvalue =1/>
<！ -
如果您不想将任何权限添加到您的应用程序，请将
以下标记添加到您的config.xml;你仍然会有你的应用程序的INTERNET
权限，PhoneGap要求。
- >
< preference name =permissionsvalue =none/>
< / widget>
源代码是：（我将本地音频文件从本地更改为github链接， snippet）
< script src =https：// cdnjs.cloudflare.com/ajax/libs/phaser/2.4.4/phaser.js\"> ;</script>
UPDATE 2015-12-01
这是我完成的源代码。它具有.mp3和.ogg声音文件。您可以在Android原生浏览器（在4.4.4 Samsung E5上测试）上播放。
资料来源： https://github.com/nguoianphu/phaser-sound-complete-phonegap
这是在Phonegap上移植的应用程序。它可以显示屏幕，但不能播放声音。
https://build.phonegap.com/apps/1783695/builds
@Tuan，
您正在尝试使用webview库播放音频。它可能使用 HTML5 API音频或< a href =https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API =nofollow> webaudio 。
接下来，这不是最佳做法使用外部源（http :)。您的assests（javascript，css，音频文件等）应该存在于设备上。如果从网络加载文件，则音质可能很差（或音频可能根本无法播放 - 请参阅下面的白名单）。从设备加载。
Android 4.4.4是Kitkat。标准网络视图库是交换了Chrome版本。这意味着您的音频库可能会对此感到困惑，或者您需要向图书馆提供有关此库的知识。这也意味着您的代码可能无法在4.4.4之前的设备上工作。 （主要是因为你无法测试它。）
您指向的链接很可能使用核心 media 插件，即使他们不这样说。此外，该职位是3岁以上。许多事情都发生了变化，因为他们。 注意：您已在 config.xml 中安装了媒体插件。这可能是为什么你的循环工作。
你应该重新开始。你犯了很多错误。此外，对于所有的，你将需要实现白名单插件（如果你要导入文件，或与网络通话）。
FIRST TRY此示例应用 - 示例播放在Android和iOS上。您可以下载Android版本并测试它。 iOS版本要求我有你的UUID编译。
有 16个音频插件，您可以从中选择。我知道几个做实时音频播放，并且比核心插件更好的控制。
您应该阅读：
- 如何应用Cordova / Phonegap白名单系统
- HOWTO 核心插件设置 li>
- Phonegap - Generic-Boilerplate7 - 刚刚写道这个。
- Phonegap演示应用程式
- Phonegap-Media-Test - 在Android和iOS上播放的示例的源代码。您可以下载Android版本并进行测试。
-12-01 - 2am 以前，我忘了给 CSP * $ c>元标记。我现在包括这个。此元标记应添加到播放音频的 index.html 文件的标题中。
<强>注意你的应用程序现在不可用。
< meta http-equiv =Content-Security-策略
content =default-src *;
style-src *'self''unsafe-inline''unsafe-eval';
script-src *'self''unsafe- inline''unsafe-eval';>
更新：2015-12-01 - 3pm
@Tuan，我已应用
- 如何将Cordova / Phonegap白名单系统应用
- HOWTO 核心插件设置
- Phonegap- -Generic-Boilerplate7 - 只是写这个。 > LG Leon / Android 5.1.1
真的，我永远不会这样做，但你的代码有足够的工作，我测试了它在我的firefox（v34）浏览器，我是相当肯定它会工作。
更新： 2016-04-15
代码已删除。
您应该有足够的代码来完成工作。
- 代码
- 使用Android应用
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
@Tuan,
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.
- Code
- Working Android App
- Phonegap Build Documentation
这篇关于Phaser HTML5应用程序在通过PhoneGap Cloud Build移植后无法播放声音的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
