WKWebViewを使用してXMLHttpRequest経由でオーディオファイルを読み込むことができません

Question

私はHTML5 CanvasとJSを使用して古い学校のアーケードゲームを楽しんでいます。私は何年もそれをしてきたし、おそらく私の方法で少し設定されています。最新のすべてのデバイスでChrome/Safariでゲームがうまく機能します。

私はPhoneGapを使ってゲームをラップして、iOS AppStore上でどのようにアプリケーションとして動作するかを確認する必要があると考えました。 ゲームはかなりうまくいきましたが、オーディオは素晴らしい演奏でした。

デフォルトのUIWebViewよりもWKWebViewのパフォーマンスが向上したので、これをconfig.xmlに追加しました。 ゲームは美しく演奏され、私はそれがすべて一緒にプレイしたいと思っていた。 ただし、音声の再生に失敗しました。

インターネットを掘る私は、オーディオファイルをどのようにロードするのかという問題が起きていることがわかります。ここでは、オーディオファイルを読み込むために使用する基本的なコードを示します。オブジェクトは、オーディオファイルの詳細を含む関数に渡されます。

私のプロジェクトは、このようにレイアウトされている：

--- www 
|___ gfx (contains png files) 
|___ sfx (contains mp3 files) 
|___ script (contains js files) 
|___ index.html 
|___ config.xml 
|___ style.css 

非常に基本的な！私の理解が正しいWKWebViewがある場合

function loadSound(o) { 
 
\t try 
 
\t { 
 
\t \t var request = new XMLHttpRequest(); 
 
\t \t var url = "sfx/" + o.soundname + "." + AUDIOFORMAT; 
 

 
\t \t request.open('GET', url, true); 
 
\t \t request.responseType = 'arraybuffer'; 
 

 
\t \t // Decode asynchronously 
 
\t \t request.onload = function() 
 
\t \t { 
 
\t \t \t try 
 
\t \t \t { 
 
\t \t \t \t g.audioContext.decodeAudioData(request.response, 
 
\t \t \t \t \t function(buffer) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t o.buffer = buffer; 
 
\t \t \t \t \t \t o.volume 0.6; 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t function() 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t write("Decode error: " + url + ", " + arguments[0]); 
 
\t \t \t \t \t } 
 
\t \t \t \t); 
 
\t \t \t } 
 
\t \t \t catch (e) 
 
\t \t \t { 
 
\t \t \t \t write("loadSound(onLoad): " + e.message); 
 
\t \t \t } 
 
\t \t } 
 
\t \t request.send(); 
 
\t } 
 
\t catch (e) 
 
\t { 
 
\t \t write("LoadSound: " + e.message); 
 
\t }};

だから、それがローカルの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" />

Answer 1

オクラホマが、そんなに開削アップケリーからの貴重な頭の後、私は最終的に変更を実装する方法を考え出しました私が必要とした。

私は自分のconfig.xmlに以下の情報を追加しました：config.xmlに私は

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

に

<content src="index.html" /> 

を変更も

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

を御馳走を動作します。