PhoneGap Build media.play () tarda mucho time en comenzar a jugar

Estoy trabajando en una aplicación PhoneGap para iOS que te permite escuchar MP3 y ver MP4.

Normalmente, solo uso <a href="file.mp3">file.mp3</a> o <video src="file.mp3"></video> para reproducir el file y dejar que el reproductor multimedia del sistema maneje las cosas . Esta vez, se solicitó que el audio continúe reproduciéndose cuando la pantalla esté apagada. El manejo pnetworkingeterminado es desvanecerse y pausar los medios, cuando la pantalla está bloqueada. La documentation de la API de PhoneGap proporciona algunos ejemplos de código que incluyen la opción playAudioWhenScreenIsLocked . Ese código parece funcionar, ya que los MP3 continúan reproduciéndose cuando la pantalla está bloqueada.

El problema que estoy teniendo es que se necesita un time considerable para que dicho file comience a reproducirse. Por ejemplo, un file MP3 de 27 MB demoró 1 minuto y 50 segundos en comenzar a reproducirse en un iPhone 4s (3g) y 2 minutos en un iPad 2 (Wi-Fi). Me tomó unos segundos download ese mismo file, en mi escritorio. Casi parece que es tener que download todo el file antes de que comience a jugar. Eso no parece ser necesario. Para complementar esa teoría, si trato de reproducir un MP4 (usando media.play() ), lleva más time y luego cierra la aplicación.

config.xml (partes identificables reemplazadas con xxx):

 <?xml version="1.0" encoding="UTF-8"?> <!-- config.xml reference: https://build.phonegap.com/docs/config-xml --> <widget xmlns = "http://www.w3.org/ns/widgets" xmlns:gap = "http://phonegap.com/ns/1.0" id = "org.xxx.xxxbeta" version = "2.0"> <name>xxx Beta</name> <description>xxx Live /// Design update</description> <author href="http://www.xxx.org" email="xxx@xxx.org">xxx</author> <!-- Enable individual API permissions by defining each here. The 'device' permission is requinetworking for the 'deviceready' event. --> <feature name="http://api.phonegap.com/1.0/device" /> <!-- Customize your app and platform with the preference element. --> <!-- If you do not want any permissions to be added to your app, add the following tag to your config.xml; you will still have the INTERNET permission on your app, which PhoneGap requires. --> <preference name="permissions" value="none"/> <preference name="phonegap-version" value="2.9.0" /> <!-- all: current version of PhoneGap --> <preference name="orientation" value="default" /> <!-- all: default means both landscape and portrait are enabled --> <preference name="target-device" value="universal" /> <!-- all: possible values handset, tablet, or universal --> <preference name="fullscreen" value="false" /> <!-- all: hides the status bar at the top of the screen --> <preference name="webviewbounce" value="true" /> <!-- ios: control whether the screen 'bounces' when scrolled beyond the top --> <preference name="prerendenetworking-icon" value="false" /> <!-- ios: if icon is prerendenetworking, iOS will not apply it's gloss to the app's icon on the user's home screen --> <preference name="stay-in-webview" value="false" /> <!-- ios: external links should open in the default browser, 'true' would use the webview the app lives in --> <preference name="ios-statusbarstyle" value="black-opaque" /> <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar --> <preference name="detect-data-types" value="true" /> <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system --> <preference name="exit-on-suspend" value="false" /> <!-- ios: if set to true, app will terminate when home button is pressed --> <preference name="show-splash-screen-spinner" value="false" /> <!-- ios: if set to false, the spinner won't appear on the splash screen during app loading --> <preference name="auto-hide-splash-screen" value="true" /> <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API --> <preference name="disable-cursor" value="false" /> <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app --> <preference name="android-minSdkVersion" value="14" /> <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. --> <preference name="android-installLocation" value="auto" /> <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. --> <!-- Plugins can also be added here. A list of available plugins are available at https://build.phonegap.com/docs/plugins--> <!--<gap:plugin name="GAPlugin" />--> <!-- Define app icon for each platform. --> <icon src="images/logo.png" /> <icon src="images/Icons/icon-57.png" gap:platform="ios" width="57" height="57" /> <icon src="images/Icons/icon-72.png" gap:platform="ios" width="72" height="72" /> <icon src="images/Icons/icon-114.png" gap:platform="ios" width="114" height="114" /> <icon src="images/Icons/icon-144.png" gap:platform="ios" width="144" height="144" /> <!-- Define app splash screen for each platform. --> <gap:splash src="images/LaunchScreens/launch-iphone-app-P.png" gap:platform="ios" width="320" height="480" /> <gap:splash src="images/LaunchScreens/launch-iphone-app-P-2x.png" gap:platform="ios" width="640" height="960" /> <gap:splash src="images/LaunchScreens/launch-iphone-5-app-P.png" gap:platform="ios" width="640" height="1136" /> <gap:splash src="images/LaunchScreens/launch-ipad-app-P.png" gap:platform="ios" width="768" height="1024" /> <gap:splash src="images/LaunchScreens/launch-ipad-app-P-2x.png" gap:platform="ios" width="1536" height="2048" /> <gap:splash src="images/LaunchScreens/launch-ipad-app-L.png" gap:platform="ios" width="1024" height="768" /> <gap:splash src="images/LaunchScreens/launch-ipad-app-L-2x.png" gap:platform="ios" width="2048" height="1536" /> <!-- Define access to external domains. --> <!-- <access /> - A blank access tag denies access to all external resources. <access origin="*" /> - A wildcard access tag allows access to all external resource. <access origin="http://127.0.0.1*"/> - allow local pages only <access origin="http://phonegap.com" /> - allow any secure requests to http://phonegap.com/ <access origin="http://xxx.org" subdomains="true" /> - same as above, but including subdomains, such as http://build.phonegap.com/ <access origin="http://xxx.org" browserOnly="true" /> - only allows http://phonegap.com to be opened by the child browser. --> </widget> 

