Binding A Sound to a click Event

Hello everyone, My name is TJ and I have little experience with HTML but absolutely none with Javascript. Right now I am experimenting with binding a sound to a click event for a fake test I am designing. I am experimenting as I am learning and this is frustrating me. Can someone tell where I am making mistake to get this sound to play. Thank you in advance. Oh here is the code I have done so far. Please ignore the notes…

<ol>
	<li>
		<button id="photoshop">Adobe Photoshop</button>
	</li>
	<br>

	<li>
		<button id="illustrator">Adobe Illustrator</button>
	</li>
	<br>	

	<li>
		<button id="indesign">Adobe InDesign</button>
	</li>
	<br>

	<li>
		<button id="muse">Adobe Muse
		
		</button>
	</li>





</ol>
<div id="message"></div>
<audio id="wronganswer" preload="auto">
	<source src="https://www.freesound.org/people/freki3333/sounds/131594/"></source>
</audio>

<script type="text/javascript">
	var boo = $("wronganswer")[0];

	$("#photoshop").click(function(){
		// code for incorrect sound
		boo.Play("wronganswer");

		// code for incorrect message
		send_message("incorrect");
	});

	$("#illustrator").click(function(){
		send_message("correct");
	});

	$("#indesign").click(function(){
		send_message("incorrect");
	});

	$("#muse").click(function(){
		send_message("incorrect");
	});


	// we create this function because we don't want to repeat the same code
	// DRY principle - Don't Repeat Yourself
	function send_message(message) {
		// put here the message code
		$("#message").html(message);
	}

	function wrong_reply_sound(boo) {
		// TODO: put the code here
		
}
</script>

You didn’t include any JavaScript or sound files :frowning:

They are now :slight_smile:

maybe I should have added the entire code sorry

<!DOCTYPE html>
<html>
<head>
	<title>Mock Test</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/buzz/1.1.10/buzz.min.js">
<script   src="https://code.jquery.com/jquery-2.2.3.js"   integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4="   crossorigin="anonymous">
</script>

</head>
<body>
<h1>Question #1</h1>
<p>If a client wanted to design a logo using a vector based medium, what program would be the best choice?</p>
<ol>
	<li>
		<button id="photoshop">Adobe Photoshop</button>
	</li>
	<br>

	<li>
		<button id="illustrator">Adobe Illustrator</button>
	</li>
	<br>	

	<li>
		<button id="indesign">Adobe InDesign</button>
	</li>
	<br>

	<li>
		<button id="muse">Adobe Muse
		
		</button>
	</li>





</ol>
<div id="message"></div>
<audio id="wronganswer" preload="auto">
	<source src="https://www.freesound.org/people/freki3333/sounds/131594/"></source>
</audio>

<script type="text/javascript">
	var boo = $("wronganswer")[0];

	$("#photoshop").click(function(){
		// code for incorrect sound
		boo.Play("wronganswer");

		// code for incorrect message
		send_message("incorrect");
	});

	$("#illustrator").click(function(){
		send_message("correct");
	});

	$("#indesign").click(function(){
		send_message("incorrect");
	});

	$("#muse").click(function(){
		send_message("incorrect");
	});


	// we create this function because we don't want to repeat the same code
	// DRY principle - Don't Repeat Yourself
	function send_message(message) {
		// put here the message code
		$("#message").html(message);
	}

	function wrong_reply_sound(boo) {
		// TODO: put the code here
		
}
</script>

	










</body>
</html>

I updated your post to use the ``` to indicate a code block.

Hi @tallen261, there are a couple if issues…

  • The source of the audio element must point to the URI of an actual sound file, not to a page where you can download it.
  • You forgot to precede the ID of the audio element with a #, like
var boo = $("#wronganswer")[0];
  • The play() method is written lower case and (AFAIK) doesn’t expect any arguments.

BTW, you could also just use the JS audio interface, like

var boo = new Audio('source/to.mp3');
boo.play();

which is maybe a bit cleaner, since you’re only accessing it with JS anyway.

You should fix the invalid HTML if you want JavaScript to work properly with the page.

thank you for the advice…I am trying now but I am stll messing it up somewhere

I wanted to thank you because I finally got it to work. You have no idea of how much of a moral victory this was for me even though for some of you guys this is a minor task. Once again thank you for taking the time out to help

4 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.