Browse Source

play and pause sound onclick image

master
nglk 4 years ago
parent
commit
1608f4bb41
  1. 53
      templates/perspectiveB.html

53
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/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="../static/js/draggable.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"> <link href="../static/css/style.css" rel="stylesheet" type="text/css">
<head> <head>
<title>PerspectiveB</title> <title>PerspectiveB</title>
@ -15,15 +38,35 @@
</head> </head>
<body> <body>
<div class="draggable"> <div class="draggable" style="top:120px;left:40px">
<img src="../static/images/test1.jpeg" width='500px' alt="test"> <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>
<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>
<div class="draggable"> <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>
<div class="draggable">
<img src="../static/images/test3.jpeg" width='500px' alt="test" onclick="playAudio('../static/audio/Clip26')">
</div> -->
</body> </body>
</html> </html>

Loading…
Cancel
Save