PDA

View Full Version : Changing background color AND playing a sound file on click



tonybabb
07-17-2013, 12:33 PM
Good morning,
I'm creating an app (basically it's a talking phrase book) where a user will click on a div containing an image(of a speaker) and a few words of text. When they click anywhere on the image or text I'd like the div background color to change to say yellow, then play a short sound file (2 - 5 seconds) then change the background color to say pale yellow or back to it's original color. So far I can get it to play the sound when they click the image but after a week or more I can't get the background color to change and I can't get anything to happen when the text is clicked. The page will have dozens of these image/text combinations, the image is the same for each and the text/sound file is different on each.

I've tried using javascript and jquery without success including various combinations of adding an event listener, using $(this) , toggleClass and I just can't get anything to work - except for playing the mp3 sound file when the image is clicked. I'm new to javascript/jquery and really struggling to get my head around this. Basically I have to pass the name of an mp3 sound file when the image/text is clicked and change the background color temporarily.

To try to understand this I created a test app which just has a link to a sound file and I can't even get the sound to play now.

I'd really appreciate a pointer or two to get me headed in the right direction.

Here's the html for one of the divs on the test app (simplified for clarity)


<div class="formal">Formal div <a href="#" onclick="playAudio('test.mp3');">Play ay caramba</a></div>
Here's part of the javascript that plays the sound
function playAudio(src) {
Alert('start play audio');
$(this).toggleClass("highlight");
Alert('after toggle class');
if (my_media == null) {
// Create Media object from src
my_media = new Media(src, onSuccess, onError);
} // else play current audio
// Play audio
my_media.play();
Alert('after media play');
$(this).toggleClass("highlight");
Alert('after second toggle class');
}

And here's the css
.highlight { background:yellow;
}

