Use onwheel event to activate sounds and hyperlinks

jasonxweb · February 25, 2020

Hello Everyone,

On my web page, I want the user to roll their mouse wheels to play sounds and activate hyperlinks. I've been able to implement the first goal to some extent, but am facing problems. You can see my code in action at https://naturefarm3000.blogspot.com , and the code itself below.

Problem 1 : When you visit the above page, you'll see that if the first action you take is to roll your mouse wheel while hovering over the yellow boxes, nothing will happen. But, if you click your mouse anywhere on the page once, and let the sound effect finish playing, then afterwards, you can roll your mouse wheel while hovering on the yellow boxes, and the sound will play. To observe this again, refresh the above page.

I'm not sure what's happening here - it's as if an initial mouse click anywhere on the page somehow activates subsequent onwheel events. I have the same problem when I run the code locally on my computer ( where the entire page is just my own code, as shown here, without anything added by the Blogger platform ), using Google Chrome Version 80.0.3987.122 (Official Build) (64-bit).

I want to make the page so people can use the mouse wheel roll to activate sound effects immediately after they reach the page ( without having do a click to activate the onwheel event ) - including when accessed locally from my computer - is there a way I can make that happen?

Problem 2 : I have a green box on the lower left that has a hyperlink. I want to make it so it activates with a mouse wheel roll ( onwheel event ), instead of a mouse click. Is there a way to do this?

Problem 3 : I have a beige button on the lower right that I also want the user to activate with a mouse roll instead of a click - can this be done? Also, I've used the same sound playing code I used for the yellow buttons, but it appears it does not work with this button - what is causing this to happen? Is there a way to make a button activate a hyperlink as well ( also with a mouse wheel roll )?

Thank you for your expertise.

Jason


<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Nature Farm</title>

<style>
	
body {background-color: hsla(0, 0%, 50%, 1);}
body {overflow:hidden;}

.box001
{
  	background-color:black;
  	padding: 1px;
  	margin: 1px;
	width: 100%;
	overflow: none;

	display: block;
	text-align: center; 
	cursor:default;
} 

.box002
{
  	padding: 1px;
  	margin: 1px 0px 1px 0px;
  	font-size: 20px;
  	font-weight: normal;
  	font-family: sans-serif;
  	text-align: center;
  	display: inline-block;
  	vertical-align:top;
	width: 32.5%;
	cursor:default;
}

.button001
{
  	border: 5 px;
  	background: yellow;
  	padding: 5px;
	margin: 1px 0px 1px 0px;
	font-weight: lighter;
  	font-size: 18px;
  	font-family: sans-serif;


  	width: 95%;
  	display: inline-block;
	cursor:default;
}

</style>
</head>
<body>

	
	

	
<div class="box001">

		<div class="button001" onclick="function_horse()" onwheel="function_horse()"> 
			<img src="https://static.wixstatic.com/media/ad4933_d938f962d79048438e80e1853df10ae2~mv2.jpg" height="100">
			Gently stroke the horse to hear its sound (Roll mouse wheel inside the yellow box)
			<script> function function_horse(){ var audio = document.getElementById("function_horse"); audio.play();} </script>
			<audio id="function_horse" preload="auto" src="https://static.wixstatic.com/mp3/ad4933_99e62afd25c34b3793d45baf2c88299c.mp3" ></audio>
		</div>

		<div class="button001" onclick="function_pig()" onwheel="function_pig()"> 
			<img src="https://static.wixstatic.com/media/ad4933_b399e37a4d984c9487adb7900a103ed9~mv2.jpg" height="100">
			Gently stroke the pig to hear its sound (Roll mouse wheel inside the box)
			<script> function function_pig(){ var audio = document.getElementById("function_pig"); audio.play();} </script>
			<audio id="function_pig" preload="auto" src="https://static.wixstatic.com/mp3/ad4933_490fee3f3f4545d09c204398c91fcdec.mp3".mp3" ></audio>
		</div>

		<div class="button001" onclick="function_cow()" onwheel="function_cow()"> 
			<img src="https://static.wixstatic.com/media/ad4933_4812a3c15c60471eaa9b21f3be9a3c14~mv2.jpg" height="100">																						   
			Gently stroke the cow to hear its sound (Roll mouse wheel inside the box)
			<script> function function_cow(){ var audio = document.getElementById("function_cow"); audio.play();} </script>
			<audio id="function_cow" preload="auto" src="https://static.wixstatic.com/mp3/ad4933_63f2db4cd11741c5ad1c2a83adb8b489.mp3" ></audio>
		</div>
																																	  
</div>
																																	  
<div class="box001">

	<div class="box002" style="background:#9EFFA8"> <a href="https://en.wikipedia.org/wiki/Mammal"> Stroke the grass (roll mouse wheel here) to read more about mammals </a>
	</div>

	
	<div class="box002" style="background:white">
	<button onclick="myFunction()" onwheel="myFunction()" style="background:antiquewhite" style="font-size: 18px;">Stroke the hay (roll mouse wheel here) to read more about farms</button>
	<script> function myFunction() {} { var audio = document.getElementById("myFunction"); audio.play();} 	</script>
	<audio id="myFunction" preload="auto" src="https://static.wixstatic.com/mp3/ad4933_c82087483a3c430cb9d242d2708a62f1.mp3" ></audio>
	</div>	
	
</div>	
																																		  

</body>

</html>

Edited February 25, 2020 by jasonxweb
I should have put this in the JavaScript, is there a way to move it?

Funce · March 4, 2020

Hi there,

I'm getting instant response with the sounds, so I'm not sure what's going on there. I'm also using Chrome.

I'd recommend using both click and scroll to access the hyperlink. You could use the code below for this. (Untested)

<a href="https://en.wikipedia.org/wiki/Mammal" onscroll="this.click()">

You can assign scroll events to any element, so the difference between an <a> tag and a <button> is not large in this case. You've got an extra set of bracers in myFunction which may be causing errors.

I've also moved your thread to the JavaScript section, as requested.

Sign In

Use onwheel event to activate sounds and hyperlinks

Recommended Posts

jasonxweb

Link to comment

Share on other sites

Funce

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity