Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Spread your code soluces to the world

Love me
Solucior » JAVASCRIPT » Sound effects on an action with HTML5

Sound effects on an action with HTML5

09/09/2011 by Dux   -   4.9/5 (8 ratings)

HTML5 has simplified the handling of multimedia files. The simple tag audio replaces the couple object embed with param. A single line of code is sufficient and it is controllable with javascript.
In the example below the onmouseout is used to refresh the source of the audio file.

In addition to the preload attribute, you can use in the same way loop and autoplay.

Demo.

html sound Pointer over here

source code



 
<audio id="audio" src="sound1.mp3" preload="preload"></audio>

<
span onmouseover="document.getElementById('audio').play()" onmouseout="document.getElementById('audio').src='sound1.mp3'">
Pointer over here
</span>

Tested with Safari  Google Chrome  Firefox4  
Rate this code     |     Copied : 133x

Comments for Sound effects on an action with HTML5

aymax     11/25/2011 16:50
un probléme avec action dans une forme... quoi que se soit le return "false ou true " le javascript fait le controle mais il passe ala page suivonte
presque comme sa just simplifier
<SCRIPT LANGUAGE="javascript">
function controle()
{
var test = document.loginbox.username.value;


if((test=='Username')||(test=='')||(test1.lengthw<6))
{
alert("XXXXXXXXXXXXXXX");
return false;
}
}
</SCRIPT>


c ici le prob
<form  name="loginbox" onsubmit="controle()" action="xxx.php" >


svp une solution
Toonol     10/13/2011 17:54
The audio element doesn't play MP3s in Firefox (or Opera).  OGG is probably the best selection for those browsers, but OGG doesn't work in IE or Safari.  There is no one audio codec that works in all browsers.
Add a comment Nickname
ZOOM


Sound effects on an action with HTML5
Rotate and scale with CSS
Very simple drag and drop upload form
Isolate a color
Adjust the rate of image colors
Show hide DIV content with scrolling
Dynamically add rows to a form. Complete solution
Move dynamically a DOM objet up