ios - 无法使用WKWebView通过XMLHttpRequest加载音频文件

Question

我喜欢使用HTML5 Canvas和JS制作老式的街机游戏。我已经做了很多年了，我的方式可能有点固定。这些游戏可在所有现代设备上的Chrome / Safari中正常运行。

我认为我应该尝试使用PhoneGap结束游戏，看看它在iOS AppStore上作为应用程序的表现如何。
尽管音频效果很好，但游戏还是比较不稳定。

我了解了WKWebView在默认UIWebView之上的性能提升，因此将其添加到config.xml中。
游戏玩起来很漂亮，这正是我一直想要玩的方式。
但是音频无法播放。

在互联网上挖掘，我发现问题很可能是我加载音频文件的方式。这是我用来加载音频文件的基本代码-一个对象传递到包含音频文件详细信息的函数中。

我的项目以这种方式布置:

--- 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服务器提供的。

我很想知道如何使它工作。

我可以添加一些东西到config.xml(PhoneGap)中，以便在软件包中包含本地http服务器吗？
然后将网址更改为url ='http://localhost/sfx/ ...'
是否需要特定的端口，例如http://localhost:10000/sfx/

我不使用任何框架，它只是老式的手工滚动JavaScript。

这是我的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" />

Answer 1

好的，因此，在经过大量挖掘并从Kerri获得宝贵的建议之后，我终于想出了如何实现所需的更改。

我在config.xml中添加了以下信息:

<plugin name="cordova-plugin-wkwebview-engine-localhost" spec="https://github.com/apache/cordova-plugins.git#wkwebview-engine-localhost" />

在config.xml中我也改变了

<content src="index.html" />

至

<content src="http://localhost" />

工作请客。