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.

Look over here http://stackoverflow.com/questions/6830445/extending-jquery — Bart, Mar 16 '13 at 14:19

Michael Meier · Answer 1 · 2013-03-16T20:34:47.430

3

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/

edited Mar 16 '13 at 20:34

answered Mar 16 '13 at 14:23

Michael Meier

650
2
9
20

MeierI put this code in jq_click.js and positioned it like this: – RoyS Mar 16 '13 at 18:07
this doesn't work, I put the code within $(document).ready(function() { } and positioned it in the head section under the script loading jquery. Sorry for the double post, I'm unfamiliar with Stack Overflow forums – RoyS Mar 16 '13 at 18:23

Moving javascript audio into jquery

1 Answers1