Auto-Nav with Sound

Permalink
I'm new to Concrete5 (and jQuery) and trying to connect sounds to the Auto-Nav-Buttons.
The code


<audio autoplay="autoplay" id="mySoundClip">
<source src="ton0.mp3"></source>
<source src="ton0.ogg"></source>
</audio>


works fine, the sound is played on pageload if you i.e. insert it in a HTML-block (because of 'autoplay').

But i cant get the play-sound-on-mouseover-javascript to work. It looks like this:


var audio = $("#mySoundClip");
$("ul.nav a").mouseenter(function() {
audio.play();
});


I saved the javascript as a file named 'klang.js' in the 'js'-folder and added the following code in header.php:


<?php
$html = Loader::helper('html');
$this->addHeaderItem($html->javascript('klang.js'));
?>


My guess is this doesnt work because on the final page the <audio>-code is after the javascript. I tried to set the HeaderItem-Code on bottom of header.php but this didn't work also.
Is it possible to add HTML-code as a file like the javascript as headerItem so the <audio>-HTML can be adressed before the javascript? Or: How can you insert javascript on bottom of the page?

 
JohntheFish replied on at Permalink Reply
JohntheFish
You should be able to check your hypothesis about load sequence and script errors using the developer console (Chrome, Safari) or Firebug (Firefox).

Some ideas to try:

- Put a $(document).ready handler about your script.

- Use addFooterItem to include the code in the footer rather than the header.
conker39 replied on at Permalink Reply
Good ideas!
I added the addFooterItem-code at the bottom of the footer.php-page and changed the jQuery but it didn't work.
I can't make out the problem, as it should work this way, shouldn't it?
I never used firebug. Where can i check there the way html and javascript is processed?
JohntheFish replied on at Permalink Reply
JohntheFish
If you have Chrome, there are links about the developer console in the last section of this howto:

http://www.concrete5.org/documentation/how-tos/editors/getting-help...

You can insert into your script console.log(any_object) to dump a trace of anything you want to the console (same for firefox)

Any browser and script errors also get dumped to the console; I find that and a bit of expertise is usually enough to get to the bottom of things.
JohntheFish replied on at Permalink Reply
JohntheFish
Another thought. The html5 play method works on html5 dom audio element objects. But you are trying to apply it to a jQuery object and the methods may not map across.

To get the dom element object from the jQuery object, you may need to do something like:
$(audio).first().play();


or

$(audio).get(0).play();
conker39 replied on at Permalink Reply
Yeah! That worked! Thanks a lot!

The '$(audio).get(0).play();' made it happen...

By the way: After trying 'audio:play()' again to check back I got the strange (new) message in the Firebug Console 'audio:play() is not a function'.


And in footer.php the javascript should be positioned direct at the beginning, like this:


<?php defined('C5_EXECUTE') or die("Access Denied."); ?>

<?php
$html = Loader::helper('html');
$this->addFooterItem($html->javascript('klang.js'));
?>
JohntheFish replied on at Permalink Reply
JohntheFish
The firebug error message confirms that the play method (ie function) does not exist on the jquery object, just on the dom object within it that get(0) returns.

You addFooterItem call has to be made before Concrete5 renders the footer, so as you have correctly identified, at the start of the footer will work. You could call it at any point in the page up to there.

Best practice in most situations is to call it from the on_page_view() event from the block controller.

One more thought. You should check this in all browsers before going live. Internet explorer especially may give problems. You may want to put the play() code inside an exception handler or make a test before calling so it doesn't break JavaScript if it meets an incompatible browser.