Problems under android 5.0

  • 1
  • Question
  • Updated 4 years ago
I have made a game for android using html, css and javascript, whit phonegap build.
It runs really well in android 5.0+ but under that versions, it has some problems like dont play the mp3 files, dont positioning correctly some elements that Iposition with javascript, and dont create an element to add a click event that I create with javascript too.
It seems like my javascript file doesnt work well under android 5.0.
any help?
Photo of AlaTrece Smite

AlaTrece Smite

  • 28 Posts
  • 0 Reply Likes

Posted 4 years ago

  • 1
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
I rather wonder how you managed to create scripts that only run properly in Android5.0+

Did you set 'android-minSdkVersion' in your config?
How do you play the mp3 files (media-plugin?)
Photo of AlaTrece Smite

AlaTrece Smite

  • 28 Posts
  • 0 Reply Likes
yes, I set 'android-minSdkVersion' properly in my config, and about mp3 files, i have them in my html like this:
< audio id="indexmusic" >
< source src="sounds/indexstart.mp3" type="audio/mp3">
< /audio>
< audio id="indexloop" loop >
< source src="sounds/indexloop.mp3" type="audio/mp3">
< /audio>
and my function is like this:
function playindexmusic(){
var indexmusic = document.getElementById("indexmusic");
indexmusic.play();
indexmusic.addEventListener("ended", function(){
indexmusic.currentTime = 0;
var indexloop = document.getElementById("indexloop");
indexloop.play();
});}
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
I set 'android-minSdkVersion' properly
????
To what value?

< source src="sounds/indexstart.mp3" type="audio/mp3">
Have you considered using the Media plugin?
Photo of AlaTrece Smite

AlaTrece Smite

  • 28 Posts
  • 0 Reply Likes
< preference name="android-minSdkVersion" value="14"/>
And i have read about the media plugin and I tried, but I cannot get any good result. I have to say that I am a rookie developing for android, I just select phonegap cause I know how to develop in html css and js.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
I tried, but I cannot get any good result.
Well, you aparently don't get a good result without the plugin, either. So, what did you try? How did you configure?

Just so we speed up things, a couple of questions:
- do you have both config.xml and index.html in the root directory of your zip file?
- do you include a reference to cordova.js in your html, without actually including such file in your assets?
- are you waiting for the deviceready event to fire before attempting to use the media plugin?
- did you include the latest version of the plugin, from npm?
Photo of AlaTrece Smite

AlaTrece Smite

  • 28 Posts
  • 0 Reply Likes
- Yes, I have both in my root directory
-Yes, I have the reference in my html without including cordova.js file
- In this one, I don't know what deviceready event is, so the answer is no.

What i tried with the media plugin is to call it by config and try to code in javascript according to that, but maybe my problem was not know how to code with the media plugin. Sorry if my english is not too good , I hope u understand me.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Photo of AlaTrece Smite

AlaTrece Smite

  • 28 Posts
  • 0 Reply Likes
with the media plugin i have change the function I mentioned few minutes ago to:

function playindexmusic(){

var indexmusic = new Media("sounds/indexstart.mp3");
indexmusic.play;
indexmusic.addEventListener("ended", function(){
var indexloop = new Media("sounds/indexloop.mp3");
indexloop.play;
});}

is that correct?

Also, I have put all my js code in the deviceready event, dont know if that is the way to do it.
But it keeps not working, so I have made something wrong.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
indexmusic.play;
indexloop.play;


This can't be right. It's not valid javascript.

But it keeps not working,
Did you try and debug it? Do you get any javascript errors?

Also, I have put all my js code in the deviceready event
Ehrm....do you mean in the callback function of the eventListener, or something else?
Photo of AlaTrece Smite

AlaTrece Smite

  • 28 Posts
  • 0 Reply Likes
I tried this
indexmusic.play;
indexloop.play;
and this
indexmusic.play();
indexloop.play();

I dont know how to debug it in a 4.x android version

and yes, in the callback function
Photo of AlaTrece Smite

AlaTrece Smite

  • 28 Posts
  • 0 Reply Likes
could I send you my app by private message so u can see it?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
I don't do e-mail or such. This is a forum, where questions are asked and answers given, in such a way that others can take part, too.

If your zip file is available online somewhere, please post its url and I'll be happy to have a look.
Photo of AlaTrece Smite

AlaTrece Smite

  • 28 Posts
  • 0 Reply Likes
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
OK. Here is some feedback.

1. Your config and index are not in the root, although you claimed so. They are in a directory /isnewaudio for whatever reason

2. You are using old, deprecated plugins from the pgb repo. You should use the latest version of the plugins from npm
See the Plugins section of the PGB Docs and the Blog article of September 04, 2015

