Unable to load audio files via XMLHttpRequest using WKWebView

问题

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.

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.

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.

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

Very basic!

    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);
	}};

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.

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/

I don't use any frameworks it's just old fashioned hand-rolled JavaScript.

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" />

回答1:

Ok, so after much digging and a valuable heads up from Kerri, I finally figured out how to implement the changes that I required.

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" />

also in config.xml I changed

<content src="index.html" />

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

Works a treat.

来源：https://stackoverflow.com/questions/42937910/unable-to-load-audio-files-via-xmlhttprequest-using-wkwebview

标签

ios

html

cordova

audio

wkwebview