Javascript PhoneGap Build media.play（）需要很长时间才能开始播放

我正在为iOS开发一个PhoneGap应用程序，它可以让你听MP3和看MP3

通常，我会使用

或

来播放文件，并让系统媒体播放器处理事情。这一次，要求在屏幕关闭时继续播放音频。默认处理方式是在屏幕锁定时淡出并暂停媒体。提供了一些包含该选项的示例代码。这段代码似乎起作用了，因为当屏幕被锁定时，MP3会继续播放

我遇到的问题是，该文件需要相当长的时间才能开始播放。例如，一个27MB的MP3文件在iPhone4S（3g）上播放需要1分50秒，在iPad2（WiFi）上播放需要2分钟。在我的桌面上下载同一个文件花了几秒钟。它似乎必须在开始播放之前下载整个文件。这似乎没有必要。为了补充这一理论，如果我尝试播放MP4（使用

media.play（）

），则需要更长的时间，然后关闭应用程序

config.xml（可识别部分替换为xxx）：

xxx测试版
xxx Live///设计更新
//加载特色系列内容
系列下载（功能系列）；

JavaScript（可识别部分替换为xxx）：

//phonegap api媒体播放
功能播放音频（url）{
//在url播放音频文件
var my_media=新媒体（url，
//成功回调
函数（）{
log（“playAudio（）：音频成功”）；
},
//错误回调
功能（err）{
log（“playAudio（）：音频错误：+err”）；
}
);
//即使屏幕关闭，也可以播放音频
my_media.play（{playadiowhenscreenislocked:true}）；
}
//通用获取JSON数据函数
函数fetchJSONFile（路径，回调）{
var httpRequest=new XMLHttpRequest（）；
httpRequest.onreadystatechange=函数（）{
if（httpRequest.readyState==4）{
if（httpRequest.status==200）{
var data=JSON.parse（httpRequest.responseText）；
if（回调）回调（数据）；
}
}
};
//false告诉它是同步的，而不是异步的
httpRequest.open（'GET'，path，false）；
httpRequest.send（）；
}
//从json api获取大量系列信息
功能系列下载（系列）{
var系列、编号、说明；
//告诉函数JSON数据的位置
fetchJSONFile（'http://www.xxx.org/api/seriesdownload/?series='+系列，函数（数据）{
//对你的数据做点什么
//警报（JSON.stringify（数据））；
//警报（data.title+，“+data.camelcase）；
系列=数据系列；
number=data.seriesnumber；
description=data.description；
$（“#内容”）。追加（“”+系列+“”）；
$（“#内容”）。追加（“”+说明+”
）；
for（var i=0，l=data.sermons.length；i”）；
$（“#内容#”+布道(camelcase+“#”+布道(camelcase+）-下载链接ul”）。附加音频（mp3）”；
$（“#content”#“+salmon_camelcase+”#“+salmon_camelcase+”-下载链接ul”）.append（“
视频（mp4）
”；
$（“#内容#”+布道#卡米凯斯+”#“+布道#卡米凯斯+”-下载链接）。附加（“”）；
$（“#内容#”+布道#camelcase）.append（“”）；
$（“#内容”）。追加（“”）；
}
});
}

因此，基本上，页面调用一个JavaScript函数，该函数调用JSON API并将数据转换为一组文本。该文本包含播放音频的函数的链接（没有，特别是疯狂）

很明显，是我做得不对，还是PhoneGap媒体API真的需要那么长时间才能运行？我不这么认为，否则人们会对此大吵大闹。我没有读过其他关于人们有类似问题的报道

不幸的是，我无法在我的桌面上真正测试这一点，因为我的浏览器无法访问所有内容（我认为这是值得注意的，因为存在一些差异）。

<?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 required 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="prerendered-icon" value="false" /> <!-- ios: if icon is prerendered, 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>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Featured Series | xxx Live</title>
    <!-- required for the redirectToSystemBrowser() 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="featuredseries">
    <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 featured series content
        seriesDownload(featuredseries);
    </script>
</body>
</html>

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