无法使用WKWebView通过XMLHttpRequest加载音频文件 [英] Unable to load audio files via XMLHttpRequest using WKWebView
问题描述
我喜欢使用HTML5 Canvas和JS制作老式的街机游戏.我已经做了很多年了，我的方式可能有点固定.这些游戏可以在所有现代设备上的Chrome/Safari中正常运行.
I enjoy making old school arcade games using HTML5 Canvas and JS. I've been doing it for years and am probably a bit set in my ways. The games work great in Chrome / Safari on all modern devices.
我认为我应该尝试使用PhoneGap打包游戏，以查看它在iOS AppStore上作为应用程序的表现. 尽管音频播放效果很好，但游戏还是比较不稳定.
I figured I should try wrapping a game up using PhoneGap to see how it might perform as an app on the iOS AppStore. The game was pretty choppy although the audio played great.
我了解到WKWebView在默认UIWebView之上的性能提升，因此将其添加到config.xml中. 游戏玩起来很漂亮，这正是我一直希望它能玩的方式. 但是音频无法播放.
I read about the performance boost of WKWebView over the default UIWebView so added that to my config.xml. The game played beautifully and was just how I'd wanted it to play all along. But the audio failed to play.
在Internet上浏览我发现问题很可能是我加载音频文件的方式.这是我用来加载音频文件的基本代码-一个对象被传递到包含音频文件详细信息的函数中.
Digging around the internet I see the issue is likely to be how I load the audio files. Here's the basic code I use to load the audio files - an object is passed into the function containing specifics for the audio file.
我的项目以这种方式布置:
My projects are laid out in this way:
--- www
|___ gfx (contains png files)
|___ sfx (contains mp3 files)
|___ script (contains js files)
|___ index.html
|___ config.xml
|___ style.css
非常基础！
function loadSound(o) {
try
{
var request = new XMLHttpRequest();
var url = "sfx/" + o.soundname + "." + AUDIOFORMAT;
request.open('GET', url, true);
request.responseType = 'arraybuffer';
// Decode asynchronously
request.onload = function ()
{
try
{
g.audioContext.decodeAudioData(request.response,
function(buffer)
{
o.buffer = buffer;
o.volume 0.6;
},
function()
{
write("Decode error: " + url + ", " + arguments[0]);
}
);
}
catch (e)
{
write("loadSound(onLoad): " + e.message);
}
}
request.send();
}
catch (e)
{
write("LoadSound: " + e.message);
}};
因此，如果我的理解正确，则WKWebView无法读取该文件，因为它不是通过本地http服务器提供的.
So if my understanding is correct WKWebView fails to read the file because it is not being served via a local http server.
我很想知道如何使它工作.
I'd love to know how to get this working.
是否可以添加一些东西到config.xml(PhoneGap)中，以便在程序包中包含本地http服务器? 然后将URL更改为url =' http://localhost/sfx/ ..." 是否需要特定的端口，例如 http://localhost:10000/sfx/
Is there something I can add to my config.xml (PhoneGap) to include a local http server within the package? Would I then change the url to url = 'http://localhost/sfx/...' Is there a specific port required, e.g. http://localhost:10000/sfx/
我不使用任何框架，而只是老式的手工JavaScript.
I don't use any frameworks it's just old fashioned hand-rolled JavaScript.
这是我的config.xml的相关部分:
Here's the relevant section of my config.xml:
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
<name></name>
<description></description>
<content src="index.html" />
<gap:config-file platform="ios" parent="UISupportedInterfaceOrientations" overwrite="true">
<array>
<string>UIInterfaceOrientationLandscapeOmg</string>
</array>
</gap:config-file>
<gap:config-file platform="ios" parent="NSPhotoLibraryUsageDescription" overwrite="true">
<string>Does not use photo library</string>
</gap:config-file>
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="14" />
<preference name="orienation" value="portrait" />
<preference name="fullscreen" value="true" />
<preference name="exit-on-suspend" value="true" />
<plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1" />
<plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1" />
<plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-console" source="npm" spec="~1.0.2" />
<plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1" />
<plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />
<plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2" />
<plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-file" source="npm" spec="~4.1.1" />
<plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0" />
<plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0" />
<plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3" />
<plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0" />
<plugin name="cordova-plugin-media" source="npm" spec="~2.2.0" />
<plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1" />
<plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2" />
<plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0" />
<plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1" />
<plugin name="cordova-plugin-wkwebview-engine" source="npm" version="1.1.2" />
推荐答案
好吧，因此，在经过大量挖掘和Kerri的宝贵建议之后，我终于弄清楚了如何实现所需的更改.
Ok, so after much digging and a valuable heads up from Kerri, I finally figured out how to implement the changes that I required.
我在config.xml中添加了以下信息:
I added the following info to my config.xml:
<plugin name="cordova-plugin-wkwebview-engine-localhost" spec="https://github.com/apache/cordova-plugins.git#wkwebview-engine-localhost" />
也在config.xml中，我更改了
also in config.xml I changed
<content src="index.html" />
到
<content src="http://localhost" />
请客.
这篇关于无法使用WKWebView通过XMLHttpRequest加载音频文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
