94 lines
3.2 KiB
HTML
94 lines
3.2 KiB
HTML
<!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>Liquid</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>
|