Adding Wee sound to the image in index.html :-)

src/main/resources/static/main.js

@@ -7,6 +7,23 @@ function showDiv(select){
     }
 }
 
+function play() {
+           var audio = document.getElementById("audio");
+    		var img = document.getElementById("img");
+    
+    		function play() {
+    			  audio.play();
+    		}
+    
+    		function stop() {
+      			audio.pause();
+    		}
+    
+    		img.addEventListener('click', play);
+    		img.addEventListener('mouseover', play);
+    		img.addEventListener('mouseout', stop);
+}
+
 // document.addEventListener('DOMContentLoaded', () => {
 //     (document.querySelectorAll('.toggle') || []).forEach(($toggle) => {
 //         $toggle.addEventListener('click', () => {

src/main/resources/templates/index.html

@@ -7,7 +7,8 @@
 <main>
   <section class="pt-6 pb-6 pl-5 pr-5">
     <h2 class="is-size-3 is-capitalized">Welcome to Wee!</h2>
-    <img class="wee-meme-image" src="../static/img/wee.png" th:src="@{/img/wee.png}" alt="Logo of person slipping"><!--  https://thenounproject.com/icon/slipping-11426/  -->
+    <audio id="audio" src="/audio/Wee.mp3"></audio>
+    <img id="img" value="PLAY" onclick="play()" class="wee-meme-image" src="../static/img/wee.png" th:src="@{/img/wee.png}" alt="Logo of person slipping"><!--  https://thenounproject.com/icon/slipping-11426/  -->
     <p>If you want to see wee memes click <a href="https://www.instagram.com/weee.memes/">here!</a></p>
     <p>Otherwise, please, indicate the url of your endpoint and let's start enacting your workflow!</p>
     <form class="pt-3" th:action="@{/pm}" method="post">