Dear Webdesigner-Community,

 

I am still a beginner but I want to learn.

I have been trying to create a website using microsoft expression web 4.

Short time ago I did not know what was HTML or CSS but now slowly slowly I am learning.

There are just many things which are interesting but at the same time they make you mad!

I am trying to add some behavior to a picture of an html site.

I would like that with the mouseover a song will be played but that it also stops with mouseout.

Now, adding the behaviour to a pic to play a song using expression web
is super easy. Even without knowing anything about Java scripts or html
language. It is just a click on "add behaviour"

it works but:

1) the song does not stop when you move the mouse out

2) the song stars again when you move it again over- that means that if
you move the mouse 100 times over, in the background you will hear 100
times the song playing!


I am trying to find out how to write an easy java script that help me solve this problem, but I am really struggeling.

I foud some scripts in internet, which I pasted in my expression web,
but either there were problems with the script or I even did not know
how to embed the song, because often these smart guys who post the
script take it for granted that even a beginner knows how to replace the
"...mp3" with the right one. I do not even know how to tell Java the
path of the song.


What I would need is an easy script which works


I really want to learn and am not lazy just looking for a quick answer
but I have been trying to solve this probelm for 5 hours but invain!

I would really appreciate it, if somebody could be so kind as to help me.

Thanks

Well,

I thought it's time to deal with Javascript programming language.

It is really interesting. Of course it takes time but knowing how such things work is much better than using softwares which which write for you the html-css-javasript codes in the background.

 

Eventually I think I will learn how to use the binary language in order to talk with the CPU directly in its mother tongue

Edited December 13, 201312 yr by mattusch

<!DOCTYPE html>
<html>
<head>
    <title>Audio Hover</title>
</head>
<body>
	<div id="hoverElement" style="width:200px; height:200px; background:blue;">
		Hover over me
	</div>
	<audio id=audio style="visibility:hidden;">
	   <source src="youraudiofile.mp3" type='audio/mpeg; codecs="mp3"'>
	   <source src="youraudiofile.oga" type='audio/ogg; codecs="vorbis"'> <!--In case mp3 is not supported-->
	</audio>
	<script>
	var hoverArea = document.getElementById('hoverElement');
	var audio = document.getElementById('audio');
	hoverArea.onmouseover= function(){
		audio.play();
	}
	hoverArea.onmouseout= function(){
		audio.pause();
	}    
    </script>
</body>    
</html>

Here you go. As you can see it's very easy to target the play() and pause() methods of the HTML audio element with js. Just change the src attribute of the audio tag to your own sound files

 

<!DOCTYPE html>
<html>
<head>
    <title>Audio Hover</title>
</head>
<body>
	<div id="hoverElement" style="width:200px; height:200px; background:blue;">
		Hover over me
	</div>
	<audio id=audio style="visibility:hidden;">
	   <source src="youraudiofile.mp3" type='audio/mpeg; codecs="mp3"'>
	   <source src="youraudiofile.oga" type='audio/ogg; codecs="vorbis"'> <!--In case mp3 is not supported-->
	</audio>
	<script>
	var hoverArea = document.getElementById('hoverElement');
	var audio = document.getElementById('audio');
	hoverArea.onmouseover= function(){
		audio.play();
	}
	hoverArea.onmouseout= function(){
		audio.pause();
	}    
    </script>
</body>    
</html>

Here you go. As you can see it's very easy to target the play() and pause() methods of the HTML audio element with js. Just change the src attribute of the audio tag to your own sound files

 

Many thanks.

But as I said, I have been dealing with Javascript and finally I found the solution myself. It was hard, because I did not know the first about Javascript but now slowly slowy is getting better.