alicestrt
/
vvvw
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

play and pause sound onclick image

master
nglk 4 years ago
parent
c3e5cc645e
commit
1608f4bb41
1 changed files with 48 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 53
      templates/perspectiveB.html

53
templates/perspectiveB.html
View File

@ -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>

Write Preview
Loading…
Cancel
Save