Moving javascript audio into jquery

Question

This is my first post to the forum. I am setting up an English/Thai language course website which will contain many audio files of English and Thai speech. I did a single webpage proof of concept using a mouseover/button javascript function http://www.javascriptkit.com/script/script2/soundlink.shtml With some mods and some inline js, this worked OK.

$(document).ready(function() { 
  var html5_audiotypes = { 
  "mp3": "audio/mpeg",
  "ogg": "audio/ogg",
     };      
function createsoundbite(sound) {
  "use strict";
  var html5audio = document.createElement('audio');
  if (html5audio.canPlayType){
   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")}};
    }
  }   
  var cn402=createsoundbite("audio/cn402.ogg", "audio/cn402.mp3");   
  var ry402=createsoundbite("audio/ry402.ogg", "audio/ry402.mp3");     
  var cn403=createsoundbite("audio/cn403.ogg", "audio/cn403.mp3");      
  var ry403=createsoundbite("audio/ry403.ogg", "audio/ry403.mp3");      
  var cn404=createsoundbite("audio/cn404.ogg", "audio/cn404.mp3");      
  var ry404=createsoundbite("audio/ry404.ogg", "audio/ry404.mp3");     
});

The javascript code is called by a line of html code like this:

    <a href="#current" class= "rollover" onclick="ry402.playclip()"></a>Please don't swim by yourself</span>

I want to incorporate this function and its associated variables into jquery. so that all js code is removed from the html. The first step, just getting the jquery code to work has proved a bit problematic for me. I've tried just including the js audio code in a document ready function. as shown above but this doesn't work. Any help would be much appreciated.

Answer 1

I'm not sure if I get you right, but you can remove the javascript code from the given link very easily:

$('.rollover').click(function(){

ry402.playclip();

});

Let's have a look at: http://api.jquery.com/click/