I am fairly new to programming, and I am trying to build my very first phonegap app. I am trying to play some sounds which are located in my /www/sounds/ folder. However, when I am running index.html in my browser (chrome) I get the 'Uncaught ReferenceError: Media is not defined" error.
This is my HTML:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!--jQuery mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="files-list-page" data-role="page">
<header data-role="header">
<h1>Fragmenten</h1>
</header>
<div data-role="content">
<ul id="files-list" data-role="listview" data-autodividers="true" data-filter="false" data-split-icon="delete">
<audio id="fr1" src="sounds/5euros.mp3" type="audio/mp3" ></audio>
</ul>
<button id="btn1" class=ui-btn" onclick="playAudio('sounds/5euros.mp3')">Play</button>
</div>
<footer data-role="footer">
<h3 id="copyright-title">Soundboard</h3>
</footer>
</div>
</body>
And this is my JS:
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
app.initialize();
// Play audio
//
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
my_media.play();
}
My config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.martijn.HuisbaasBob" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HuisbaasBob</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
</widget>
Any suggestions would be of great help, thanks in advance!
You need to add this lines in ur config.xml to get your plugin worked...
(in app/res/xml/config.xml)
<feature name="Media">
<param name="android-package" value="org.apache.cordova.media.AudioHandler" />
</feature>
"Uncaught ReferenceError: Media is not defined" mean your code couldn't able to recognize it... meaning "not configured"
Related
I have some mysterious behaviour with my javascript code in my cordova android app. The javascript execution becomes anyhow not right executed. The intervals,conditions, timeouts and clearTimeout gets manipulated I think. You can see a demo here In my browser without the phonegap ready all works well. What can cause this behaiviour I have not only with these app.
index.js file
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
app.initialize();
index.html
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- Einstellungen zur Defintion als WebApp -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="ui-content" id="bak" style="width:100%;height:100%;position: absolute;">
<div class="header1">
<p class="score" style="white-space: normal" id="score"></p>
</div>
<p class="go" style="white-space: normal" id="number"></p>
</div>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function gameplay() {
window.location.href='main1.html';
}
function onDeviceReady() {
here is the js code you can see in the fiddle
}
</script>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
I want to develop a cordova app with multiple views using a single page with the aid of handlebars javascript library. I created a simple app with phonegap as a start under the name MyFirstApp and went to edit the index.html file under the www directory. But nothing shows when i run the app in internet browser. Anybody sees where i am doing it wrongly?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="mainpage">
<!--This is our template. -->
<!--Data will be inserted in its according place, replacing the brackets.-->
<script id="address-template" type="text/x-handlebars-template">
<p>You can find me in {{city}}. My address is {{number}} {{street}}.</p>
</script>
<!--Your new content will be displayed in here-->
<div class="content-placeholder"></div>
</div>
<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/handlebars-v4.0.2.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
index.js
var app = {
initialize: function() {
this.bindEvents();
},bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},onDeviceReady: function() {
// Grab the template script
var theTemplateScript = $("#address-template").html();
// Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
// Define our data object
var context={
"city": "London",
"street": "Baker Street",
"number": "221B"
};
// Pass our data to the template
var theCompiledHtml = theTemplate(context);
// Add the compiled html to the page
$('.content-placeholder').html(theCompiledHtml);
}
};
Use this as your index.js:
var app = {
initialize: function() {
this.bindEvents();
},bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},onDeviceReady: function() {
// Grab the template script
var theTemplateScript = $("#address-template").html();
// Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
// Define our data object
var context={
"city": "London",
"street": "Baker Street",
"number": "221B"
};
// Pass our data to the template
var theCompiledHtml = theTemplate(context);
// Add the compiled html to the page
$('.content-placeholder').html(theCompiledHtml);
}
};
I'm trying to print an alert with Cordova and it only works if I emulate my app with Ripple Chrome extension.
In my Samsung Galaxy S3, nothing happens when I click the button.
I'm using Cordova 3.6.3-0.2.13.
I've added to my project the following plugins:
org.apache.cordova.dialogs and
org.apache.cordova.vibration.
(if I type "cordova plugins ls" they both appear)
<html>
<head>
<script type="text/javascript" charset="utf-8">
function getInfo() {
navigator.notification.alert(
'Model: ' + device.model, // message
null, // callback
'Info', // title
'Ok' // buttonName
);
}
</script>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
<button id="gobutton" type="button" onclick="getInfo()">CLICK ME</button>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
While my index.js is:
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
app.initialize();
Could you help me? Thanks in advance
Dawson's comment should work.
As you can see at the Cordova documentation page:
http://docs.phonegap.com/en/2.2.0/cordova_notification_notification.md.html#notification.alert
The code:
navigator.notification.alert
is AFTER loading the cordova library.
I'm starting out with PhoneGap, trying to write my first Android plugin. I am basing it on the Echo example from the docs. It compiles and installs, but the call to exec doesn't seem to work. Can anyone suggest what is wrong? The index.html, Java code and config.xml are below. I get the alert msg for "running exec" but then nothing.
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<meta name="msapplication-tap-highlight" content="no" />
<title>PhoneGap Test App.</title>
<script type="text/javascript">
</script>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
<a onclick="runPlugin()" href="javascript:void(0);">Run Plugin</a><br>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function runPlugin() {
alert('running exec')
exec(function(result){ alert('ok: '+result);}, function(err){ alert('Error: '+err);}, 'Echo', 'echo', ['fred']);
alert('exec has run')
}
</script>
</body>
</html>
package org.apache.cordova.plugin;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.PluginResult;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
/**
* This class echoes a string called from JavaScript.
*/
public class Echo extends CordovaPlugin {
/**
* Executes the request and returns PluginResult.
*
* #param action The action to execute.
* #param args JSONArry of arguments for the plugin.
* #param callbackId The callback id used when calling back into JavaScript.
* #return A PluginResult object with a status and message.
*/
public PluginResult execute(String action, JSONArray args, String callbackId) {
try {
if (action.equals("echo")) {
String echo = args.getString(0);
if (echo != null && echo.length() > 0) {
return new PluginResult(PluginResult.Status.OK, echo);
} else {
return new PluginResult(PluginResult.Status.ERROR);
}
} else {
return new PluginResult(PluginResult.Status.INVALID_ACTION);
}
} catch (JSONException e) {
return new PluginResult(PluginResult.Status.JSON_EXCEPTION);
}
}
}
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.abc" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>PhoneGapTest</name>
<description>
Phonegap app. to test Wifi.
</description>
<author email="vkuruthers#gmail.com" href="http://a.com">
</author>
<content src="index.html" />
<access origin="*" />
<plugin name="Echo" value="org.apache.cordova.plugin.Echo" />
</widget>
i have downloaded plugin FileOpener
and added in m,y project like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>sample</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css">
<link rel="stylesheet" href="css/adidas.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script src="js/data_en.js"></script>
<script src="js/data_sp.js"></script>
<script src="js/adidas.js"></script>
<script src="js/cordova.js"></script>
<script src="js/video.js"></script>
<script src="js/fileopener.js"></script>
</head>
<body>
<div data-role="page" data-theme="a" class="my-page" id="video">
<video id="video_player" src="#" controls="controls"></video>
</div>
</body>
in js file
$(document).on('pagebeforeshow',"#video", function () {
var xyz = document.getElementById('video_player');
alert("values xyz:" + xyz);
var x = window.plugins.fileOpener.open("file:///android_asset/www/videos/1974.mp4");
xyz.src = window.plugins.fileOpener.open("file:///android_asset/www/balls/1970.png");
alert("opener:" + x);
window.plugins.videoPlayer.play(x);
alert("xyz after src:" + xyz);
});
i am failed to open any video file/ images from assets/www/videos/abcd.mp4 and similar for images
now everything is working fine but this is alert when trying to hit play button :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>sample</title>
<script src="js/cordova.js"></script>
<script src="js/video.js"></script>
<script src="js/fileopener.js"></script>
<script src="js/ADD_ANY_JQUERY.MIN.JS"></script>
<script>
function openFile(filePath)
{
window.plugins.fileOpener.open(filePath);
}
</script
</head>
<body>
<div data-role="page" data-theme="a" class="my-page" id="video">
<img src="img/b_img1.png" onclick="openFile('file:///android_asset/www/videos/1974.mp4')"/>
</div>
</body>
Edited
Fileopener.js will be like this:
cordova.define("cordova/plugin/fileopener",
function(require, exports, module) {
var exec = require("cordova/exec");
var FileOpener = function () {};
FileOpener.prototype.open = function(url) {
exec(null, null, "FileOpener", "openFile", [url]);
};
FileOpener.prototype.setTAG = function(tag) {
exec(null, null, "FileOpener", "setTAG", [tag]);
};
var fileOpener = new FileOpener();
module.exports = fileOpener;
});
/**
* Load Plugin
*/
if (!window.plugins) {
window.plugins = {};
}
if (!window.plugins.fileOpener) {
window.plugins.fileOpener = cordova.require("cordova/plugin/fileopener");
}
"js/ADD_ANY_JQUERY.MIN.JS"
in this line add a any jquery.min.js
Lastly check that Cordova.js folder is in your js folder of your application.. And let me know if it is not working what's your logcat saying...
i was using cordova 2.9.0 , jquery 1.9.1 ,jqm-1.3.2 and android-sdk-version:14 after adding code i was getting error:logcat is:
01-06 19:36:53.132: D/PluginManager(9420): exec() call to unknown plugin: FileOpener
01-06 19:36:53.202: D/CordovaLog(9420): file:///android_asset/www/js/fileopener.js: Line 20 : Class not found
01-06 19:36:53.202: I/Web Console(9420): Class not found at file:///android_asset/www/js/fileopener.js:20
the solution of this problem is i have done mistake in config.xml and in plugin.xml:
config.xml replace this:
<feature name="videoplayer">
<param name="android-package" value= "com.adidas.football.app.videoPlayer.VideoPlayer"/>
</feature>
with:
<feature name="VideoPlayer">
<param name="android-package" value= "com.adidas.football.app.videoPlayer.VideoPlayer"/>
</feature>
plugin.xml replace this:
<plugin name="videoplayer" value= "com.adidas.football.app.videoPlayer.VideoPlayer"/>
with:
<plugin name="VideoPlayer" value= "com.adidas.football.app.videoPlayer.VideoPlayer"/>
a minor mistake of CAPITAL LETTER but it removes all error and finally i have no error except last one alert which i added in my edited question "cannot play video"