PDA

View Full Version : OnMouseover Play Sound



xpsal
01-23-2011, 09:43 AM
Please help, I have a page with 3 images. I want my visitors to hear an mp3 audio once they hover their mouse on each image.
image1 = audio1.mp3
image2 = audio2.mp3
image3 = audio3.mp3

But here are the challenges.
1- I want the audio files to play on the same page where the images are, without opening a new page.
2- I don't want the users to be asked to accept any kind of plugins (such as Windows Media Player). Which means everything needed to run the script should already exist on that page.
3- I want it to be played on the 3 major browsers (IE, Firefox, Chrome)

Is this possible? I'm not good at Javascript, but I will understand to do my best to understand your instructions.

I spent a long time looking online, but most of what I found is only compatible in one browser or the other. Any help would be appreciated.

sunfighter
01-23-2011, 01:39 PM
The new HTML5 has an audio tag. It works in Firefox, Chrome, Opera, Safari, and IE9 beta.
At present Firefox and Opera do not support mp3, but you can convert mp3 to Ogg Vorbis which both do support. And the mark up to get all browsers to play is easy. But we are talking about the newest versions of these browsers only.

You could also embed a Flash player and use that.

xpsal
01-23-2011, 03:42 PM
Thanks for the reply, I don't mind converting the mp3 into Ogg vorbis, that's the easy part. The hard part is I need the code for the script. Even after knowing the steps on how to proceed I still need the code. Any help?


The new HTML5 has an audio tag. It works in Firefox, Chrome, Opera, Safari, and IE9 beta.
At present Firefox and Opera do not support mp3, but you can convert mp3 to Ogg Vorbis which both do support. And the mark up to get all browsers to play is easy. But we are talking about the newest versions of these browsers only.

You could also embed a Flash player and use that.

TinyScript
01-23-2011, 05:55 PM
here's a script



var sounds = {};
var canPlayWav = false;

function loadSpecificSound(key, wav, mp3) {
if(canPlayWav) {
sounds[key] = new Audio(wav);
} else {
sounds[key] = new Audio(mp3);
}
sounds[key].autoplay = false;
sounds[key].autobuffer = true;
sounds[key].loop = false;
}

function loadSound() {
canPlayWav = new Audio().canPlayType("audio/wav");
loadSpecificSound("boom", "Explosion.wav", "Explosion.mp3");
loadSpecificSound("shot", "Shot.wav", "Shot.mp3");

}

function playSound(name) {
try {
if(sounds[name]) {
sounds[name].pause();
sounds[name].currentTime = 0;
sounds[name].play();
}
} catch(e) {
setTimeout(function() {
try {
if(sounds[name]) {
sounds[name].pause();
sounds[name].currentTime = 0;
sounds[name].play();
}
} catch(e) {
// D:
}
}, 1)
}
}
</script>
</head><body>

<script>
window.onload=function(){
loadSound();
document.onclick=function(){playSound("shot");}

}

</script>
</body></html>

xpsal
01-23-2011, 07:18 PM
Hi, thanks for the script, is the script missing anything? because it ends with </body></html> but it starts with var sounds = {};


here's a script



var sounds = {};
var canPlayWav = false;

function loadSpecificSound(key, wav, mp3) {
if(canPlayWav) {
sounds[key] = new Audio(wav);
} else {
sounds[key] = new Audio(mp3);
}
sounds[key].autoplay = false;
sounds[key].autobuffer = true;
sounds[key].loop = false;
}

function loadSound() {
canPlayWav = new Audio().canPlayType("audio/wav");
loadSpecificSound("boom", "Explosion.wav", "Explosion.mp3");
loadSpecificSound("shot", "Shot.wav", "Shot.mp3");

}

function playSound(name) {
try {
if(sounds[name]) {
sounds[name].pause();
sounds[name].currentTime = 0;
sounds[name].play();
}
} catch(e) {
setTimeout(function() {
try {
if(sounds[name]) {
sounds[name].pause();
sounds[name].currentTime = 0;
sounds[name].play();
}
} catch(e) {
// D:
}
}, 1)
}
}
</script>
</head><body>

<script>
window.onload=function(){
loadSound();
document.onclick=function(){playSound("shot");}

}

</script>
</body></html>