The test application can be seen here www.pslt.biz/mobileApp/testflash/index.html (http://www.pslt.biz/mobileApp/testflash/index.html)
Thanks for any assistance you can provide.
Tony

jscheuer1
07-17-2013, 09:55 PM
I think you need to rethink this. Here are the errors I'm getting in Chrome:


Uncaught ReferenceError: onDeviceReady is not defined index.html:15
Failed to load resource http://count.carrierzone.com/track/ctin.php?t=1374097076909&custnum=7825ab5…ive%C2%AE%20Photo%20Gallery%3BShockwave%20Flash%3BSilverlight%20Plug-In%3B
Failed to load resource http://count.carrierzone.com/track/ctin.php?t=1374097076928&custnum=7825ab5…ive%C2%AE%20Photo%20Gallery%3BShockwave%20Flash%3BSilverlight%20Plug-In%3B
Uncaught ReferenceError: Alert is not defined index.html:35
playAudio index.html:35
onclick index.html:90


It's alert (lower case a), not Alert. But that's the least of your problems. Silverlight is a MS proprietary plugin. It may have ports for other browsers, but as far as I know, it hasn't caught on with them. In fact, even with folks using IE, they might not have it installed.

If I were you, I would look into using the HTML 5 audio tag as well as things like Flowplayer (http://flowplayer.org/) and jPlayer (http://jplayer.org/), which will use that tag and also provide a Flash fallback for unsupportive browsers.

tonybabb
07-18-2013, 12:26 PM
I think you need to rethink this. Here are the errors I'm getting in Chrome:



It's alert (lower case a), not Alert. But that's the least of your problems. Silverlight is a MS proprietary plugin. It may have ports for other browsers, but as far as I know, it hasn't caught on with them. In fact, even with folks using IE, they might not have it installed.

If I were you, I would look into using the HTML 5 audio tag as well as things like Flowplayer (http://flowplayer.org/) and jPlayer (http://jplayer.org/), which will use that tag and also provide a Flash fallback for unsupportive browsers.

Thanks for your comments. I'm really new to javascript and needed some direction. I have no idea how Silverlight got in there, I was using Jquery Mobile to create the app along with various bits of code I found elsewhere and was trying to adapt.

I'm trying to create something that looks like this image below:
5146 There will be dozens of similar English phrases each followed by one or two Spanish phrases, what I'm trying to achieve is when the user clicks, actually taps on a smartphone, anywhere on one of the Spanish lines they will hear a short sound clip(mp3 lasting 2 - 5 seconds), the Spanish phrase background will change to yellow for a couple of seconds and then go to either a pale yellow or the original background color.

Am I right thinking that you're saying I would use either the html5 Audio tag OR jplayer? I would want the sound to play when the phrase is clicked/ tapped and I wouldn't want to display play/pause/stop controls. From my initial review of the documentation I think I should be able to do this with jplayer - I'll try this later today.
In one of my earlier attempts I think I found that the Audio tag wasn't fully supported by PhoneGap Build which I am planning on using to create the smartphone app from the web app. It could have been caused by other coding errors of mine, I just don't remember now it was a few days ago. I took a look at the jplayer documentation and found it heavy going - at least for me as a noobie. But if using jplayer is most likely to achieve what I want then I'll download it and try creating a very short app with just a couple of phrases to get the structure right and the functionality working, then I'll apply it to the hundreds of phrases that I have stored elsewhere.

To start I have created a new mini app using Jquery Mobile, next I'll download jPlayer and then try to get it to play a couple of sound files. Once that's done and working I'll address the background color changes.
For an experienced javascript programmer this is probably a few minutes work, so far I've spent several hours a day for the past 10 days or so. Jquery mobile seems to work well, the problem I've been having is getting sound to play and changing the background color. Does this sound like a reasonable approach?
Thanks so much for your time and advice, it really helps.

jscheuer1
07-18-2013, 03:00 PM
Using jPlayer isn't simple even for an advanced javascript coder. But they have demos that work without you having to know anything. The tricky part would be adapting a simple one to do what you want.

Having an event (like a tap or a click) do more than one thing is pretty basic and doable. In jQuery you would do something like:


jQuery(function($){
$('.spanish').bind('click tap', function(e){
e.preventDefault();
this.style.backgroundColor = 'yellow';
play(this.getAttribute('data-audio')); //the data audio would be the clip name without the extension
$(this).animate({backgroundColor: 'gray'}, 500); //requires jQuery color animation plugin, set 500 to the duration of the clip if you like
});
});



What this would do is, each element with a class of spanish, like:


<a class="spanish" href="#" data-audio="test">Play ay caramba</a>

Would have their background color changed to yellow when clicked or tapped (you might need to use only click or only tap to avoid having it run twice) and run the function play() on their data-audio attribute. And, if you get the jQuery animate color plugin (http://jqueryui.com/animate/), you could set them up to animate to another background color while playing as shown. As you will see as you look into jPlayer, it's best to have .mp3 and .ogg versions of your sound file. Free Studio Manager (http://www.dvdvideosoft.com/free-dvd-video-software.htm#.Uef-d0D1GYh) is a good way to make copies in different formats.

The play() function (which could be named something else to prevent conflicts if need be) would pass the data-audio attribute with the added extensions (and path if any) over to the actual jPlayer play function, something like:


function play(snd){
var path = 'sounds/', mp3 = path + snd + '.mp3', ogg = path + snd + '.ogg';
jPlay(mp3, ogg);
}



What exactly that jPlay() function would look like is what you need to work out from the documentation and examples. This page looks somewhat promising:

http://www.jplayer.org/latest/quick-start-guide/example-audio-soundtrack/

It's setup to play on page load, but could probably be fairly easily adapted to be for click of an element. And from the looks of it, you might not need ogg copies of your sound.

jscheuer1
07-18-2013, 05:29 PM
This seems to work pretty well (I ended up using .ogg as well as .mp3 - the .ogg might be required by some browsers):


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.jplayer.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var highlight = 'yellow', origcolor = 'white', click = document.ontouchstart === undefined ? 'click' : 'touchstart';
var $s = $('.spanish').each(function(i, snd){
$(snd).jPlayer({
ready: function() {
$(snd).jPlayer("setMedia", {
mp3: snd.href,
ogg: snd.href.replace(/\.mp3$/, '.ogg')
});
var kickoff = function (e) {
e && e.preventDefault();
var $this = $(this);
if(!$this.data('play')){
$this.stop(true, true).css({backgroundColor: highlight}).animate({backgroundColor: origcolor}, 5000);
var $playing = $('a[data-playing="true"]');
if($playing.length){
if(click === 'click'){$playing.trigger('click');}
else {$playing.data('kickoff').apply($playing.get(0));}
}
} else {
$this.stop(true, true).css({backgroundColor: origcolor});
}
$(snd).jPlayer($this.data('play')? "stop" : "play");
$this.data('play', !$this.data('play'));
$this.attr('data-playing', $this.data('play'));
};
if(click === 'click'){
$('#' + this.getAttribute('data-trigger')).click(kickoff);
} else {
$('#' + this.getAttribute('data-trigger')).data('kickoff', kickoff);
document.getElementById(this.getAttribute('data-trigger')).addEventListener(click, kickoff, true);
}
},
ended: function(){
$('#' + this.getAttribute('data-trigger')).attr('data-playing', 'false').data('play', false);
},
swfPath: "./"
});
});
});
</script>
</head>
<body>
<a class="spanish" data-trigger="guitar" href="p1rj1s_-_rockGuitar.mp3">Guitar</a>
<a id="guitar" href="#">Guitar</a><br>
<a class="spanish" data-trigger="cromag" href="TSP-01-Cro_magnon_man.mp3">Guitar</a>
<a id="cromag" href="#">Cro Magnum Man</a>
</body>
</html>



Demo:

http://home.comcast.net/~jscheuer1/side/demos/jplayer/demo.htm

I'm not certain it will work on touch devices or not. Try it out for me, I have none. If not, we can probably either tweak it or incorporate the jQuery mobile plugin.

As I thought about it more though, I don't think touch devices have any problem with ordinary click events if they're on specific elements like these are. So I made up a demo with that in mind and switched things around a little and used an icon and css to jazz it up as well:

http://home.comcast.net/~jscheuer1/side/demos/jplayer/demo2.htm

tonybabb
07-19-2013, 11:21 AM
Thank you so much, the second example does exactly what I need. I'll try and figure out how you did it and will test it on my smartphone. I'll let you know how I get on - probably later today. Assuming it works I'll then try integrating this with my jquery mobile based app. Thank you again, you made my day/ night it's 4:15 am here in California.

jscheuer1
07-19-2013, 03:03 PM
If you have any questions or problems, just let me know. I used jPlayer version 2.4.0, the latest available from the official site and put it's jquery.jplayer.min.js, Jplayer.swf, the speaker image and the music files in the same folder as the demo pages.

The rest you can pretty much copy from your browser's "View Source". The only real configuration you need to worry about are the mp3 files, which are the href attributes of the class="spanish" links, each of which needs a unique trigger as shown, ex:


<a class="spanish" data-trigger="guitar" href="p1rj1s_-_rockGuitar.mp3">Guitar</a>
<a class="trigger" id="guitar" href="#">Guitar</a><br>


When creating ogg copies of your mp3 files with Free Studio Manager, you can drag and drop all of the mp3 files at once to the converter and do a batch conversion of them to ogg to the same folder. But you might want to do one or two individually first, just to get the idea. The program defaults (same quality, bitrate, etc.) are fine though, so you won't have to mess with them, just get the path set and you're good to go. An odd bug in Opera (at least some versions) requires that you not copy or move the ogg files, rather create them in the local folder where you want to keep them. Uploading them to the server is fine though. It's just moving/copying them around that creates the problem.

Alternatively you can skip the ogg copies by removing this line and the comma right before it from the on page script:


<script type="text/javascript">
jQuery(function($){
var highlight = 'yellow', origcolor = 'white';
var $s = $('.spanish').each(function(i, snd){
$(snd).jPlayer({
ready: function() {
$(snd).jPlayer("setMedia", {
mp3: snd.href,
ogg: snd.href.replace(/\.mp3$/, '.ogg')
});
var playstop = function (e) {
e && e.prev . . .

But I believe that will make the code at least a little less cross browser. If you keep that line, you do need ogg copies of each mp3 file.

Oh, and the highlight (highlight) background color and the fade to (origcolor) background color are set at the beginning of that on page script.

tonybabb
07-20-2013, 11:38 AM
Hi John,
I created a version of your demo2 and it worked online here www.pslt.biz/mobileApp/dd/index.html (http://www.pslt.biz/mobileApp/dd/index.html). When I converted it to a mobile App using Phonegap Build and tried on my phone it didn't play the sound, the background changed to yellow but didn't change back to white. I suspect the problem lies in these two lines
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
as the mobile app expects everything to be local. So, should I download them and address them locally? Also I didn't understand the src="//ajax...." is this locally stored - I haven't seen this format of address before.
One more question, how do I make the table cell wider? As you can see it right aligned my text and only had enough space for one word per line, and also the speaker icon then aligned at the top of the cell but looks even though the vertical align is "middle".
I'm sorry if these are very basic questions and thanks again for your help, at least it feels like I'm making some progress finally.

Tony

jscheuer1
07-20-2013, 04:18 PM
<style type="text/css">
.trigger {
display: table-cell;
padding: 3px 5px 3px 40px;
background: white url(audio-30.gif) 5px center no-repeat;
height: 40px;
width: 160px;
vertical-align: middle;
text-decoration: none;
font: bold 95% verdana, helvetica, arial, sans-serif;
border-radius: 10px;
}
</style>

The padding-left is to allow room for the image. I changed it to 40px to allow for the size of the image and to allow for a little spacing around it left and right and added a little padding in the other dimensions for a good look when the element is highlighted. The width is to allow room for the text. I changed it to accommodate longest text in your example. The height can be anything within reason, but needs to be at least as high as the image or one line of text, whichever is taller. I chose 40px to give a little more room top and bottom for the highlight. In an element like this (display-table-cell;), it acts more like a min-height, that is if the text needs to wrap, the element will become taller. I changed the coords of the background image from 0 0 to 5px center to give a little space on the left and to center it vertically should the text still wrap.

Here in the script code:


$(snd).jPlayer("setMedia", {
mp3: snd.href,
// ogg: snd.href.replace(/\.mp3$/, '.ogg')
});

you need to comment out the comma as well:


$(snd).jPlayer("setMedia", {
mp3: snd.href//,
// ogg: snd.href.replace(/\.mp3$/, '.ogg')
});

Because of strict rules, it might be a problem, and will hurt nothing if removed. If you bring back ogg support, you will need to bring back the comma too.

The:


src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"

syntax lets the browser assume http: or https:, whichever the page itself is using. You may hard code it as either http: or https: if you like. Just make sure to use the same one as the page is using.

You can download the scripts and host them on your server. Sounds however will not play in some browsers on a local machine. For best results the page, scripts and sounds must be on the web.

If the page was live when you tried to make it into an app, the location of the scripts as you noted could be the problem. You can grab them here (right click and 'Save As'):

http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js

and:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js

If the app creation process requires things to be on the local machine, just get everything in place and hope for the best. Once the app is created, it will run live, right? If so, that's probably good enough. Even if not, I just tested in Chrome and it all works locally, probably will in Safari too.

If I missed anything or was unclear, ask about it again. And/or if there are other problems/questions, let me know.

Oh, and I have a question for you. Does the live demo page before conversion work on your touch device?

tonybabb
07-21-2013, 12:44 PM
Hi John,

thank you very much for the changes and explanation of what you did. It works on my PC http://www.pslt.biz/mobileApp/dd/index.html . When I used Phonegap build to create the standalone mobile app that appeared to work but when I test on my smartphone I'm getting an application error saying it can't find the index.html file. I'm not sure what's causing this, I'll try going back to an old version and see if it loads that. I'll let you know what I find. thank you again for sharing your knowledge and for your patient explanation of what you did. I really appreciate it.

Tony

jscheuer1
07-21-2013, 04:18 PM
What I asked though is, "Does http://www.pslt.biz/mobileApp/dd/index.html work on your smartphone?" That's the first hurdle. If it doesn't work on the smartphone before Phonegap conversion to an app, it's not likely to work after.

So try that out and see.

Now as to this error. On the live page, if I do a "View Source" I see (at the very end):


<!-- WiredMinds eMetrics tracking with Enterprise Edition V5.4 START -->
<script type='text/javascript' src='https://count.carrierzone.com/app/count_server/count.js'></script>
<script type='text/javascript'><!--
wm_custnum='7825ab5d984e9e2b';
wm_page_name='index.html';
wm_group_name='/services/webpages/p/s/pslt.biz/public/mobileApp/dd';
wm_campaign_key='campaign_id';
wm_track_alt='';
wiredminds.count();
// -->
</script>
<!-- WiredMinds eMetrics tracking with Enterprise Edition V5.4 END -->
</body>
</html>



Did you add that? If not, the server is adding it. In either case, that might be where the error "can't find the index.html file" is coming from. The only other place I think it could be is our trigger links, which use # as their href. These are supposed to be default prevented, so should not fire. But if something else is going wrong, they would fire and their full href would resolve to:

http://www.pslt.biz/mobileApp/dd/index.html#

When do you get the error? Is it when the app loads, or when you tap on a sound? If it's when the app loads, it's probably because of that tracking script. If it's when you tap a sound, it could still be the tracking script, but it might be that Phonegap isn't bringing the required scripts (jQuery, the UI, and/or jPlayer) along when converting or is but the smartphone doesn't recognize a tap as a click.

So again I must stress that if http://www.pslt.biz/mobileApp/dd/index.html doesn't work on the smartphone, we would need to fix that first. Make sure to test whether it does or does not. Though it could happen that the live page works on smartphone but needs the jQuery mobile script and some tweaking to work after Phonegap conversion. But if the live page doesn't work in smartphone, we need to fix that first.


Some fine points unrelated to its working or not:

I was playing around with the layout a little more and discovered that using a <br> between the sounds makes a little more space than really looks good. You could get rid of the <br> and use a spacer div instead:


<a class="spanish" data-trigger="guitar" href="p1rj1s_-_rockGuitar.mp3">Guitar</a>
<a class="trigger" id="guitar" href="#">Guitar</a>
<div class="spacer"></div>
<a class="spanish" data-trigger="cromag" href="TSP-01-Cro_magnon_man.mp3">Guitar</a>
<a class="trigger" id="cromag" href="#">Cro Magnum Man</a>



Then add to the style section:


.spacer {
height: 5px;
}



Just looks better that way. And if you're converting it to an app anyway, you don't need this:


<!--[if lt IE 8]>
<style type="text/css">
.trigger {
display: inline-block;
padding-top: 20px;
height: 58px;
}
</style>
<![endif]-->

tonybabb
07-22-2013, 11:53 AM
Hi John,
I tested the website using my droid phone and there was no sound from it - which I think you suspected all along. I did some googling and found this https://groups.google.com/forum/#!topic/jplayer/46K2eSFnnac but quite honestly I didn't really understand what they were saying so I'm not sure how relevant it is but there seem to be some jplayer/droid issues. My droid phone is running v4.1.2 of droid.

The additional code at the end of the page was added by my web hosting company I believe. I have asked them to remove it, it's done at run-time I believe. From googling around it appears they do it for all web sites automatically unless you specifically ask them not to - I really don't like that approach and in any case I use Google Analytics so don't need it. The application error saying it couldn't find index.html has gone away, I'm not sure what the problem was. It now looks the same as the website, but when I tap the screen the background changes to yellow but no sound.

I've removed the commented code testing for IE8 and I'll make the .spacer change in the next few minutes.

Just an additional comment, I downloaded an app that changes the background color and plays a brief sound clip so I know it can be done on the droid, but I'm running out of ideas on what to try next. I really appreciate your help with this and your explanations of "why", they help me a lot.

Regards,

Tony

jscheuer1
07-22-2013, 01:49 PM
OK, well looking at that page you linked to, I don't believe we are doing any of the things it says are bad, I will double check though. We could try using the jQuery mobile plugin. I already setup a demo:

http://home.comcast.net/~jscheuer1/side/demos/jplayer/demo3.htm

See if that works on your droid.

tonybabb
07-23-2013, 10:50 AM
OK, well looking at that page you linked to, I don't believe we are doing any of the things it says are bad, I will double check though. We could try using the jQuery mobile plugin. I already setup a demo:

http://home.comcast.net/~jscheuer1/side/demos/jplayer/demo3.htm

See if that works on your droid.

Hi John,

That worked using the browser on my droid. Now I'll create the app and see how it goes. I'll get back to you probably later today.

Thanks again,

Tony

tonybabb
07-29-2013, 11:10 AM
Hi John,

Sorry I've been absent for a few days, life got in the way - mother-in-law broke her hip......

I tried demo3 on my PC and using the browser on my droid phone and it worked both times. So, I took your demo3, created a version on my PC and uploaded to a website at www.pslt.biz/mobileApp/dd3/index.html (http://www.pslt.biz/mobileApp/dd3/index.html) . This worked when I used my PC, using both IE and Chrome. When I used the browser on my droid phone the sound didn't play, but the text/ graphics showed correctly and responded to a tap - although the yellow background stayed yellow after a tap until I tapped again. The only changes I made to demo3 were to the name of the sound file and the spacing for my speaker image. I created my version twice just in case I did something wrong and had the same result both times. I just don't understand why your demo3 worked on my droid browser and mine didn't......

I'm not sure how relevant this is as it relates to the app rather than just using the droid browser but before I started corresponding with you I had gone back and forth with phonegap tech support and was able to get the sound working on my app, phonegap said I should use their api - phonegap.js which I did. Unfortunately I can't test that on my PC as the link and the js file are added by phonegap when they create the app - there's a different js file depending on which phone is the target environment apparently.

Thanks again for your time and any suggestions you may have.


Regards,

Tony

jscheuer1
07-29-2013, 01:48 PM
You have no test.ogg file, the tracking code is there again and appears to interfere in some browsers by causing an error, you copied my favicon link, you don't need or want that, it could be causing problems. In Opera I was informed that a security certificate for the page had expired and was asked if I wanted to see the page anyway.

For the .ogg file, either make one as I mentioned before, or comment (red two places) that part out:


$(snd).jPlayer("setMedia", {
mp3: snd.href//,
//ogg: snd.href.replace(/\.mp3$/, '.ogg')
});

Commenting it out will not help droid if droid requires a .ogg file, but it probably doesn't need one.

Get rid of the favicon link (near the top):


<link rel="shortcut icon" href="http://home.comcast.net/~jscheuer1/favicon.ico" />

And do what you can to remove the tracking code:


<!-- WiredMinds eMetrics tracking with Enterprise Edition V5.4 START -->
<script type='text/javascript' src='https://count.carrierzone.com/app/count_server/count.js'></script>
<script type='text/javascript'><!--
wm_custnum='7825ab5d984e9e2b';
wm_page_name='index.html';
wm_group_name='/services/webpages/p/s/pslt.biz/public/mobileApp/dd3';
wm_campaign_key='campaign_id';
wm_track_alt='';
wiredminds.count();
// -->
</script>
<!-- WiredMinds eMetrics tracking with Enterprise Edition V5.4 END -->

It's at the end, but I assume that, as before, it's being added automatically by the server.

Taking care of all of that may fix the security certificate problem, or it may not. If it doesn't, there's something wrong with your host's security certificate for your domain. Most likely that's coming from the tracking code, as it's the only secure https content on the page. But it might be something else.

Since you say it worked on the local computer, I'd say the tracking code is the biggest potential culprit.

tonybabb
07-30-2013, 09:51 AM
Hi John,
Thanks for your comments. I was able to stop the tracking code being added. I made the other changes you suggested, it worked on my PC and no sound on my droid phone. So, I created an ogg version of the test.mp3 file using Free Studio Manager (thanks for the referral to this very handy utility) uploaded it and added back the JS dealing with ogg files. Again it worked on my PC but still no sound on my droid phone. This really is very strange, is there anything I can do to debug on my smart phone? Here's the web page http://www.pslt.biz/mobileApp/dd3/

Thanks so much for your help with this, I'd be tearing out what little hair I have left trying to figure this out on my own!

Tony

jscheuer1
07-30-2013, 03:52 PM
Well retest my demo in droid:

http://home.comcast.net/~jscheuer1/side/demos/jplayer/demo3.htm

Make sure it's still working.

If so, I can see no reason for the problem with your demo, except perhaps that droid has cached it. But if it's an entirely new page and hasn't changed, that shouldn't be a problem. But it did change from when you added the ogg file. So that might be it. If so, make up an entirely new page with everything just like it is on your latest demo and try that. Clear the droid cache and keep your fingers crossed.

Oh, and other things different are:

The host

The css

The image

The sound file and the fact that you're using the same sound file for both sounds

I don't think that any of these could matter. One or more might. When I have more time, I will try hosting it with your page and sound(s) on my site to see if it's the cache or perhaps the host that's the problem. Droid may have cached at some point the ogg file as a 404 Not Found, or the tracking code might be cached on droid. It's hard to say. Can you do a view source in droid? If so, see what it looks like - are all of the latest changes there? Is the tracking code absent?

tonybabb
07-31-2013, 11:44 AM
Hi John,

I tested my site with a different droid phone with the same results so I don't think it's a cache issue. I don't think you can do a view source on an android - at least I couldn't find it, but I do know the tracking code has been removed. I agree that none of the other changes seem likely to cause this problem, however I'll create a second sound file and try that.

I can send you a zipped version of the site so you can try hosting, although I didn't see how to attach a file to a message, should I email it to you? Perhaps you could also email me your site and I can try it on my host. If it works unchanged I'll use that as a starting point and try adding my images, text and sound files one at a time and see if any of them break it. My email is tonybab AT alejandra.net .

One more thing I'll try is to go back to the original app that plays a sound when running as an app on the droid(ie after phonegap conversion). I'll try merging your code that changes background color with this app that plays sound - assuming I can figure it out.

Regards,

Tony

tonybabb
07-31-2013, 12:22 PM
Hi John,
Just a quick update - I added a second sound file in mp3 format and converted it to ogg. Same result as before - works on the PC but no sound on the droid. http://www.pslt.biz/mobileApp/dd3/index.html

Tony

jscheuer1
07-31-2013, 03:45 PM
OK, well you don't need view source in droid to check about the tracking code. Any browser will do for that. I just looked in Opera, and the tracking code is not there. I suppose it is possible that the server somehow detects droid and adds the tracking code for it, or detects touch devices and does something different for them, maybe even something intended to be helpful for touch devices, but that's not in this case.

Anyways, it's easy to attach files here. But first you need to be in the advanced editor. To do that hit the 'Go Advanced' button located to the bottom left of the quick reply editor, between the 'Post Quick Reply' and 'Cancel' buttons. Once in the advanced aditor, there are a lot more icons above the editiing area, one of them is the attach file icon, it looks like a page with a paper clip next to it. But they're tiny, so if you don't see it, just hover each one to see what they do, they each have tool tips.

But there are file size limits so it might not work with those sounds included. The file would probably be too big.

So I will email you mine. I don't need your's unless mine doesn't work on your server.

jscheuer1
07-31-2013, 05:51 PM
Ah, there's a missing ajax-loader.gif image, I guess from the mobile css. It might or might not be important, I'm really stacked today, later I will find it and find where to put it. Also, I just discovered that in Opera at least, the favicon has somehow been cached for your domain. That's off site from your host, might be an issue.

As I say, I'm very busy. Later on or over the next few days I will look into these issue more closely.

jscheuer1
08-01-2013, 01:00 AM
OK, I got some time. The ajax-loader.gif is used by the jquery.mobile-1.3.2.min.css file for markup created by the jquery.mobile-1.3.2.min.js file. So it (the loader image) probably needs to be hosted on the domain with the rest of the files. It's expected to be in a folder named images. I think the reason this caused no problem on my server is that it gave a 302 File Found for the image because of sophisticated handling of missing resource files, whereas yours is giving a 404 Not Found - the more typical reaction in this sort of situation.

Anyways, I took care of all of that in the latest demo:

http://home.comcast.net/~jscheuer1/side/demos/jplayer/demo4/demo4.htm

Make sure it works on your droid before proceeding.

If that checks out, you may download it (right click and 'Save As'):

http://home.comcast.net/~jscheuer1/side/demos/jplayer/demo4/demo4.zip

Set that up in it's own folder on on your server and see what happens.

tonybabb
08-01-2013, 11:20 AM
OK, I got some time. The ajax-loader.gif is used by the jquery.mobile-1.3.2.min.css file for markup created by the jquery.mobile-1.3.2.min.js file. So it (the loader image) probably needs to be hosted on the domain with the rest of the files. It's expected to be in a folder named images. I think the reason this caused no problem on my server is that it gave a 302 File Found for the image because of sophisticated handling of missing resource files, whereas yours is giving a 404 Not Found - the more typical reaction in this sort of situation.

Anyways, I took care of all of that in the latest demo:

http://home.comcast.net/~jscheuer1/side/demos/jplayer/demo4/demo4.htm

Make sure it works on your droid before proceeding.

If that checks out, you may download it (right click and 'Save As'):

http://home.comcast.net/~jscheuer1/side/demos/jplayer/demo4/demo4.zip

Set that up in it's own folder on on your server and see what happens.

Hi John,
It seems to be something to do with my server. I tried demo4 on your server using my PC and the droid phone and both worked. I then downloaded demo4, unzipped and uploaded to my server. It worked on my PC and no sound from my droid phone. The site on my server is here http://www.pslt.biz/mobileApp/demo4/demo4.htm .
I have uploaded a zip of my previous dd3 test, this doesn't include the ajax gif changes but as your demo3 worked on your server using my PC and the droid phone this ought to work too when I try it. It can be found here http://www.pslt.biz/mobileApp/dd3.zip

Thanks so much for your very patient mentoring with this.

Tony

jscheuer1
08-01-2013, 03:35 PM
I uploaded your demo to my server:

http://home.comcast.net/~jscheuer1/side/demos/jplayer/dd3/

If you have Chrome or Firefox on your droid, I've see here:

http://android.stackexchange.com/questions/5039/how-do-i-view-source-in-the-android-browser

that you can type this in the browser's address bar:

view-source:http://www.pslt.biz/mobileApp/demo4/demo4.htm

to see the served source code. But that, of course would only be as seen by those browsers, your host might work on droid in those browsers. But if it doesn't it could provide a clue.

It might even work with android's native browser (Safarir, right?) that's a lot like Chrome. If not, I'd try Chrome, as it's the closest to Safari.

The bottom line here though is that it's obviously something about your server Just what that might be, I'm not sure. It might be something about how you're uploading to your host, how are you doing that? A view source in droid might help. What would help more are diagnostics, something like Chrome's native developer tools where you can (among other things) see what resources are being loaded and what if any script errors there are, and what the DOM looks like after scripts have acted upon it. In normal Chrome we can access all that by hitting the F12 key, or by activating the "Customize and Control" menu (upper right hand of the browser) and choosing (hovering) Tools, then clicking on Developer tools.

If you can do that, we could get more diagnostics.

But I'd say try a different host.

I have one or two that I have access to that I could upload something like this to just as a test. But we need to get this working for you on some domain you have access to. So the better test for you would be to try other hosts, not me. Out of curiosity, how are you uploading to your host? Is it via FTP or is it some host provided interface?

tonybabb
08-16-2013, 10:02 AM
Hi John,
Sorry I've been missing for a couple of weels but I'm back now.

So, I followed your advice and have a new server hosted by godaddy. I uploaded demo4 and it works on my PC and using the browser on my droid phone. It can be seen here www.lawenforcementspanish.com/demo4sp/index.html (http://www.lawenforcementspanish.com/demo4sp/index.html) .
So next step was to convert this to run as a stand-alone app. I had to make a couple of changes - used my smaller sound files and renamed demo4.htm to be index.html . Then I zipped the website and uploaded to PhoneGap Build which should package it as a stand-alone app. When I downloaded to my droid and launched it, it failed saying it couldn't find index.html - which I know is there so I have a request for tech support in to their forum although from past experience they can take several days to respond. UPDATE - I downloaded again and this time it installed and ran, although it didn't play any sounds. I think PhoneGap and jPlayer have issues getting along from looking around the various forums.

In the meantime I tried the Intel XDK toolkit which should do the same as PhoneGap Build. It took me a while to figure it out but the bottom line is that it works on my droid when using Intel's app-lab as a test environment. I still need to try and understand exactly what I'm seeing with Intel XDK/ app-lab but for now it seems to be working. One thing I noticed with both the PhoneGap created app and the Intel XDK created app is that the speaker icon doesn't show up with either version of the app. Could it be something to do with defining the gif image of the speaker in CSS?

Thank you so much for your help with this, I'll try fixing the speaker display problem and familiarizing myself with Intel XDK. Maybe I'll even hear back from PhoneGap support.

Tony

jscheuer1
08-16-2013, 02:47 PM
Well, I looked at the PhoneGap home page and it says that it takes ordinary javascript, css, and HTML, turning them into an app, so one would think the css image would be OK. I suppose that we could use a regular image. But getting it to layout as well as it does using it as a background image is tricky. I tried a few quick things, but I cannot retain the ability to have longer text wrap and be centered vertically visa vis the image, one or the other, but not both. With your image, which is about the height of a line of text, one or the other of those (no vertical centering) might be OK though:


<!DOCTYPE html>
<html>
<head>
<title>jPlayer Demo 6 w/jq-mobile</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.wrapper {
margin: 8px;
}
.trigger {
display: block;
padding: 3px 5px;
background-color: transparent;
width: 255px;
text-decoration: none;
font: bold 95% verdana, helvetica, arial, sans-serif;
border-radius: 15px;
}
.trigger img {
vertical-align: middle;
height: 78px;
width: 105px;
float: left;
}
.spacer {
height: 5px;
clear: left;
}
</style>
<link rel="stylesheet" href="jquery.mobile-1.3.2.min.css">
<script src="jquery.min.js"></script>
<script src="jquery.mobile-1.3.2.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.jplayer.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var highlight = 'yellow', origcolor = 'transparent';
var $s = $('.spanish').each(function(i, snd){
$(snd).jPlayer({
ready: function() {
$(snd).jPlayer("setMedia", {
mp3: snd.href,
ogg: snd.href.replace(/\.mp3$/, '.ogg')
});
var playstop = function (e) {
e && e.preventDefault();
var $this = $(this);
if(!$this.data('play')){
$this.stop(true, true).css({backgroundColor: highlight});
var $playing = $('a[data-playing="true"]');
if($playing.length){
$playing.trigger('tap');
}
} else {
$this.stop(true, true).animate({backgroundColor: origcolor}, 1000);
}
$(snd).jPlayer($this.data('play')? "stop" : "play");
$this.data('play', !$this.data('play'));
$this.attr('data-playing', $this.data('play'));
};
$('#' + this.getAttribute('data-trigger')).tap(playstop);
},
ended: function(){
$('#' + this.getAttribute('data-trigger')).attr('data-playing', 'false').data('play', false).stop(true, true).animate({backgroundColor: origcolor}, 1000);
},
swfPath: "./"
});
});
});
</script>
</head>
<body>
<div class="wrapper">
<a class="spanish" data-trigger="guitar" href="p1rj1s_-_rockGuitar.mp3">Guitar</a>
<a class="trigger" id="guitar" href="#"><img src="speaker3.gif" alt="original image" title="">Guitar</a>
<div class="spacer"></div>
<a class="spanish" data-trigger="cromag" href="TSP-01-Cro_magnon_man.mp3">Guitar</a>
<a class="trigger" id="cromag" href="#"><img src="speaker3.gif" alt="original image" title="">Cro Magnum Man Cro Magnum Man Cro Magnum Man Cro Magnum Man</a>
</div>
</body>
</html>



Note the image dimensions are set in the style section, change these to your own image's dimensions.

tonybabb
09-05-2013, 11:17 AM
Hi John,

I figured out why the image of the speaker is not being displayed in the background of the div after running the webapp through the Intel XDK. It turns out that the Intel XDK didn't like the url "../demo4sp/audio-30.gif" but it was OK with "audio-30.gif" even though both were pointing to the file in the same folder as the index.html file. The result can be seen here http://www.lawenforcementspanish.com/demo4sp

So, my next step will be to transplant this working code into my jQuery Mobile app. Actually I tried already and it's not working, I'll try and figure out what's wrong. Thank you so much for your patience and support. The learning curve continues to be really steep but I couldn't have got where I am so far without your guidance.
Regards,

Tony Babb

tonybabb
09-06-2013, 11:32 AM
Hi John,
Sorry to have to reach out to you again.

The app is supposed to change the background color and play a sound file when clicked. The working version is here http://www.lawenforcementspanish.com/demo4sp and I transplanted this working code into my webapp http://www.lawenforcementspanish.com/mle which contains some of the final content I'll be using - English/Spanish phrases. I added the working code to the "Age/Weight/Height" page. My thought was to get these two test links/ files working and then I can wrap the working code around the various Spanish expressions on each page. I have spent several hours trying to figure out why the transplanted code doesn't work - there are two problems:
The image of the speaker doesn't display
The sound doesn't play

I copied all the CSS and JS files and the SWF file and included the links so I really don't understand what's going on here. Any assistance would be greatly appreciated.

Thanks and regards,
Tony Babb

jscheuer1
09-06-2013, 02:23 PM
I'm getting:


Failed to load resource: the server responded with a status of 404 (Not Found) http://www.lawenforcementspanish.com/mle/jquery.mobile-1.3.2.min.js
Failed to load resource http://localhost:58888/_appMobi/appmobi.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.lawenforcementspanish.com/mle/CSS/audio-30.gif


Looking at the source code of the page, I see:


<link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="CSS/layout.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<!-- from demo 4sp -->
<script src="jquery.min.js"></script>
<script src="jquery.mobile-1.3.2.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.jplayer.min.js"></script>
<!-- End from demo4sp -->

That's two versions of jQuery, two versions of jQuery mobile (the second of which is the 404 Not Found), only one, an earlier version, of the mobile css.

I think you need to get rid of the older code (red), and add (upload) the missing mobile script (highlighted) and link to the mobile styles (jquery.mobile-1.3.2.min.css, which is not even attempted to be linked in there, but should be). The jquery.mobile-1.3.2.min.css file will have to be uploaded as well, unless it's already there.


I also found the 'missing' audio-30.gif in the mle folder. With the CSS/layout.css file being where it is, the audio-30.gif needs to be in the mle/CSS folder.

Or the reference to it in the CSS/layout.css file:


background: transparent url(audio-30.gif) 0 center no-repeat;

needs to be:


background: transparent url(../audio-30.gif) 0 center no-repeat;

Or You could move the css file to the mle folder and reference it there in the stylesheet link on the page.

As regards the css file and the image, do only one of these three. The reason one of them must be done is because references to images in css files are relative to the css file.


Later I see:


<!-- Following are for appmobi and Intel xdk -->
<!-- the line below is required for access to the appMobi JS library -->
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script>
<!-- End appmobi library -->

So presumably that last one isn't crucial for the page to work. Rather for making a mobile app. But if it is crucial for the page, it needs to be hosted on the server.


The browser cache may need to be cleared and/or the page refreshed to see changes.

There could also be other problems.

tonybabb
09-08-2013, 12:06 PM
Hi John,
Thanks for the feedback and explanation.
I moved the speaker image to the CSS folder and it now displays correctly. I uploaded the missing jquery.mobile-1.3.2.min.js and now the sound plays correctly and the background color changes also, this can be seen here http://www.lawenforcementspanish.com/mle2 then select the Age/Weight/Height menu item. However I noticed that when I added the ....1.3.2.min.js library the menu page formatting changed - the original and correct formatting can be seen here http://www.lawenforcementspanish.com/mle . I have no idea what caused the formatting change.

Regarding the appmobi.js - yes that's needed for the mobile app as far as I understand so I think I should leave it in.

As for the multiple jQuery/ jQuery Mobile links you highlighted in red they came from the jQuery Mobile template in Dreamweaver. I tried commenting them out here http://www.lawenforcementspanish.com/mle3 but as I suspected I lost all formatting of the menu page so I think they have to stay.

I'm at a bit of a loss to know what I should try next, it feels as though we're almost there in the mle2 version, above, if only I could get back the original formatting as shown in the mle version.

Thanks again for your assistance with this, I truly appreciate your time and patient explanations.

Tony Babb

tonybabb
09-13-2013, 12:41 PM
Hi John,
I've been going over the problems I reported in my previous note and confirmed the test results - specifically that including the jquery mobile 1.3.2 js library caused the formatting of the menu on the first page to be changed. This change can be seen when the menu first loads which is very puzzling as looking at your code I don't see where the js library is called until the text is clicked. If you could point me in the right direction I'd really appreciate it.

The version that plays a sound and changes background color can be seen here http://www.lawenforcementspanish.com/mle2, it also has the menu format changed. I created another version which is the same as mle2 but I commented out the call to the 1.3.2 js library on line 15, this can be seen here http://www.lawenforcementspanish.com/mle4

Thanks,

Tony Babb

jscheuer1
09-13-2013, 04:46 PM
I'm not exactly sure about which files do which, but the mobile css and the mobile js files work together. And they appear to be version dependent. That is the css of one version cannot be mixed with the css of another version. Ideally you use one version's css and js and no other css and js for jQuery mobile on a page. Once you see how the page is laying out like that, you can use your own stylesheet to tweak things.

tonybabb
09-17-2013, 12:11 PM
I'm not exactly sure about which files do which, but the mobile css and the mobile js files work together. And they appear to be version dependent. That is the css of one version cannot be mixed with the css of another version. Ideally you use one version's css and js and no other css and js for jQuery mobile on a page. Once you see how the page is laying out like that, you can use your own stylesheet to tweak things.

Thanks, that makes sense. When I added jQuery...1.3.2 this was to add the ability for sound to play and change the background color, unfortunately it affected the layout. So, just what calls does your code make to the 1.3.2 js library? I'm thinking if I can identify them then I can extract them alone from 1.3.2 and create a separate external js file just containing those routines(sorry if I'm not using the correct term here) and I can link to that instead of 1.3.2 and hopefully these will not affect the layout of the menu. I'm assuming there's something in 1.3.2 that is being triggered by the existing menu and causing the layout problem as the layout problem exists before any item is clicked to create a sound. Does that make sense?

As a backup approach I'm also looking at the new Intel XDK cross platform developer kit (released a few days ago) that seems to support the html5 Audio tag so I'll try using that to create a new app from scratch with the menu and sound, if that works I should have a consistent js and css as they all come from the Intel new XDK.

I really appreciate all the time you've put into this, I never in my wildest dreams thought I'd take a couple of months or more on this issue, there is just so much software I'm unfamiliar with but I will get this working. Thanks again,

Tony

jscheuer1
09-18-2013, 12:10 PM
At one point I was thinking along those same lines, of extracting routines so as not to be tied to the css. But it is the css that allows the routines to work. It creates a canvas, if you will, upon which the mobile device events can be interpreted. Some of it can be changed, tweaked, but other parts must remain.

But to answer your question, all it's used for is to detect tap.

tonybabb
09-18-2013, 04:22 PM
At one point I was thinking along those same lines, of extracting routines so as not to be tied to the css. But it is the css that allows the routines to work. It creates a canvas, if you will, upon which the mobile device events can be interpreted. Some of it can be changed, tweaked, but other parts must remain.

But to answer your question, all it's used for is to detect tap.

Ok, that's what I expected - it detects the tap action. Yet, when I load the app the menu is already displayed incorrectly before I tap anything and the only difference between the correct formatting and the incorrect formatting is the inclusion of the 1.3.2 js library. So I'm wondering if there's something in the app that calls a js library item in the 1.3.2 library when it should be calling it from another js library? Is there any way I can control which order the js libraries are searched? If so I could make the 1.3.2 library the last one that is searched.

Thanks again,

Tony

tonybabb
09-18-2013, 04:59 PM
John, I've been searching some more (stackoverflow actually) and found some discussions about .noconflict which I think allows the user to switch between multiple jquery libraries. I don't really understand a lot of it but I'll keep looking. Could this be the right direction do you think?

Thanks,

Tony

jscheuer1
09-19-2013, 05:54 AM
No, it's for multiple versions of jQuery itself, not for multiple versions of the mobile plugin.

But this has got me to thinking. If you're happy with the older css, you should be able to use the older version js as well. It almost has to be able to detect a tap. It probably uses a different syntax. The beauty of the newer version is that it not only detects a tap, but also detects a click if that's the kind of device being used. But I don't think you require that, or do you?

The odd thing is that, most mobiles will also send a click event to the browser when tapping, so you shouldn't need any mobile css or js. But I believe we tried that and it didn't work.

There's also an event we could try - touchstart. Generally a tap will send a touchstart event. I'm not sure if we tried that or not.

When I get a little more time, I'll work up a demo of it.

tonybabb
09-19-2013, 12:14 PM
Hi John,

When I started this app I used the JQM template supplied with Dreamweaver CS6, this included the CSS and JS libraries and I was happy with the functionality i.e. just detect a tap. Below are the links created in the template:

<link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>

I found an unminimized version of the ....structure....css file, I've been unable to find an unminimized version of the ....theme....css file. I also found an unminimized version of the jquery-mobile-1.0.js file and the jquery-1.6.4.js file. If it helps, I have uploaded the three unminimized versions of these files I found, they can be found here:

http://www.lawenforcementspanish.com/mle4/UnMin/jquery-1.6.4.js

http://www.lawenforcementspanish.com/mle4/UnMin/jquery.mobile-1.0.js

http://www.lawenforcementspanish.com/mle4/UnMin/jquery.mobile.structure-1.0.css

In the meantime I'll continue looking at your previous demo and see if I can identify the routines it uses in 1.3.2 and try extracting them to a separate linked js file.

Thanks so much for you ongoing interest and assistance. This seems to be a very popular topic with almost 9,000 views so far so maybe I'm not alone with this problem!!

Regards,

Tony

jscheuer1
09-19-2013, 01:18 PM
OK, here's a demo that attempts to use the touchstart event directly instead of jQuery mobile's tap:

http://home.comcast.net/~jscheuer1/side/demos/jplayer/demo4/demo7.htm

See if that works in Android. If that works, it's good news because I took both the mobile js and css off the page. If not, I can try tweaking it.

Oh, and here's another version:

http://home.comcast.net/~jscheuer1/side/demos/jplayer/demo4/demo8.htm

Try it if the first one is no good.

tonybabb
09-20-2013, 11:42 AM
OK, here's a demo that attempts to use the touchstart event directly instead of jQuery mobile's tap:

http://home.comcast.net/~jscheuer1/side/demos/jplayer/demo4/demo7.htm

See if that works in Android. If that works, it's good news because I took both the mobile js and css off the page. If not, I can try tweaking it.

Oh, and here's another version:

http://home.comcast.net/~jscheuer1/side/demos/jplayer/demo4/demo8.htm

Try it if the first one is no good.

Hi John,

I tried the first one (demo7) and it worked fine on my PC. When I tried using the browser on my droid phone it sort of worked. To be more specific I found that if I tapped on "Guitar" it played for maybe half a second or less and then stopped, however if I dragged my finger from left to right it played all of "Guitar". Also, when playing Guitar and I tapped it restarted playing Guitar but when I dragged my finger it stopped playing.

So, I tried demo8 and that worked perfectly, responding to a tap as expected on my droid browser.

Next step I think is to put demo8 into the Intel XDK and create a stand alone app, if that works I'll merge this with my existing jQuery Mobile app and see how that goes. That'll be done later today (Friday), I'll also study what you did in demo8 to try and get my head around this js stuff. I'll let you know how I get on. Thanks again.

Tony

jscheuer1
09-20-2013, 12:40 PM
That's great about demo 8. If this only has to work on Android, the code for the page can be simplified:

http://home.comcast.net/~jscheuer1/side/demos/jplayer/demo4/demo9.htm

tonybabb
09-21-2013, 11:37 AM
Hi John,
I copied demo8 to my server, added the other linked files and made some minor changes to replace the speaker icon and audio files. When I tried it on my droid browser (with a tap) both sounds played correctly but the background color did not return to transparent when it finished playing the audio. So I went back to your demo8 which works correctly on my droid browser, my version also behaves the same way on my PC using IE. I've spent a while looking at the code and don't see where I messed up. If I can't find the problem I'll do it again.

My version can be seen here http://www.lawenforcementspanish.com/demo8

I'll keep you posted on my progress.

Thanks,

Tony

jscheuer1
09-21-2013, 03:27 PM
<script src="jquery-ui.min.js"></script>

is a 404 Not Found. For the color transitions you still need this file. However, you only need its color transitions unit. So the whole thing would be much more efficient if you used only that. Demo:

http://home.comcast.net/~jscheuer1/side/demos/jplayer/demo4/demo10.htm

The file (right click and 'Save As'):

jquery-ui-1.8.24.color.min.js (http://home.comcast.net/~jscheuer1/side/demos/jplayer/demo4/jquery-ui-1.8.24.color.min.js)

About 200K less than the full ui script.

And as we are hopefully getting closer to production, consider whether or not this needs to work in anything other than Android. If not, the on page code can be cut down a bit and probably should. Does it need to work in anything other than Android?

Let's get this working again first. But I'd like to know the answer to that question.

tonybabb
09-22-2013, 12:16 PM
Aaah, that was it. The file was in my local copy of the demo8 site but I had failed to upload it. Sorry. It now works correctly on my laptop. I then replaced jquery-ui.min.js with jquery-ui.1.8.24.color.min.js and it again worked on my laptop http://www.lawenforcementspanish.com/demo8.

So next I uploaded to the Intel XDK which provides an emulation feature. When I ran the emulator there was no sound...argh. But I built the app anyway and downloaded to my Droid phone and it worked correctly as a stand-alone app on the phone.

So, next step is to integrate with my real content. I think I'll create a new version of my real content as the old version probably has some remnants from phonegap build and other stuff I've tried and lost track of over the past couple of months. To begin I'll just create a couple of pages of real content with a couple of phrases on each page and get that working.

In your code you used the class .spanish , it shouldn't break anything if I add another class to the spanish phrase divs right? The reason I need to do this is that there are two forms of Spanish - Informal and Formal and it's important to use the correct form - so I'll give the user the choice of displaying just the formal Spanish phrases or just the informal Spanish phrases or both forms and they tap on the phrase they want to hear.

To answer your question re the target devices, I'll be targeting Android and iPhone users and possible Windows phone users although these are currently a very small percentage of users. I'll report back in a day or two on my next steps and will also follow up with Intel XDK support to see why the emulator doesn't play sounds.

Thanks again.

Tony

jscheuer1
09-22-2013, 03:34 PM
OK, then. Since all of those devices are touch capable, we don't have to test for that or branch for devices that are not. And since none of them run IE 8 or less we don't need the IE 8 or less conditional styles. Demo 10 can be stripped down to:


<!DOCTYPE html>
<html>
<head>
<title>jPlayer Demo 4 w/jq-mobile</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.wrapper {
margin: 8px;
}
.trigger {
display: table-cell;
padding: 3px 5px 3px 110px;
background: transparent url(speaker3.gif) 0 center no-repeat;
height: 78px;
width: 150px;
vertical-align: middle;
text-decoration: none;
font: bold 95% verdana, helvetica, arial, sans-serif;
border-radius: 15px;
}
.spacer {
height: 5px;
}
</style>
<script src="jquery.min.js"></script>
<script src="jquery-ui-1.8.24.color.min.js"></script>
<script type="text/javascript" src="jquery.jplayer.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var highlight = 'yellow', origcolor = 'transparent';
var $s = $('.spanish').each(function(i, snd){
$(snd).jPlayer({
ready: function() {
$(snd).jPlayer("setMedia", {
mp3: snd.href,
ogg: snd.href.replace(/\.mp3$/, '.ogg')
});
var playstop = function (e) {
e && e.preventDefault();
var $this = $(this);
if(!$this.data('play')){
$this.stop(true, true).css({backgroundColor: highlight});
var $playing = $('a[data-playing="true"]');
if($playing.length){
playstop.apply($playing.get(0));
}
} else {
$this.stop(true, true).animate({backgroundColor: origcolor}, 1000);
}
$(snd).jPlayer($this.data('play')? "stop" : "play");
$this.data('play', !$this.data('play'));
$this.attr('data-playing', $this.data('play'));
};
document.getElementById(this.getAttribute('data-trigger')).addEventListener('touchstart', playstop, false);
},
ended: function(){
$('#' + this.getAttribute('data-trigger')).attr('data-playing', 'false').data('play', false).stop(true, true).animate({backgroundColor: origcolor}, 1000);
},
swfPath: "./"
});
});
});
</script>
</head>
<body>
<div class="wrapper">
<a class="spanish" data-trigger="guitar" href="p1rj1s_-_rockGuitar.mp3">Guitar</a>
<a class="trigger" id="guitar" href="#">Guitar</a>
<div class="spacer"></div>
<a class="spanish" data-trigger="cromag" href="TSP-01-Cro_magnon_man.mp3">Guitar</a>
<a class="trigger" id="cromag" href="#">Cro Magnum Man</a>
</div>
</body>
</html>



It won't work on a desktop any longer though.

To answer your question - Yes, you can add any classes that you like, example:


<div class="wrapper">
<a class="spanish" data-trigger="guitar" href="p1rj1s_-_rockGuitar.mp3">Guitar</a>
<a class="trigger formal" id="guitar" href="#">Guitar</a>
<div class="spacer"></div>
<a class="spanish" data-trigger="cromag" href="TSP-01-Cro_magnon_man.mp3">Guitar</a>
<a class="trigger informal" id="cromag" href="#">Cro Magnum Man</a>
</div>



And those can be used to filter which will be displayed. But, as you can see in the example, these classes would have to be applied to the trigger elements. That's because those are the only ones that are seen. All the spanish class elements are unseen, the jPlayer script makes them all width: 0; height: 0;. If it did not, you would see the browser's default HTML 5 player or a Flash player on the screen for each sound. That's hidden by the jPlayer script and controlled by its trigger.

tonybabb
09-23-2013, 12:35 PM
Hi John,

Thanks for the response and updated code with explanation. For now I thought I'd complete the integration using demo8 so you can see what I'm doing, I'll make the changes later when everything is working. Anyway, I created a new jQuery Mobile site with a menu page and 3 other pages and integrated the demo8 files and it worked as you can see here www.lawenforcementspanish.com/demo11 (http://www.lawenforcementspanish.com/demo11) , then select the Age, Weight & Height page. I then uploaded it to the new Intel XDK, built the mobile app and downloaded to my droid phone and it didn't work when I installed it - it looked like it loaded but failed to display the menu page. I also tried the emulator(which previously showed the page but didn't play sounds) and had the same result, just a series of grey/ white diagonal lines. I have a request for support in with the Intel XDK Forum. I'll keep you posted.

Regards,

Tony

jscheuer1
09-23-2013, 03:36 PM
The demo11 page still has the jQuery 1.0 mobile styles and script on it, that's probably creating some conflicts.

If possible, simply make the sound page a separate page and leave those off of it.

Or find a way to do what you're doing on demo11 without using any jQuery mobile files.

One thing we didn't try was using only the later jQuery mobile styles and script. That might work. It would probably mean changing your code that uses mobile 1.0 to be able to use the later version though. And it would mean reverting to the sound code that uses that later version of jQuery mobile.

The overall theme here seems to be one of trying to combine too many things on one page. In general, one should use one thing for everything you're doing. That results in less code, and less conflicts. Or, failing that, use separate pages.

Added Later:

Something that might work is moving:


<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>

to after this on page script (truncated to save space here):


<script type="text/javascript">
jQuery(function($){
var highlight = 'yellow', origcolor = 'transparent', istouch = !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || (!!window.Touch && !!window.Touch.length) || !!window.onmsgesturechange || (window.DocumentTouch & . . .

so that it's the last thing before the closing </head> tag.

That might give the sound files a chance to initialize properly. But I have a feeling that jQuery mobile will still mess them up.

tonybabb
09-24-2013, 12:26 PM
Hi John,

Thanks for the input. I did hear back from Intel regarding the sound problem where the sounds played on my PC and on my phone and not on their emulator. It turns out it was a known problem that the emulator doesn't currently support mp3 files, although it will support wav files. I'll stay with mp3 as this is not a big issue.

I haven't heard back on the recent problem of only seeing diagonal grey/ white lines on the emulator and the app in my phone. However, I did create a new version http://www.lawenforcementspanish.com/demo12 which only contains the jQuery Mobile starter template with no changes at all by me inclucing no sounds. This worked on my PC but when I uploaded this the emulator and my phone both showed the same diagonal grey/white lines so clearly it's a JQM/ Intel XDK issue and I updated my post to their tech support with this new info. Hopefully they'll get back to me soon.

I use the JQM starter template as it seemed like the way to go, several months ago I created the mobile app using Dreamweaver but without the JQM template, I had multiple html pages etc. But, my understanding is that smartphone apps should use a single index.html page, I don't know if this is mandatory but it seems to be the popular choice, I'll continue looking to see if this is an option. Hopefully I'll hear back from Intel soon, I'll keep you posted.

One more thing I'm going to try is going back to PhoneGap Build instead of Intel XDK and see if that can handle it - I have my doubts but it's worth a try. This whole area seems to be full of immature software at this point.

Thanks again,

Tony

tonybabb
09-24-2013, 01:03 PM
Hi John,

Just a further update. I tried loading demo11 (the integrated version) into Phone Gap Build then downloaded to my droid. It displayed correctly but failed to play any sound - which was the reason I gave up on it previously as PGB support said I had to use their API for sound and this was the one you saw originally that used Silverlight.

Just fyi.

Tony

tonybabb
09-24-2013, 01:04 PM
Hi John,

Just a further update. I tried loading demo11 (the integrated version) into Phone Gap Build then downloaded to my droid. It displayed correctly but failed to play any sound - which was the reason I gave up on it previously as PGB support said I had to use their API for sound and this was the one you saw originally that used Silverlight.

Just fyi.

Tony

jscheuer1
09-24-2013, 02:30 PM
If silverlight works, use it.

I was just wondering, because I remembered about having just one index file and you mentioned it again, if having an iframe would work. If so, you could use a standalone page for the sound without jQuery mobile on it and have it show through onto the main page via an iframe. That would greatly reduce the chance of a conflict with jQuery mobile, which could still be used on the index page. The sound page would of course have to be in the same folder. If that can work, it would be a good solution. Setting the proper width and height for the iframe might be tricky. But since you should know what those requirements are, it shouldn't be too hard. Something like:


<iframe src="sounds.htm" width="100%" height=500 scrolling="no"></iframe>

On the page in the iframe, set the body and/or html to overflow hidden. That in combination with the scrolling no attribute will get rid of any scrollbars on it, making it look more like part of the top page. Or you can use just overflow-x hidden to allow for a vertical scrollbar if/when needed.

This all assumes that an iframe is allowed for this sort of thing you're doing and will work. But if so, it's one of the best way to avoid script and css conflicts while still having only one page. An object tag can also be used to show one page in another. It's less reliable cross browser (older IE and Opera act weird with it), but should work on mobiles and tablets. If an object tag is used, the syntax is different.

tonybabb
09-25-2013, 12:50 PM
Hi John,

Thanks, no response from Intel XDK support yet on this problem, I've also posted a question in the jQuery Mobile forum asking if anyone else has used the Dreamweaver CS6 Sample with Intel XDK New successfully. Somehow I doubt it. Anyway I'm now trying to learn more about the JQM structure and have found some good, I think, documentation on jquerymobile.com. I'll try absorbing this and also try the Intel XDK test features some of which supposedly log everything that happens so I'll see what I can figure out.
One question on Silverlight - when we started this journey you were concerned that Silverlight may not be implemented on some phones - sorry if I'm not quoting you exactly, but to get around this we used jPlayer for maximum compatibility so I'm a bit reluctant to go back to Silverlight - which appeared when I used Phone Gap Build to convert my web app to a mobile app. From my latest test I know that PGB can correctly display the JQM menu and page structure so perhaps I should look harder at the Silverlight issue.
I'm a bit tied up the rest of Wednesday, I'll get back to you as soon as I can.
Thanks again,

Tony

jscheuer1
09-25-2013, 03:20 PM
What about the iframe option?

Also, on silverlight, it's my impression that once the app is compiled, it incorporates all of the resources. That might make each individual user not have to have silverlight, but probably not. It's a browser not a script plugin. You could require it though.

tonybabb
09-27-2013, 11:52 AM
Hi John,

I'm really new to this js stuff and apart from copying a couple of YouTube Embedded videos have never used iFrames. I don't know what the pros and cons are. However, I did receive a reply from Intel Tech Support, you can see it here https://forums.html5dev-software.intel.com/viewtopic.php?f=34&t=4459 . Basically they said there's a bunch of CSS and js I need to insert in the index.html file. I would have thought the XDK should do that automatically, and certainly I haven't seen a mention of it anywhere in their documentation. Anyway, I'll try that next (first with the very simple demo12 and if that works with demo11, I'll report back.
regarding Silverlight, I don't know if's included by PGB or if it assumes it's installed and it just happened to be installed on my droid. It won't be an issue if the Intel XDK works.

Just fyi I signed up for a 3 day conference on html5 development in San Francisco next month including a full day on jQuery Mobile, hopefully some of this will become clearer to me then.
Tony

tonybabb
09-30-2013, 01:10 PM
Hi John,

I got it working - with one minor glitch.

The advice from the Intel folks didn't make sense to me - he said I had to add additional lines etc before uploading to the Intel XDK New. This wasn't documented anywhere else in the XDK. Sooo, I ignored it and rebuilt demo12 - this was the sample JQM template from Dreamweaver CS6 with absolutely no changes. I uploaded to XDK and tried it in their emulator and it worked, so I built the mobile app and downloaded to my droid phone and that worked too. This can be seen at www.lawenforcementspanish.com/demo12 (http://www.lawenforcementspanish.com/demo12) . Basically this just navigates between the various "pages".

Next I integrated the code you gave me to play sounds with jPlayer and change the background color while playing the sound, I uploaded to the XDK and downloaded to my droid phone (the XDK can't play mp3 sounds in emulator mode) and it worked. This can be seen here www.lawenforcementspanish.com/demo14 (http://www.lawenforcementspanish.com/demo14) .

The only minor glitch is that after a sound has played the background color goes to white instead of the original grey color. This didn't happen in the previous versions I tried. I didn't knowingly change anything, I'd appreciate your advice on this.

When the color issue is fixed I'll leave demo14 on the website so others can see a working copy as this seems to be a popular topic.

Thanks again for walking me through this, I couldn't have got this far without your assistance.

Tony