Playing Sound in offline mode
64 views
Skip to first unread message
Jonathan
Feb 3, 2009, 11:44:24 AM2/3/09
to phonegap
OK, I've been trying to get this to work for a day now, and I know I'm
missing something. Could someone post their working code? I've got
index.html and gap.js in the www folder, and an audio file 10 seconds
long in both the www folder and resources folder. My index.html and
gap.js code is below. Is there something I'm missing?
This is what I have for my index.html in the www folder:
<html>
<head>
<title>Phone Gap Offline</title>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<meta name="viewport" content="minimum-scale=1.0, width=device-
width, maximum-scale=1.1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="YES">
<script type="text/javascript" src="gap.js"></script>
<LINK href="phone.css" rel="stylesheet" type="text/css">
</head>
<body onload="initGap();">
<img src="test.png" onclick="Device.playSound('test.wav');">
</body>
</html>
// Utils
try {
$ // Test if it is alread used
} catch(e) {
$ = function(id){
return document.getElementById(id)
};
}
// Acceleration Handling
var accelX = 0;
var accelY = 0;
var accelZ = 0;
function gotAcceleration(x,y,z){
x = eval(x);
y = eval(y);
z = eval(z);
if ((!isNaN(x)) && (!isNaN(y)) && (!isNaN(z))) {
accelX = x;
accelY = y;
accelZ = z;
}
return x + " " + y + " " + z;
}
// A little more abstract
var DEBUG = true;
if (!window.console || !DEBUG) {
console = {
log: function(){
},
error: function(){
}
}
}
var Device = {
available: false,
model: "",
version: "",
uuid: "",
isIPhone: null,
isIPod: null,
init: function(model, version) {
try {
Device.available = __gap;
Device.model = __gap_device_model;
Device.version = __gap_device_version;
Device.gapVersion = __gap_version;
Device.uuid = __gap_device_uniqueid;
} catch(e) {
alert("GAP is not supported!")
}
},
exec: function(command) {
if (Device.available) {
try {
document.location = "gap:" + command;
} catch(e) {
console.log("Command '" + command + "' has not been
executed, because of exception: " + e);
alert("Error executing command '" + command + "'.")
}
}
},
Location: {
// available: true,
lon: null,
lat: null,
callback: null,
init: function() {
Device.exec("getloc");
},
set: function(lat, lon) {
Device.Location.lat = lat;
Device.Location.lon = lon;
if(Device.Location.callback != null) {
Device.Location.callback(lat, lon)
Device.Location.callback = null;
}
},
wait: function(func) {
Device.Location.callback = func
Device.exec("getloc");
}
},
Image: {
//available: true,
callback: null,
getFromPhotoLibrary: function() {
return Device.exec("getphoto" + ":" +
Device.Image.callback)
},
getFromCamera: function() {
return Device.exec("getphoto" + ":" +
Device.Image.callback)
},
getFromSavedPhotosAlbum: function() {
return Device.exec("getphoto" + ":" +
Device.Image.callback)
}
},
vibrate: function() {
return Device.exec("vibrate")
},
playSound: function(clip) {
return Device.exec('sound:' + clip);
}
}
function gotLocation(lat, lon) {
return Device.Location.set(lat, lon)
}
missing something. Could someone post their working code? I've got
index.html and gap.js in the www folder, and an audio file 10 seconds
long in both the www folder and resources folder. My index.html and
gap.js code is below. Is there something I'm missing?
This is what I have for my index.html in the www folder:
<html>
<head>
<title>Phone Gap Offline</title>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<meta name="viewport" content="minimum-scale=1.0, width=device-
width, maximum-scale=1.1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="YES">
<script type="text/javascript" src="gap.js"></script>
<LINK href="phone.css" rel="stylesheet" type="text/css">
</head>
<body onload="initGap();">
<img src="test.png" onclick="Device.playSound('test.wav');">
</body>
</html>
// Utils
try {
$ // Test if it is alread used
} catch(e) {
$ = function(id){
return document.getElementById(id)
};
}
// Acceleration Handling
var accelX = 0;
var accelY = 0;
var accelZ = 0;
function gotAcceleration(x,y,z){
x = eval(x);
y = eval(y);
z = eval(z);
if ((!isNaN(x)) && (!isNaN(y)) && (!isNaN(z))) {
accelX = x;
accelY = y;
accelZ = z;
}
return x + " " + y + " " + z;
}
// A little more abstract
var DEBUG = true;
if (!window.console || !DEBUG) {
console = {
log: function(){
},
error: function(){
}
}
}
var Device = {
available: false,
model: "",
version: "",
uuid: "",
isIPhone: null,
isIPod: null,
init: function(model, version) {
try {
Device.available = __gap;
Device.model = __gap_device_model;
Device.version = __gap_device_version;
Device.gapVersion = __gap_version;
Device.uuid = __gap_device_uniqueid;
} catch(e) {
alert("GAP is not supported!")
}
},
exec: function(command) {
if (Device.available) {
try {
document.location = "gap:" + command;
} catch(e) {
console.log("Command '" + command + "' has not been
executed, because of exception: " + e);
alert("Error executing command '" + command + "'.")
}
}
},
Location: {
// available: true,
lon: null,
lat: null,
callback: null,
init: function() {
Device.exec("getloc");
},
set: function(lat, lon) {
Device.Location.lat = lat;
Device.Location.lon = lon;
if(Device.Location.callback != null) {
Device.Location.callback(lat, lon)
Device.Location.callback = null;
}
},
wait: function(func) {
Device.Location.callback = func
Device.exec("getloc");
}
},
Image: {
//available: true,
callback: null,
getFromPhotoLibrary: function() {
return Device.exec("getphoto" + ":" +
Device.Image.callback)
},
getFromCamera: function() {
return Device.exec("getphoto" + ":" +
Device.Image.callback)
},
getFromSavedPhotosAlbum: function() {
return Device.exec("getphoto" + ":" +
Device.Image.callback)
}
},
vibrate: function() {
return Device.exec("vibrate")
},
playSound: function(clip) {
return Device.exec('sound:' + clip);
}
}
function gotLocation(lat, lon) {
return Device.Location.set(lat, lon)
}
Jonathan
Feb 3, 2009, 11:50:17 AM2/3/09
to phonegap
and two minutes after I posted this, I realized I was missing some
javascript in the header. I cleaned up the code for what I needed
below.
I think it would be beneficial to populate the index.html file in the
offline folder with the correct javascript to get it working right out
of the box.
<script language="javascript" type="text/javascript">
alert("postion1");
//getLocation();
initGap = function() {
Device.init();
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(initGap);
alert("postion2");
</script>
javascript in the header. I cleaned up the code for what I needed
below.
I think it would be beneficial to populate the index.html file in the
offline folder with the correct javascript to get it working right out
of the box.
<script language="javascript" type="text/javascript">
alert("postion1");
//getLocation();
initGap = function() {
Device.init();
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(initGap);
alert("postion2");
</script>
kazoomer
Feb 3, 2009, 11:58:18 AM2/3/09
to phonegap
Yes we will try to make offline a little easier... it has already
come a long way :)
So the Gap.js needs to surrounded in a <script> block
And everything else looks fine.
If that doesn't work change the body onload to this onload="Device.init
()" just to simplify it even more.
Cheers.
Rob
Phonegap.com
Nitobi.com
come a long way :)
So the Gap.js needs to surrounded in a <script> block
And everything else looks fine.
If that doesn't work change the body onload to this onload="Device.init
()" just to simplify it even more.
Cheers.
Rob
Phonegap.com
Nitobi.com
Jonathan
Feb 3, 2009, 4:00:45 PM2/3/09
to phonegap
Hi Rob,
That would be great, now that I have it working, it's working great.
Now, here's a question for anyone... Device.playSound(test.wav) plays
the file... but if you click on it a few times, it starts playing it
again on top of the 1st play through.
Is there a way to alter the playSound function to stop any current
audio before starting the new one?
Something like this psuedocode:
playSound: Function(clip) {
Device.exec(stopsound);
return Device.exec('sound:' + clip );
}
That would be great, now that I have it working, it's working great.
Now, here's a question for anyone... Device.playSound(test.wav) plays
the file... but if you click on it a few times, it starts playing it
again on top of the 1st play through.
Is there a way to alter the playSound function to stop any current
audio before starting the new one?
Something like this psuedocode:
playSound: Function(clip) {
Device.exec(stopsound);
return Device.exec('sound:' + clip );
}
kazoomer
Feb 3, 2009, 5:16:53 PM2/3/09
to phonegap
Jonathan
Under the hood we are using AudioServicesPlaySystemSound and I think I
need to change this to use to use a queue to stop the playback..
Taking a quick look at the SpeakHere demo it shouldn't be to hard to
implement this.
Unfortunately there is no simple AudioServicesStopSystemSound function
I can just drop in.
Rob Ellis
Phonegap.com
Nitobi.com
Under the hood we are using AudioServicesPlaySystemSound and I think I
need to change this to use to use a queue to stop the playback..
Taking a quick look at the SpeakHere demo it shouldn't be to hard to
implement this.
Unfortunately there is no simple AudioServicesStopSystemSound function
I can just drop in.
Rob Ellis
Phonegap.com
Nitobi.com
Reply all
Reply to author
Forward
0 new messages