Are you enjoying the extensions? Did you like the support? Help others decide.

Leave a review

file audio on-click event not working

More
11 years 1 month ago #1964 by mamboze
audio on-click event not working was created by mamboze
Hi all,
As part of an English education site, I'm trying to get an on-click event to play an audio file. I've got it to work in a static webpage, but I've not been able to get it to run in joomla 2.5.
I've installed jquery easy just to make things easier for myself :)
this is the relevant html
... 
 <div>
      <p id="one"> this is the first paragraph</p>
....  
      <p id="four"> this is the fourth paragraph</p>    
    </div>
and this the jquery code
jQuery.noConflict();
jQuery(document).ready(function() {   
  jQuery("p").click(function (event) {
    var element = jQuery(this);
    var elementID = event.target.id;
    var oggVar = (elementID +".ogg"); 
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', oggVar); 
    audioElement.load();
    audioElement.addEventListener("load", function() { 
    audioElement.play(); 
    }, true);
    audioElement.play(); 
  });
});
The audio files, one.ogg, two.ogg etc, are located in the joomla audio folder and the jquery code in the template js folder.
I've enabled jquery in the jquery easy config page in joomla. I'm lost as to why the static website works but the joomla setup doesn't.
Any help would be much appreciated.

Please Log in or Create an account to join the conversation.

More
11 years 1 month ago #1965 by admin
Replied by admin on topic Re: audio on-click event not working
Hello,
I am almost certain that it has to do with the location of your audio files. Nothing in this code tells where to find them. For the sake of testing, I would suggest you leave the audio files with your script file.
Olivier.

Please Log in or Create an account to join the conversation.

More
11 years 1 month ago #1966 by mamboze
Replied by mamboze on topic Re: audio on-click event not working
Thank you for your help.
I've placed the audio files, one.ogg thru four.ogg in the template js folder but the click code is still not working. I also placed a copy of jsquery.js in the js folder but this did not help either (is this necessary given that jquery is enabled in jquery easy?).
Here is the actual html code generated by joomla
<p id="one" style="text-align: left; font-size: 10pt;">this is paragraph one</p>
<p id="two" style="text-align: left; font-size: 10pt;">this is paragraph one</p> ....

Please Log in or Create an account to join the conversation.

More
11 years 1 month ago #1969 by admin
Replied by admin on topic Re: audio on-click event not working
The forum is moderated so the posts won't show until they are 'filtered' for spam (see the 'rules' tab for more explanations).

It is rather difficult to help you without actually seeing the whole source code and trying it out. Do you have a URL I can check out?

The jQuery Easy plugin loads jQuery so you should not have to do it manually.
I am not really familiar with loading audio files through jQuery.
Where is your code actually located? Did you include it into your template manually or through a module, or a plugin?
Olivier.
The following user(s) said Thank You: mamboze

Please Log in or Create an account to join the conversation.

More
11 years 1 month ago #1970 by mamboze
Replied by mamboze on topic Re: audio on-click event not working
Hi Olivier,
Yes I do have a URL www.english2theworld.com
The jquery file is slightly different to the one I posted yesterday, as it includes, additionally, some hover functionality, nothing complex tho that's for sure :). Here it is
jQuery.noConflict();

jQuery(document).ready(function() {
  jQuery("p").hover(
    function() {
    jQuery(this).css({"color": "red", "font-weight" : ""});
    },
    function() {
    jQuery(this).css({"color": "black", "font-weight" : ""});
    }
  ); 
  jQuery("p").click(function (event) {
    var element = jQuery(this);
    var elementID = event.target.id;
    var oggVar = (elementID +".ogg");
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', oggVar); 
    audioElement.load();
    audioElement.addEventListener("load", function() { 
    audioElement.play(); 
    }, true);
    audioElement.play(); 
  });
});
The 4 sample audio files have been placed at /audio, and in the js and javascript folders in the beez_2 template area.

Please Log in or Create an account to join the conversation.

More
11 years 1 month ago #1972 by mamboze
Replied by mamboze on topic Re: audio on-click event not working
I forgot to mention that I included the jquery code into joomla manually.

I think audio is a pretty underdeveloped aspect of web site technology. From what I can gather from the internet, Html5 audio is still maturing, let's hope it grows up quickly :)

Please Log in or Create an account to join the conversation.