HTML (partes identificables reemplazadas por xxx):

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Featunetworking Series | xxx Live</title> <!-- requinetworking for the networkingirectToSystemBrowser() function --> <script src="phonegap.js"></script> <!-- used to change the formats of dates --> <script src="date.js"></script> <!-- jquery (we might as well use it) --> <script src="jquery-1.10.1.min.js"></script> <!-- our javascripts --> <script src="xxxlive.js"></script> </head> <body class="featunetworkingseries"> <header> <h1><a href="index.html"><abbr title="xxx">xxx</abbr> <span>Live</span></a></h1> </header> <section id="content"> </section> <!-- page specific javascripts --> <script> // load the featunetworking series content seriesDownload(featunetworkingseries); </script> </body> </html> 

JavaScript (partes identificables reemplazadas por xxx):

 // phonegap api media playing function playAudio(url) { // Play the audio file at url var my_media = new Media(url, // success callback function () { console.log("playAudio():Audio Success"); }, // error callback function (err) { console.log("playAudio():Audio Error: " + err); } ); // Play audio even if the screen is off my_media.play({ playAudioWhenScreenIsLocked : true }); } // generic get JSON data function function fetchJSONFile(path, callback) { var httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = function() { if (httpRequest.readyState === 4) { if (httpRequest.status === 200) { var data = JSON.parse(httpRequest.responseText); if (callback) callback(data); } } }; // false tells it to be synchronous instead of asynchronous httpRequest.open('GET', path, false); httpRequest.send(); } // get a bunch of series information from a json api function seriesDownload(seriestitle) { var series, number, description; // tell the function where the JSON data is fetchJSONFile('http://www.xxx.org/api/seriesdownload/?series=' + seriestitle, function(data) { // do something with your data // alert(JSON.stringify(data)); // alert(data.title + ', ' + data.camelcase); series = data.series; number = data.seriesnumber; description = data.description; $('#content').append('<h2>' + series + '</h2>'); $('#content').append('<blockquote><p>' + description + '</p></blockquote>'); for (var i = 0, l = data.sermons.length; i < l; i++) { var date, speaker, seriespart, sermon, sermonpart, sermonsubtitle, sermonsubtitlepart, mp3, mp4; //alert(data.events[i].name); date = data.sermons[i].date; // date.js doesn't seem to like the iso8601 time zone offset var date_readable = Date.parse(date.substring(0, 19)).toString('dddd, MMMM d, yyyy'); speaker = data.sermons[i].speaker; seriespart = data.sermons[i].seriespart; sermon = data.sermons[i].sermon; // replace non-alphanumeric characters with nothing var sermon_camelcase = sermon.replace(/[^a-zA-Z0-9]+/g, ''); sermonpart = data.sermons[i].sermonpart; sermonsubtitle = data.sermons[i].sermonsubtitle; sermonsubtitlepart = data.sermons[i].sermonsubtitlepart; mp3 = data.sermons[i].downloadlinks.mp3; mp4 = data.sermons[i].downloadlinks.mp4; $('#content').append('<h3>Pt. ' + seriespart + ' - ' + sermon + '</h3>'); $('#content').append('<dl id="' + sermon_camelcase + '">'); $('#content #' + sermon_camelcase).append('<dt>Date Preached</dt>'); $('#content #' + sermon_camelcase).append('<dd><time datetime="' + date + '">' + date_readable + '</time></dd>'); $('#content #' + sermon_camelcase).append('<dt>Speaker</dt>'); $('#content #' + sermon_camelcase).append('<dd>' + speaker + '</dd>'); $('#content #' + sermon_camelcase).append('<dt>Download Links</dt>'); $('#content #' + sermon_camelcase).append('<dd id="' + sermon_camelcase + '-downloadlinks">'); $('#content #' + sermon_camelcase + ' #' + sermon_camelcase + '-downloadlinks').append('<ul>'); $('#content #' + sermon_camelcase + ' #' + sermon_camelcase + '-downloadlinks ul').append('<li class="link" onclick="playAudio(\'' + mp3 + '\')">Audio (MP3)</li>'); $('#content #' + sermon_camelcase + ' #' + sermon_camelcase + '-downloadlinks ul').append('<li class="link" onclick="playAudio(\'' + mp4 + '\')">Video (MP4)</li>'); $('#content #' + sermon_camelcase + ' #' + sermon_camelcase + '-downloadlinks').append('</ul>'); $('#content #' + sermon_camelcase).append('</dd>'); $('#content').append('</dl>'); } }); } 

