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

Posted 2023-02-23

【中文标题】无法使用 WKWebView 通过 XMLHttpRequest 加载音频文件

【英文标题】：Unable to load audio files via XMLHttpRequest using WKWebView

【发布时间】：2017-03-21 20:51:38

【问题描述】：

我喜欢使用 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 更改为 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" />

【问题讨论】：

github.com/apache/cordova-plugins/tree/… 可能有用。它是“实验性的”，但我已经成功使用过很多次了。

谢谢凯丽。我该如何实施？我正在使用 PhoneGap 构建和 config.xml。我是否还要在我的 JavaScript AJAX 调用中指定文件的完整路径？例如。 localhost/sfx...

【参考方案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" />

工作是一种享受。