|
|
|
@ -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"> |
|
|
|
<img src="../static/images/test2.jpeg" width='500px' alt="test"> |
|
|
|
|
|
|
|
<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/test3.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" onclick="playAudio('../static/audio/Clip26')"> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body> |
|
|
|
</html> |
|
|
|
|