3. You have a whitelist rule, but the whitelist plugin (from npm) is missing

4. You have no splashes. These are strongly recommended for Android and required for iOS

5. In main.js:
- it would be helpful to add a success and error callback, so you can log whatever happens and thus debug the situation easily
- when calling an object's method, us () or (parameters):
it is indexmusic.play(); --- not indexmusic.play;

6. You have a timing problem.
With <body onload="playindexmusic()"> you want a function performed, which might not be available, yet. After all, the DOM can be loaded before the main.js has completely been executed (it is waiting for deviceready).
So, it would be better to add the eventListener('deviceready') AFTER receiving the 'load' event for the document.
Photo of AlaTrece Smite

AlaTrece Smite

  • 28 Posts
  • 0 Reply Likes
Where can I put the deviceready event to fix that?
Photo of AlaTrece Smite

AlaTrece Smite

  • 28 Posts
  • 0 Reply Likes
Petra, please take a look at this zip
https://we.tl/P0TmescZtX
I fixed everything but splashes, but it doesnt work at all, im driving crazy with this.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. You have:
<script type="text/javascript"charset="utf-8"
src="phonegap.js"></script>
<script src="cordova.js"></script>

You can't have that. Use either one. I recommend deleting the line with phonegap.js and keeping the second line.

2. I suggested to add success and error callback functions to
var indexmusic = new Media("sounds/indexstart.mp3");
but you have none.
I would also suggest to first check the object type value of 'indexmusic' for test purposes:
var indexmusic = new Media("sounds/indexstart.mp3", successCallback, errorCallback);
alert("indexmusic is " + typeof indexmusic);


3. Remove onload="playindexmusic()".
Also remove all audio elements from the bottom of index.html
You already start playing upon deviceready.
Later on, when you want to hide the splashscreen after loading the first page, you will want another chain of document.load and deviceready, though.

Jesse posted 'Boilerplates' last year. Although they are a bit outdated (PGB 3.5.0 with old plugins), you may still want to have a look, because the Media plugin works fine there:
https://github.com/jessemonroy650/Pho...
This example may give you a feel of how it's supposed to work.
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@Petra,
I'm scheduled to update all examples this month, but since my laptop is broken - I can't do much.

Any questions on that example, please ask.

Jesse
Photo of AlaTrece Smite

AlaTrece Smite

  • 28 Posts
  • 0 Reply Likes
with your help, I can now play music in all versions, one problem fixed, but I dont know how to make this function works:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var audioFile = "";
audioFile = "/android_asset/www/sounds/indexstart.mp3";
my_media = new Media(audioFile, onSuccess, onError);
my_media.play();
var loop = function (status) { if (status === Media.MEDIA_STOPPED)
{ my_media.play(); } };
my_media = new Media("/android_asset/www/sounds/indexloop.mp3", null, null, loop); my_media.play();

}
It has to play "indexstart.mp3" first, one time, and when it end, start playing "indexloop.mp3" like a loop. any help?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
What goes wrong when you execute all this?
Does the loop() function get executed? If so:
- is the Media.MEDIA_STOPPED status ever detected (or do you get any other statuses?)
- is my_media defined within that function?
Photo of AlaTrece Smite

AlaTrece Smite

  • 28 Posts
  • 0 Reply Likes
thats all the js for the index page and when I play it, both 2 songs are playing at the same time.
all variables are defined within that function
Photo of AlaTrece Smite

AlaTrece Smite

  • 28 Posts
  • 0 Reply Likes
I tried this: and doesnt work:

function onSuccess() {};
function onError(e) {alert('err.code:' + e.code + '\nerr.message:' + e.message)};

var my_media = null;
var my_media2 = null;
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var audioFile = "";
audioFile = "/android_asset/www/sounds/indexstart.mp3";
my_media = new Media(audioFile, onSuccess, onError);
my_media.play();
var loop = function (status) { if (status === my_media.MEDIA_STOPPED && status === my_media2.MEDIA_STOPPED )
{ my_media2.play(); } else{return;}};
my_media2 = new Media("/android_asset/www/sounds/indexloop.mp3", null, null, loop); my_media2.play();

}
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
You have no 4th parameter in your first instantiation of Media.
Also, you don't answer any part of my second question....
Photo of AlaTrece Smite

AlaTrece Smite

  • 28 Posts
  • 0 Reply Likes
both functions are executioning right, the problem is that it starts with both musics at the same time, then the first one end and the second one makes the loop correctly. The only problem I need to solve is that the second music (the loop one) has to wait until the first music ends but it doesnt wait, the 2 start at the same time at the beginning
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
So, you need to catch the status of the first, and in its callback start the loop.