OK, hmm, looks like the code you posted was OK I think. I still need to know the jQuery version. But as long as it is 1.7 or later and I've made no errors, this should take care of things (replace the code you posted with this):
Code:
jQuery(function($){
var highlight = 'yellow', origcolor = 'transparent', curSnd = null,
istouch = !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || (!!window.Touch && !!window.Touch.length) || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch);
function playstop(e){
e.preventDefault();
var $this = $(this);
if(curSnd && curSnd.sound){
if(this === curSnd.tag){
curSnd.sound.stop();
return;
}
curSnd.sound.stop();
}
$this.stop(true, true).css({backgroundColor: highlight});
var filename = this.href.substring(this.href.lastIndexOf('/')), myMedia = new Media(
this.href,
function() {
myMedia && myMedia.release();
curSnd = myMedia = null;
$this.stop(true, true).animate({backgroundColor: origcolor}, 500);
},
function(e) {
myMedia && myMedia.release();
curSnd = myMedia = null;
$this.stop(true, true).animate({backgroundColor: origcolor}, 500);
window.console && console.log ("Audio play error - " + filename + "\ncode: " + e.code + "\nmessage: " + e.message);
}
);
curSnd = {tag: this, sound: myMedia};
curSnd.sound.play();
} // End playstop
$('body').on('click', '.spanish', function(e){e.preventDefault();});
if(istouch){
document.body.addEventListener('touchstart', function(e){
var $snd = $(e.target);
if(!$snd.hasClass('spanish')){return;}
$snd.data({tstart: new Date().getTime(), tx: e.pageX, ty: e.pageY});
}, false);
document.body.addEventListener('touchend', function(e){
var $snd = $(e.target);
if(!$snd.hasClass('spanish')){return;}
var ds = $snd.data('tstart');
if(!ds){return;}
var vx = Math.abs(e.pageX - $snd.data('tx')), vy = Math.abs(e.pageY - $snd.data('ty'));
if(vx < 20 && vy < 20 && new Date().getTime() - ds < 400){
playstop.apply($snd.get(0), [e]);
$snd.data({tstart: null, tx: null, ty: null});
}
}, false);
}
});
Let's see what happens.
I've been looking at this a bit more and reading up on the jQuery .on() function. This should also work and might be a little easier to follow:
Code:
jQuery(function($){
var highlight = 'yellow', origcolor = 'transparent', curSnd = null;
function playstop(e){
e.preventDefault();
var $this = $(this);
if(curSnd && curSnd.sound){
if(this === curSnd.tag){
curSnd.sound.stop();
return;
}
curSnd.sound.stop();
}
$this.stop(true, true).css({backgroundColor: highlight});
var filename = this.href.substring(this.href.lastIndexOf('/')), myMedia = new Media(
this.href,
function() {
myMedia && myMedia.release();
curSnd = myMedia = null;
$this.stop(true, true).animate({backgroundColor: origcolor}, 500);
},
function(e) {
myMedia && myMedia.release();
curSnd = myMedia = null;
$this.stop(true, true).animate({backgroundColor: origcolor}, 500);
window.console && console.log ("Audio play error - " + filename + "\ncode: " + e.code + "\nmessage: " + e.message);
}
);
curSnd = {tag: this, sound: myMedia};
curSnd.sound.play();
} // End playstop
$('body').on('click touchstart touchend', '.spanish', function(e){
if(e.type === 'click'){
e.preventDefault();
} else if (e.type === 'touchstart'){
$(this).data({tstart: new Date().getTime(), tx: e.pageX, ty: e.pageY});
} else {
var $snd = $(this), ds = $snd.data('tstart'), vx, vy;
if(!ds){return;}
vx = Math.abs(e.pageX - $snd.data('tx')); vy = Math.abs(e.pageY - $snd.data('ty'));
if(vx < 20 && vy < 20 && new Date().getTime() - ds < 400){
playstop.apply(this, [e]);
$snd.data({tstart: null, tx: null, ty: null});
}
}
});
});
Bookmarks