Learn VBA & Macros in 1 Week!

JavaScript - Sounds

Full Excel VBA Course - Beginner to Expert

Sounds	View Content

Hi,
At a certain moment, a page gives a sound of falling coins. The way it is done at the moment, is by using the html object tag and javascript combination. The first time in one pageload, the moment the sound is heard, the page goes down a height of a <div>. The second time the special effects are heard, this does not happen. Ok, it is solved by playing a 'mute' sound at the onload. But most of the browsers ask, if the user allows to install a plug-in for the sound, and then asks again if the user really allows the installation.

1. Is there a way, to hear the sound without any plug-ins?

2. Is there a way to activate the sound so that the page does not roll down one forth of a inch at the first time the sound is heard, unless playing a 'mute' sound?

3. The current method works, but not in Opera browser. In fact non of the 'w3schools' html sound examples work in Opera, unless a small player is included and the user clicks the 'play'. How to make this, or a better solution to work in Opera?

4. The crazy part is, that the javascript needs to be in <body> section with the current solution to work. I wish a method where the javascript is placed in the <head> section.

Here is quite a few Qs, but the idea is, that there can be a solution which solves all or most of them at ones

Thanks.

Code:

<html>
<head></head>
<body>
<span id="sound_element"></span>

<script type="text/javascript">
	document.getElementById("sound_element").innerHTML="<object height='0px' width='0px' data='"+"sounds/win.mp3"+"' ></object>";
</script>

</body>
</html>

Full Excel VBA Course - Beginner to Expert

Playing Sounds With Javascript

Html5 And Javascript Sounds

Multiple Sounds On Rollover

Similar Tutorials

View Content

Hi Guys,

I'm creating what is hoped to be a fun and slightly different page for Christmas.

I am looking to have about 6 'dangling' objects, each that bounce on rollover (currently working) and that play a different note/tune. At the moment you will see in the code that I am using HTML5 to do this - whilst I am ok with this (I will create a flash fall back) I am unable to work out how to play a different sound for each rollover.

Of course if there is a more cross browser friendly solution I'm all ears...

Any help much appreciated!

Please see below code...

Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script>

// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code

//** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
//** Call: uniquevar.playclip() to play sound

var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}

function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
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")}}
}
}

//Initialize two sound clips with 1 fallback file each:

var mouseoversound=createsoundbite("whistle.ogg", "whistle.mp3")

</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<style type="text/css">
body {
background-color: #FFF;
}

div {
padding:0px;
width:116px;
height:211px;
text-align:center;
float:left;
display:block;
}

</style>
</head>

<body>

<div id="bouncy1">
<a href="#" onmouseover="mouseoversound.playclip()"><img src="creation_logo.gif" width="116" height="211" border="0" /></a></div>

<div id="bouncy2">
<a href="#" onmouseover="mouseoversound.playclip()"><img src="creation_logo.gif" width="116" height="211" border="0" /></a></div>

<SCRIPT>
$(function(){

//Add bounce effect on Click of the DIV
$('#bouncy1').mouseenter(function () {
$(this).effect("bounce", { times:3 }, 500);
});

$('#bouncy2').mouseenter(function () {
$(this).effect("bounce", { times:3 }, 300);
});

});
</SCRIPT>
</body>
</html>