We Keep Coding

Update the JPlayer MP3 file each time a function is called

function showAudioFull(id)
{
var url = URL_DIRSCREENAUDIOSHOT+AUDIOSHOT_PREFIX+id+'.mp3';
var myCirclePlayer = new CirclePlayer("#jquery_audioFile",
{
m4a: url
}, {
cssSelectorAncestor: "#cp_container_1"
});
}
I am appending the MP3 link to JPlayer each time I call this function in my JS file.
There will be a set of images with "id". With an onClick() function this showAudioFull() is invoked.
But problem is JPlayer is not updating the mp3 file that is being played. It keeps playing the same audio which I click at the first time.
FYI : Using JPlayer Circle player

What about:
var myCirclePlayer = new CirclePlayer("#jquery_audioFile", {
m4a: url
}, {
cssSelectorAncestor: "#cp_container_1"
});
function showAudioFull(id) {
var url = URL_DIRSCREENAUDIOSHOT + AUDIOSHOT_PREFIX + id + '.mp3';
myCirclePlayer("setMedia", {
mp3: url
});
};
This method (setMedia) is used to define the media to play. The media parameter
is an object that has properties defining the different encoding
formats and a poster image. Source: jPlayer dev guide

PhoneGap media plugin stop the audio not working

I am workign with PhoneGap 3.0.0 and my confic.xml file does have the needed plugins. I can start saying that my sound do start when i run my code, and that everything else works. Just 1 thing dont want to work.
I am using Jquery Mobile.
I cant stop the audio.
I am calling a function called "stopAudio()" that read a global variable "my_audio" and fire of the "stop()" function.
Here is my code.
Index.html
Stop Audio
AudioHandler.js
document.addEventListener("deviceready", onDeviceReady, false);
var my_media = null;
function playAudio(url) {
try {
var my_media = new Media(url,
// success callback
function () {
my_media.release();
},
// error callback
function (err) {
my_media.release();
});
// Play audio
my_media.play();
} catch (e) {
alert(e.message);
}
}
function stopAudio() {
my_media.stop();
}
controller.js
$("#stopaudio").click(function() {
stopAudio();
});
Example usage:
playAudio("/android_assets/www/mysound.mp3");
So i have these 3 files. What i posted is a small amount of the content, but the other content in those files have nothing to do with the audio. I did also try and comment everything out and so forth.
So, basicly the "controller.js" is the file where the click are detected, and from there the function "stopAudio()" are called that comes from AudioHandler.js.
My audio do start on startup of the phone.
I cant stop the audio.
Im running out of ideas, any help would be welcome :-)
Thanks :)

You've declared my_media as a local variable here:
try {
var my_media = new Media(url,
You want it to be global, so remove the var:
function playAudio(url) {
try {
my_media = new Media(url,
// success callback
function () {
my_media.release();
},
// error callback
function (err) {
my_media.release();
});
// Play audio
my_media.play();
} catch (e) {
alert(e.message);
}
}

Loading Javascript and checking once it has loaded

I am using the following JavaScript code and I am trying to find out once the file has been downloaded and added to the header of my page:
function loadjscssfile(filename, filetype)
{
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
loadjscssfile("jquery.js","js");
I normally use the following code to find out once my image has loaded:
document.getElementById("header_logo").src = "logo.png"; // load top logo
var header_logo = document.getElementById("header_logo");
header_logo.onload = function(e) {
// do something here, the file has loaded
}
but I can't work out how to check once my JS has been loaded..
Any ideas?
(I can't use jQuery.)

You could add a function to the onload event:
function loadjscssfile(filename, filetype, onload) {
//if filename is a external JavaScript file
if (filetype == "js") {
var fileref = document.createElement('script');
fileref.type = "text/javascript");
fileref.onload = onload;
fileref.src = filename);
document.getElementsByTagName("head")[0].appendChild(fileref);
return;
}
//if filename is an external CSS file
if (filetype == "css") {
var fileref = document.createElement("link");
fileref.rel = "stylesheet";
fileref.type = "text/css";
fileref.onload = onload;
fileref.href = filename;
document.getElementsByTagName("head")[0].appendChild(fileref);
return;
}
}
loadjscssfile("jquery.js","js", function() { alert(this.src); });

In HTML 4.01 the load event was onlly supported by body and frameset elements, though many support it for img elements and some for script elements.
In HTML5, script elements have beforescriptexecute, afterscriptexecute and load events that are dispatched at relevant times in the script element's life. However, support for those events is likely not available in many browsers in use so not to be relied upon.
The most robust way to see if a script has loaded is to test for a value of a variable that is assigned a value by the last bit of code to be executed, e.g. final statements like:
var loadedScripts = loadedScripts || {};
loadedScripts.fooScript = true;
Then you can test for it:
if (loadedScripts.fooScript) {
// loaded
} else {
// not loaded
}

Access images in SD card

var pictureSource; // picture source
var destinationType; // sets the format of returned value
var photoid=window.localStorage.getItem("photoid");
var photoData=null;
// Wait for PhoneGap to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);
// PhoneGap is ready to be used!
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// A button will call this function
//
function getPhoto(source) {
alert("Entered sd card");
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
function onPhotoDataSuccess(imageData) {
console.log(imageData);
// Get image handle
var smallImage = document.getElementById('photos');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
smallImage.src = "data:image/jpeg;base64," + imageData;
alert(imageData);
photoData = imageData;
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function gotFS(fileSystem) {
fileSystem.root.getFile("/sdcard/external_sd/"+photoid+".jpg", null, gotFileEntry, fail);
}
function gotFileWriter(writer) {
writer.onwrite = function(evt) {
alert("write success");
};
writer.write(photoData);
}
function fail(error) {
alert(error.code);
}
/* function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
console.log(imageURI);
alert("photo captured");
uploadPhoto(imageURI);
} */
/* function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType,
sourceType: source });
} */
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
I have used the above code to access data in the sd card. But now what i need to do is, get the path of the images present there and put it in a diff object that can access the path and display those images. I have no clue on how to go about that.
Any help is appreciated.

What you can do is write a phonegap plugin for the platform you are developing for. I'll assume it's android. Writing android plugins.
When you call the Phonegap.exec to call the plugin, the plugin, gets the sd card path through
Environment.getExternalStorageDirectory().getAbsolutePath()
and then does a basic search to get all the .jpg and .png files and return a json of all the paths of the files.

cache wav file using javascript

When I load a sound file with Javascript, the file seems to load from remote server each time. Is it possible to cache the file once loaded? I would like to load once and play as required.
var soundEmbed = null;
function playSound()
{
var myWAVfile = "myfile.wav";
if (soundEmbed)
{
document.body.removeChild(soundEmbed);
}
soundEmbed = document.createElement("embed");
soundEmbed.setAttribute("src", myWAVfile);
soundEmbed.setAttribute("hidden", true);
soundEmbed.setAttribute("autostart", true);
document.body.appendChild(soundEmbed);
}