added the seprataed audio

index.html

@@ -43,10 +43,10 @@
       <div class="col-md-12">
         <br>
         <div class="map_legend">
-        <div id="box1" onclick="popup_bg(600,86000)"><i class="box fa fa-play"></i></div> <p>Folklore literature</p>
-        <div id="box2" onclick="popup_bg(1465,30500)"><i class="box fa fa-play" aria-hidden="true"></i></div><p>Islamic Mysticism</p>
-        <div id="box3" onclick="popup_bg(0,60000)"><i class="box fa fa-play" aria-hidden="true"></i></div> <p>Contemporary poets</p>
-        <div id="box4" onclick="popup_bg(0,1000)"><i class="box fa fa-play" aria-hidden="true"></i></div> <p>Contemporary musicians</p>
+        <div id="box1" onclick="popup_box('audio1','b1')"><i class="b1 fa fa-play"></i></div> <p>Folklore literature</p>
+        <div id="box2" onclick="popup_box('audio2','b2')"><i class="b2 fa fa-play" aria-hidden="true"></i></div><p>Islamic Mysticism</p>
+        <div id="box3" onclick="popup_box('audio3','b3')"><i class="b3 fa fa-play" aria-hidden="true"></i></div> <p>Contemporary poets</p>
+        <div id="box4"><i class="box4 fa fa-play" aria-hidden="true"></i></div> <p>Contemporary musicians</p>
       </div>
       </div>
       </div>
@@ -59,6 +59,20 @@ preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur
 <source src="static/audio/HNI_Soundinstall_3tracks_together.webm">
 </audio>
 <input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 150px">
+
+<audio id="audio1"
+preload="metadata">
+<source src="static/audio/Hp_website_soundtracks_folklore.mp3">
+</audio>
+<audio id="audio2"
+preload="metadata">
+<source src="static/audio/Hp_website_soundtracks_islamicMystcism.mp3">
+</audio>
+<audio id="audio3"
+preload="metadata">
+<source src="static/audio/Hp_website_soundtracks_poets.mp3">
+</audio>
+
 </div>
 </div>
 
@@ -190,23 +204,6 @@ $(".draggable i.remove-elem").off('click').on("click", function(){
 <!-- scripts for mouse events -->
 
 <script>
-// function popup_bg(start,end) {
-  
-//   var myIcon = document.querySelector(".audioBG");
-//   var box = document.getElementById("audioBG");
-//     if (box.paused) {
-//       box.currentTime = start;
-//       myIcon.className = "audioBG fa fa-pause";
-//       setTimeout(function(){
-//       box.play();
-//       console.log(box.currentTime);
-//     }, end);
-// }
-//     // box.currentTime = start;
-//     // console.log(start);
-  
-// }
-
 
 // function popup_bg(start,end){
 //   var myIcon = document.querySelector(".audioBG");
@@ -215,25 +212,20 @@ $(".draggable i.remove-elem").off('click').on("click", function(){
 //   myIcon.className = "audioBG fa fa-pause";
 //   box.play();
 //   console.log(box.currentTime);
-//   setInterval(function(){
-//     if(box.currentTime>end){
-//       myIcon.className = "audioBG fa fa-play";
-//       box.pause();
-//       console.log(box.currentTime);
-//         }
-//       },1000);
+//   setTimeout(() => { myIcon.className = "audioBG fa fa-play";box.pause(); console.log(box.currentTime);}, end);
 //     }
 
-function popup_bg(start,end){
-  var myIcon = document.querySelector(".audioBG");
-  var box = document.getElementById("audioBG");
-  box.currentTime = start;
-  myIcon.className = "audioBG fa fa-pause";
-  box.play();
-  console.log(box.currentTime);
-  setTimeout(() => { myIcon.className = "audioBG fa fa-play";box.pause(); console.log(box.currentTime);}, end);
-    }
-
+function popup_box(audioid,box){
+  var myIcon = document.querySelector("."+box);
+  var audio = document.getElementById(audioid);
+  if (audio.paused) {
+  myIcon.className = box+" fa fa-pause";
+  audio.play();
+    }else {
+  myIcon.className = box+" fa fa-play";
+  audio.pause();
+}
+}
 
 
 </script>