Page 5 of 6 FirstFirst ... 3456 LastLast
Results 41 to 50 of 56

Thread: Changing background color AND playing a sound file on click

  1. #41
    Join Date
    Aug 2010
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    OK, here's a demo that attempts to use the touchstart event directly instead of jQuery mobile's tap:

    http://home.comcast.net/~jscheuer1/s...emo4/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/s...emo4/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

  2. #42
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,132
    Thanks
    44
    Thanked 3,229 Times in 3,190 Posts
    Blog Entries
    12

    Default

    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/s...emo4/demo9.htm
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #43
    Join Date
    Aug 2010
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #44
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,132
    Thanks
    44
    Thanked 3,229 Times in 3,190 Posts
    Blog Entries
    12

    Default

    Code:
    <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/s...mo4/demo10.htm

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

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #45
    Join Date
    Aug 2010
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #46
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,132
    Thanks
    44
    Thanked 3,229 Times in 3,190 Posts
    Blog Entries
    12

    Default

    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:

    HTML Code:
    <!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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #47
    Join Date
    Aug 2010
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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 , 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

  8. #48
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,132
    Thanks
    44
    Thanked 3,229 Times in 3,190 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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):

    Code:
    <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.
    Last edited by jscheuer1; 09-23-2013 at 04:58 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #49
    Join Date
    Aug 2010
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #50
    Join Date
    Aug 2010
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Similar Threads

  1. Problem playing sound file in Opera !
    By spazzer in forum HTML
    Replies: 1
    Last Post: 03-11-2010, 02:51 AM
  2. Button sound for Rollover background-color buttonuttons
    By egghead2000 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-03-2010, 11:14 PM
  3. Changing Text and Background Color
    By Steve Wilbanks in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-16-2010, 01:10 PM
  4. tab menu item color not changing on click
    By ashok_kuncha in forum CSS
    Replies: 0
    Last Post: 08-14-2007, 10:41 AM
  5. Swith Content: Changing background-color
    By abbeyvet in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 05-08-2007, 03:42 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •