|
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<style>
|
|
|
|
|
.draggable {
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<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>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div class="draggable" id="scan1">
|
|
|
|
|
<img src="../static/images/TheStreamRunsBlurry_scan.png" width='40%' 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:250px">
|
|
|
|
|
<img src="../static/images/ShallPass_scan.png" width='40%' 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:260px">
|
|
|
|
|
<img src="../static/images/NilgünMarmara_scan.png" width='40%' 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" style="top:150px;left:270px">
|
|
|
|
|
<img src="../static/images/fist_Scan.png" width='40%' 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:160px;left:280px">
|
|
|
|
|
<img src="../static/images/Coveredfigure_scan.png" width='40%' 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:170px;left:290px">
|
|
|
|
|
<img src="../static/images/AşıkVeysel_Scan.png" width='40%' 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='40%' alt="test" onclick="playAudio('../static/audio/FreshMythsDifferentTimes_performance_podcast.mp3')">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="draggable">
|
|
|
|
|
<img src="../static/images/test2.jpeg" width='40%' alt="test" onclick="playAudio('../static/audio/feldenkrais_mai')">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="draggable">
|
|
|
|
|
<img src="../static/images/test3.jpeg" width='40%' alt="test" onclick="playAudio('../static/audio/Clip26')">
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
