From 1608f4bb41201c0d17fb5dba4e78a5cb7c87c6c6 Mon Sep 17 00:00:00 2001
From: nglk <diakaggel@gmail.com>
Date: Tue, 8 Sep 2020 20:09:51 +0200
Subject: [PATCH] play and pause sound onclick image

---
 templates/perspectiveB.html | 53 +++++++++++++++++++++++++++++++++----
 1 file changed, 48 insertions(+), 5 deletions(-)
diff --git a/templates/perspectiveB.html b/templates/perspectiveB.html
index cba3adb..7a8ad87 100644
--- a/templates/perspectiveB.html
+++ b/templates/perspectiveB.html
@@ -8,6 +8,29 @@
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script src="../static/js/draggable.js"></script>
+<script>
+// function playAudio(url) {
+//   new Audio(url).play();
+// }
+
+var currentPlayer;
+function EvalSound(soundobj) {
+
+ var thissound=document.getElementById(soundobj);
+ if(currentPlayer  && currentPlayer != thissound) {
+      currentPlayer.pause();
+ }
+ if (thissound.paused)
+            thissound.play();
+    else
+        thissound.pause();
+        thissound.currentTime = 0;
+         currentPlayer = thissound;
+}
+
+</script>
+
+
 <link href="../static/css/style.css" rel="stylesheet" type="text/css">
 <head>
 <title>PerspectiveB</title>
@@ -15,15 +38,35 @@
 </head>
 
 <body>
-  <div class="draggable">
-    <img src="../static/images/test1.jpeg" width='500px'  alt="test">
+<div class="draggable" style="top:120px;left:40px">
+    <img src="../static/images/test1.jpeg" width='500px' onClick="EvalSound('song1'); return true;" alt="test">
+<audio id="song1" style="display: none; width: 0px; height: 0px;"
+src="../static/audio/feldenkrais_mai" controls preload="auto" autobuffer>
+</div>
+
+<div class="draggable" style="top:130px;left:50px">
+  <img src="../static/images/test2.jpeg" width='500px' onClick="EvalSound('song2'); return true;"  alt="test">
+<audio id="song2" style="display: none; width: 0px; height: 0px;"
+src="../static/audio/Clip26" controls preload="auto" autobuffer>
+</div>
+
+<div class="draggable" style="top:140px;left:60px">
+  <img src="../static/images/test3.jpeg" width='500px' onClick="EvalSound('song3'); return true;"  alt="test">
+<audio id="song3" style="display: none; width: 0px; height: 0px;"
+src="../static/audio/FreshMythsDifferentTimes_performance_podcast.mp3" controls preload="auto" autobuffer>
+</div>
+
+  <!-- <div class="draggable">
+      <img src="../static/images/test1.jpeg" width='500px'  alt="test" onclick="playAudio('../static/audio/FreshMythsDifferentTimes_performance_podcast.mp3')">
   </div>
   <div class="draggable">
-    <img src="../static/images/test2.jpeg" width='500px'  alt="test">
+    <img src="../static/images/test2.jpeg" width='500px'  alt="test" onclick="playAudio('../static/audio/feldenkrais_mai')">
   </div>
   <div class="draggable">
-    <img src="../static/images/test3.jpeg" width='500px'  alt="test">
-  </div>
+    <img src="../static/images/test3.jpeg" width='500px'  alt="test" onclick="playAudio('../static/audio/Clip26')">
+  </div> -->
+
+
 
 </body>
 </html>
