Changing background color AND playing a sound file on click

[tonybabb]

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
Thanks for any assistance you can provide.
Tony

[jscheuer1]

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 and jPlayer, which will use that tag and also provide a Flash fallback for unsupportive browsers.

[tonybabb]

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 and jPlayer, 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:
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]

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, 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 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-...io-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]

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/s...layer/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/s...ayer/demo2.htm

[tonybabb]

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]

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]

Hi John,
I created a version of your demo2 and it worked online here 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]

<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.min.js

and:

http://ajax.googleapis.com/ajax/libs...uery-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]

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