Audio files in standalone webpages OK, Joomla ???

[mamboze]

Hi,
On a standalone webpage, I've set up audio links such that when a speaker icon, at the beginning of a sentence, in English or Thai, is clicked an audio file (mp3, ogg) in the appropriate language runs. The html, css and javascript files work well in this environment. The context is an English-Thai language teaching site.

While the single webpage works OK, getting it to run in Joomla has been much more problematic (for me, at least).

What I had in mind was to put links to English and Thai audio files where necessary in a text file (article) and have this access (onclick) the javascript file to produce the spoken equivalent of the text file. I hope this is understandable!!

As I've said, all this works at the level of a single webpage, my problem is that I don't know how to insert this stuff into Joomla. I've looked around online but I've not turned up anything useful.

Any help, pointers or suggestions would be most welcome.

[jonasfh]

Hi,
you can add html and javascript to articles, just as you would on a static html page. However, by default joomla 2.5 filters content in the articles, to prevent injection of bad code. You can disable this, f.ex. for superusers, by logging in in /administration and go to Site -> Global configuration. Here click on the Text filters - tab. Set the Filter type for Super users to No filtering.

Now you should be able to copy/paste javascript-code into normal content-articles. When editing an article, click the [Toggle editor] - button over the editor, to display the raw html-script produced by your text-editor.

Be ware, however: If you have installed a different text-editor than the default (like JCE or something), then the editor might also filter your input, so you have to disable input filtering here as well...

regards Jonas

[mamboze]

@jonasth, thanks for your help.

I managed to get the audio files to run after clicking an icon link, as they did in the static webpage.

But they only run if article they are in is featured and appears on the home page. If it is not featured, no audio.

I thought that the audio file paths might be the issue so I made them absolute like: ./././audio/****.mp3 (or ****.ogg), but to no avail.

When the page with the non-functioning audio was run with firebug on, firebug returned this message:

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
[Break On This Error]
html5audio.currentTime=0 click_...e2tw.js (line 27)

Here is the javascript code

Code: Select all

      var html5_audiotypes={ 
        //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
        "mp3": "audio/mpeg",
        "mp4": "audio/mp4",
        "ogg": "audio/ogg",
        "wav": "audio/wav"
      };      
      function createsoundbite(sound){
        var html5audio=document.createElement('audio')
        if (html5audio.canPlayType){ //check support for HTML5 audio
          for (var i=0; i<arguments.length; i++){
            var sourceEl=document.createElement('source')
            sourceEl.setAttribute('src', arguments[i])
            if (arguments[i].match(/\.(\w+)$/i))
              sourceEl.setAttribute('type', html5_audiotypes[RegExp.$1])
            html5audio.appendChild(sourceEl)
          }
          html5audio.load()
          html5audio.playclip=function(){
            html5audio.pause()
            html5audio.currentTime=0
            html5audio.play()
          }
          return html5audio
        }
        else{
          return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
        }
      }     
      //Initialize sound clips with 1 fallback file each:
    var cn402=createsoundbite("audio/cn402.ogg", "audio/cn402.mp3");      
    var ry402=createsoundbite("audio/ry402.ogg", "audio/ry402.mp3");     
    var com402=createsoundbite("audio/com402.ogg", "audio/com402.mp3");      
    var cn403=createsoundbite("audio/cn403.ogg", "audio/cn403.mp3"); 
........................     

This is really puzzling (for me at least). As I say the javascript works OK for a static webpage and for joomla 2.5 when the article is featured but not otherwise.

edit: I should have mentioned that the javascript code is a slightly modified version of the javascript based - HTML5 Mouseover/ Click sound effect
http://www.javascriptkit.com/script/scr ... link.shtml

[mamboze]

OK, I worked it out. It was simple enough. Changing the audio file path to ../audio/****.ogg etc did the trick.

edit: /audio/****.ogg is better