Phonegap 使用 phonegap 3 和媒体插件构建
Posted
技术标签:
【中文标题】Phonegap 使用 phonegap 3 和媒体插件构建【英文标题】：Phonegap Build with phonegap 3 and media plugin 【发布时间】：2014-02-01 11:31:23 【问题描述】：我使用 phonegap build 和 phonegap 3 构建应用程序。我想让用户使用该应用程序播放一些外部音频文件。但我应该错过一些东西，因为无法找到和播放媒体。
这是我的 config.xml：
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.phonegap.example"
versionCode = "10"
version = "1.0.0" >
<preference name="phonegap-version" value="3.0.0" />
<!-- versionCode is optional and android only -->
<name>My App</name>
<description>
Application mobile
</description>
<author href="https://www.website.fr" email="support@website.fr">
Henri Labarre
</author>
<gap:platform name="ios" />
<gap:platform name="android" />
<gap:plugin name="org.apache.cordova.core.media" />
<access origin="http://ibeat.org" subdomains="true" />
</widget>
我的 index.html ：
<!DOCTYPE html>
<html>
<head>
<title>My Audio</title>
<meta name="viewport" content="width=device-width,
height=device-height initial-scale=1.0,
maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="jquery.mobile1.0b3.min.css" />
<script type="text/javascript" charset="utf-8" src="jquery1.6.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile1.0b3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<script type="text/javascript">
function onBodyLoad()
//During testing, Let me know we got this far
alert("onBodyLoad");
//Add the PhoneGap deviceready event listener
document.addEventListener("deviceready", onDeviceReady(), false);
function onDeviceReady()
//During testing, Let me know PhoneGap actually
// initialized
//Get our media file and stuff
init();
</script>
</head>
<body onload="onBodyLoad()">
<section id="main" data-role="page" >
<header data-role="header">
<h1>My audio</h1>
</header>
<div data-role="content">
<p id="track"></p>
<p id="pos"></p>
<div data-role="controlgroup">
<a onclick="doPlay();" id="btnPlay" data-role="button" data-icon="arrow-r">Play</a>
<a onclick="doPause();" id="btnPause" data-role="button" data-icon="grid">Pause</a>
<a onclick="doStop();" id="btnStop" data-role="button" data-icon="delete">Stop</a>
</div>
</div>
</section>
</body>
</html>
还有我的脚本 main.js
var fileDur, theMedia, theTimer;
function init()
//alert("Init");
var fileName = "http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3";
console.log(fileName);
//Create the media object we need to do everything we need here
theMedia = new Media(fileName, onMediaSuccess, onMediaError, onMediaStatus);
console.log("Got this far!");
console.log(theMedia);
//Update the UI with the track name
$('#track').html("<b>File:</b> " + fileName);
$('#pos').html('Duration: ' + Math.round(theMedia.getDuration()) + ' seconds');
function onMediaSuccess()
console.log("onMediaSuccess");
window.clearInterval(theTimer);
theTimer = null;
function onMediaError(e)
var msgText = "Media error: " + e.message + "(" + e.code + ")";
console.log(msgText);
navigator.notification.alert(msgText, null, "Media Error");
function onMediaStatus(statusCode)
console.log("Status: " + statusCode);
function doPlay()
if(theMedia)
console.log("doPlay");
//Start the media file playing
theMedia.play();
//fire off a timer to update the UI every second as it plays
theTimer = setInterval(updateUI, 1000);
else
alert("No media file to play");
function doPause()
if(theMedia)
console.log("doPause");
//Pause media play
theMedia.pause();
window.clearInterval(theTimer);
function doStop()
if(theMedia)
console.log("doStop");
//Kill the timer we have running
theTimer = null;
//Then stop playing the audio clip
theMedia.stop();
function updateUI()
console.log("updateUI");
theMedia.getCurrentPosition(onGetPosition, onMediaError);
function onGetPosition(filePos)
console.log("onGetPosition");
//We won't have any information about the file until it's
// actually played. Update the counter on the page
$('#pos').html('Time: ' + Math.floor(filePos) + ' of ' + theMedia.getDuration() + ' seconds');
非常感谢您的热心帮助！
编辑：将 () 添加到侦听器 Edit2：添加访问来源=
【问题讨论】：
如果您从 console.log 获得消息错误的日志，如果您准确地测试哪个平台/设备，这可能会有所帮助 在安卓设备上测试，由 phonegap build 制作的应用程序。似乎没有加载init函数。 您是否尝试将您的设备连接到计算机并使用 adb 观看日志？ 是的，我使用 phonegap 构建调试并且没有显示错误，这就像应用程序跳过了 init() 函数 【参考方案1】：我认为你应该把document.addEventListener("deviceready", onDeviceReady, false);从你的onbodyload函数中去掉，而是在main.js中init函数的定义之后添加document.addEventListener("deviceready", init, false);。
由于您在 onbodyload 中有一个警报，因此在您开始收听之前会触发 deviceready 事件。
【讨论】：
我按照你的建议去做，但仍然没有媒体。我想知道侦听器设备是否准备就绪 嗯，用()更好，addEventListener需要这样的函数：document.addEventListener("deviceready", onDeviceReady(), false); 是的，我可以向你保证 deviceready 可以工作，但我的错，我告诉你把这行放在 main.js 的开头，实际上它应该放在定义 init 函数之后。跨度> 我只是在 init() 下尝试，但仍然没有媒体...但这在控制台中：未捕获的 ReferenceError: Media is not defined main.js:15 init main.js:15 onDeviceReady index.html :26 onBodyLoad index.html:18 onload 现在问题不一样了，从phonegap 3开始，默认不再包含核心插件，你必须添加媒体插件。尝试将最后我使用了这段代码，它与 phonegap build 3 一起使用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Media Example</title>
<link rel="stylesheet" href="jquery.mobile1.0b3.min.css" />
<script type="text/javascript" charset="utf-8" src="jquery1.6.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile1.0b3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
//document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
//function onDeviceReady()
// playAudio("http://www.mywebsite.fr/addons/Rome.m4a");
//
// Audio player
//
var my_media = null;
var mediaTimer = null;
// Play audio
//
function playAudio(src)
// Create Media object from src
my_media = new Media(src, onSuccess, onError);
// Play audio
my_media.play();
// Update my_media position every second
if (mediaTimer == null)
mediaTimer = setInterval(function()
// get my_media position
my_media.getCurrentPosition(
// success callback
function(position)
if (position > -1)
setAudioPosition((position) + " sec");
,
// error callback
function(e)
console.log("Error getting pos=" + e);
setAudioPosition("Error: " + e);
);
, 1000);
// Pause audio
//
function pauseAudio()
if (my_media)
my_media.pause();
// Stop audio
//
function stopAudio()
if (my_media)
my_media.stop();
clearInterval(mediaTimer);
mediaTimer = null;
// onSuccess Callback
//
function onSuccess()
console.log("playAudio():Audio Success");
// onError Callback
//
function onError(error)
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
// Set audio position
//
function setAudioPosition(position)
document.getElementById('audio_position').innerHTML = position;
</script>
</head>
<body>
<section id="main" data-role="page" >
<header data-role="header">
<h1>mywebsite</h1>
</header>
<div data-role="content">
<p id="track"></p>
<div data-role="controlgroup">
<a onclick="playAudio('http://www.mywebsite.fr/addons/Rome.m4a');" id="btnPlay" data-role="button" data-icon="arrow-r">Lecture</a>
<a onclick="pauseAudio();" id="btnPause" data-role="button" data-icon="grid">Pause</a>
<a onclick="stopAudio();" id="btnStop" data-role="button" data-icon="delete">Stop</a>
</div>
</div>
<p id="audio_position"></p>
</section>
</body>
</html>
【讨论】：
以上是关于Phonegap 使用 phonegap 3 和媒体插件构建的主要内容，如果未能解决你的问题，请参考以下文章
使用 xCode 登录 facebook 的 Phonegap 3.0 应用程序
我应该在 Phonegap 3 应用程序中包含 phonegap.js 吗？