Entonces, básicamente, la página llama a una function JavaScript que llama a una API JSON y convierte esos datos en un montón de text. Ese text contiene enlaces a la function que reproduce el audio (nada, particularmente, loco).

¿Hay algo, obvio, que estoy haciendo incorrectamente o la API de PhoneGap Media realmente tarda tanto en funcionar? No lo creería, o la gente estaría alborotada al respecto. No he leído otros informes de personas con problemas similares.

Desafortunadamente, no puedo probar esto en mi escritorio, ya que mi browser no tiene acceso a todas las cosas de PhoneGap Build (pensé que valía la pena notar que Build ya que hay algunas diferencias).

También puede valer la pena señalar que intenté include el complemento de medios agregando <gap:plugin name="org.apache.cordova.media" /> a mi config.xml. Cuando actualicé la aplicación, me dio este error ( Unable to create app: plugin unsupported: org.apache.cordova.media ). Ese código es lo que recomiendan en su website. config.xml usa <gap:plugin name="GAPlugin" /> , así que intenté <gap:plugin name="Media" /> también. Obtuve un error similar ( Unable to create app: plugin unsupported: media ).

No he trabajado con los complementos PhoneGap anteriormente, así que podría ser que la falta de complemento sea lo que está causando la pausa larga antes de jugar. No lo creo, dado que esto debería ser una funcionalidad central incorporada de la API.